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

一、wangEditor3.1.1

wangEditor富文本編輯器具體參數配置請參考官方文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/332599。

二、實現圖文編輯

 

 var E = window.wangEditor;
            //vm.editor = new E(document.getElementById('editor'));
            vm.editor = new E('#editor', '#editor_body');
            //自定義菜單配置
            vm.editor.customConfig.menus = [
                /!*'head',//標題
                 'bold',//粗體
                 'fontSize',//字號
                 'fontName',//字體
                 'italic',//斜體
                 'foreColor',//文字顏色*!/
                'image',//插入圖片
                'undo',//撤銷
                'redo'//重復
            ];
            // 自定義字體
            vm.editor.customConfig.fontNames = [
                '宋體',
                '微軟雅黑',
                'Arial',
                'Tahoma',
                'Verdana'
            ];
            vm.editor.customConfig.zIndex = 100;
            //關閉粘貼樣式的過濾
            vm.editor.customConfig.pasteFilterStyle = false;
            //忽略粘貼內容中的圖片
            vm.editor.customConfig.pasteIgnoreImg = true;
            // 將圖片大小限制為 3M
            vm.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
            // 限制一次最多上傳 5 張圖片
            vm.editor.customConfig.uploadImgMaxLength = 1;
            //上傳圖片到服務器可顯示上傳
            var url = baseURL + "ossimage/image/save";
            vm.editor.customConfig.uploadImgServer = url;

            //自定義上傳圖片
            vm.editor.customConfig.customUploadImg = function (files, insert) {
                // files 是 input 中選中的文件列表
                // insert 是獲取圖片 url 后，插入到編輯器的方法
                if (files == null || files == undefined) {
                    layer.msg("請選擇圖片");
                    return;
                }
                var formData = new FormData();
                formData.append("file", files[0]);
                var url = baseURL + "ossimage/image/save";
                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (r) {
                        if (r.code == 0) {
                            vm.contentImgUrl = r.url;
                            vm.contentImgUuid = r.uuid;
                            // 上傳代碼返回結果之后，將圖片插入到編輯器中
                            insert(vm.contentImgUrl);
                        } else {
                            layer.msg("上傳失敗");
                        }
                    }
                });

            };
            //隱藏網絡圖片
            vm.editor.customConfig.showLinkImg = false;
            vm.editor.create();

三、實現效果

四、總結

wangEditor3.1.1使用獲取html時，使用console.log或者alert都可以展示<p>標簽包裹的文本，圖片是<img>標簽。