wangEditor富文本编辑器结合vue使用

Posted 2021-01-05 senleyumi

一、wangEditor3.1.1

wangEditor富文本编辑器具体参数配置请参考官方文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599。

二、实现图文编辑

 

 1  var E = window.wangEditor;
 2             //vm.editor = new E(document.getElementById(‘editor‘));
 3             vm.editor = new E(‘#editor‘, ‘#editor_body‘);
 4             //自定义菜单配置
 5             vm.editor.customConfig.menus = [
 6                 /!*‘head‘,//标题
 7                  ‘bold‘,//粗体
 8                  ‘fontSize‘,//字号
 9                  ‘fontName‘,//字体
10                  ‘italic‘,//斜体
11                  ‘foreColor‘,//文字颜色*!/
12                 ‘image‘,//插入图片
13                 ‘undo‘,//撤销
14                 ‘redo‘//重复
15             ];
16             // 自定义字体
17             vm.editor.customConfig.fontNames = [
18                 ‘宋体‘,
19                 ‘微软雅黑‘,
20                 ‘Arial‘,
21                 ‘Tahoma‘,
22                 ‘Verdana‘
23             ];
24             vm.editor.customConfig.zIndex = 100;
25             //关闭粘贴样式的过滤
26             vm.editor.customConfig.pasteFilterStyle = false;
27             //忽略粘贴内容中的图片
28             vm.editor.customConfig.pasteIgnoreImg = true;
29             // 将图片大小限制为 3M
30             vm.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
31             // 限制一次最多上传 5 张图片
32             vm.editor.customConfig.uploadImgMaxLength = 1;
33             //上传图片到服务器可显示上传
34             var url = baseURL + "ossimage/image/save";
35             vm.editor.customConfig.uploadImgServer = url;
36 
37             //自定义上传图片
38             vm.editor.customConfig.customUploadImg = function (files, insert) {
39                 // files 是 input 中选中的文件列表
40                 // insert 是获取图片 url 后，插入到编辑器的方法
41                 if (files == null || files == undefined) {
42                     layer.msg("请选择图片");
43                     return;
44                 }
45                 var formData = new FormData();
46                 formData.append("file", files[0]);
47                 var url = baseURL + "ossimage/image/save";
48                 $.ajax({
49                     type: "POST",
50                     url: url,
51                     data: formData,
52                     processData: false,
53                     contentType: false,
54                     success: function (r) {
55                         if (r.code == 0) {
56                             vm.contentImgUrl = r.url;
57                             vm.contentImgUuid = r.uuid;
58                             // 上传代码返回结果之后，将图片插入到编辑器中
59                             insert(vm.contentImgUrl);
60                         } else {
61                             layer.msg("上传失败");
62                         }
63                     }
64                 });
65 
66             };
67             //隐藏网络图片
68             vm.editor.customConfig.showLinkImg = false;
69             vm.editor.create();

三、实现效果

四、总结

wangEditor3.1.1使用获取html时，使用console.log或者alert都可以展示<p>标签包裹的文本，图片是<img>标签，对于数据的存储来说存储量少了。