一、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>標簽，對於數據的存儲來說存儲量少了。

wangEditor富文本編輯器結合vue使用