前言
wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单。
官网:www.wangEditor.com
文档:www.wangeditor.com/doc
源码:github.com/wangeditor-team/wangEditor
代码如下(示例):
<div id="contentPost" class="contentPost"></div>
data(){
return{
formLog: {
content: "",//内容
content_text: "",//纯文本内容即不包含图片布局样式相关代码的内容
},
editor: null,
}
}
mounted(){
this.initEditor();
}
methods:{
initEditor() {
this.$nextTick(() => {
if (!this.editor) {
this.editor = new window.wangEditor("#contentPost");
this.editor.config.height = 580;
this.editor.config.showFullScreen = false;
this.editor.config.menus = this.menus;
this.editor.config.uploadImgMaxSize = 1024 * 1024; //图片限制1M
this.editor.config.uploadImgAccept = ["jpg", "jpeg", "png"];
this.editor.config.uploadImgServer = "";//上传地址
this.editor.config.uploadFileName = "file";
this.editor.create();
}
});
},
//发布富文本编辑的内容
submit(){
this.formLog.content = this.editor.txt.html();
this.formLog.content_text = this.editor.txt.text();
}
}
//销毁编辑器
this.editor.destroy()
this.editor = null