标签:技术分享 false 结果 turn 富文本编辑器 rda pos pre pen
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>标签,对于数据的存储来说存储量少了。
标签:技术分享 false 结果 turn 富文本编辑器 rda pos pre pen
原文地址:https://www.cnblogs.com/senleyumi/p/9618410.html