欢迎使用 wangEditor-Antd 富文本编辑器
基于ant-design风格重构的wangeditor富文本编辑器,主要趋于样式重构,javascript部分未修改。
基础配置和官方原文的一致
minHeihgtmaxheightextBgColor下载zip,将目录中 dist/wange-ditor-antd.js或是dist/wange-ditor-antd.js引入项目直接调取
<script src="./dist/wang-editor-antd.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.customConfig.uploadImgServer = '/upload'
editor.create()
</script>
npm install wangeditor-antd --save //或是使用cnpm
components形式使用
<template>
<div ref="editor"></div>
</template>
<script>
import E from 'wangeditor-antd'
export default {
name: 'editor',
props:['get-full-text','content'], //回调方法
mounted() {
let editor = new E(this.$refs.editor);
editor.customConfig.onchange = (html) => {
this.getFullText(html) //内容赋值
};
editor.customConfig.uploadImgServer ='你的上传地址';
editor.customConfig.uploadFileName = 'file';
editor.customConfig.zIndex = 100;
editor.customConfig.uploadImgParams = {
from: 'editor'
};
editor.create();
//如果默认传递content值则渲染默认内容
if(this.content){
editor.txt.html(this.content)
}
}
}
</script>