vue wangeditor文本框的使用

1.安装文本框插件npm i wangeditor --save

2.引入文本框插件import E from "wangeditor";

3.页面html加入<div class="editorElem" id="editorElem" style="text-align:left"></div>

4.我的是在mounted里面写着呢，你可以提出来一个方法

var editor = new E("#editorElem");

editor.customConfig.menus = [

"head", // 标题

"bold", // 粗体

"fontSize", // 字号

"fontName", // 字体

"italic", // 斜体

"underline", // 下划线

"strikeThrough", // 删除线

// "foreColor", // 文字颜色

// "backColor", // 背景颜色

"link", // 插入链接

"list", // 列表

"justify", // 对齐方式

"quote", // 引用

"emoticon", // 表情

"image", // 插入图片

"table", // 表格

"code", // 插入代码

"undo", // 撤销

"redo" // 重复

];

editor.customConfig.uploadImgMaxLength = 5; /*限制一次最多上传 5 张图片 */

editor.customConfig.uploadImgMaxSize =

3 * 1024 * 1024; /* 将图片大小限制为 3M 默认为5M */

editor.customConfig.pasteIgnoreImg = false;选择复制是否显示图片

editor.customConfig.customUploadImg = async (files, insert) => {

/* files 是 input 中选中的文件列表 */

let formData = new FormData();

formData.append("file", files[0]);

// var data =await this.upload(formData)

let config = {

headers: { "Content-Type": "multipart/form-data" }

}; //添加请求头

this.$ajax.post("这是你的后台上传图片的的url", 参数).then(res => {

console.log(res);

insert();//把数据图片插入文本框

});

/* upload方法是后台提供的上传图片的接口 */

/* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/

};

editor.customConfig.onchange = html => {

this.editorContent = html;

};

editor.create(); /* 创建编辑器 */

 

官方文档路径：http://www.wangeditor.com/