wangeditor 的使用和遇到的一些问题

Posted 2023-05-02

参考技术A 父组件中使用

大致配置就这么多,还有颜色,字体,表情什么的都可以配置,样式的问题主要看项目需求,后来又加了模板的需求,所以又改了,wangeditor 中是没有模板这个概念的,那么我们怎么实现这个功能呢,听到这个需求的时候我都要考虑换富文本编辑器了,因为不知道换了其他的不知道有没有其他的问题,后来试了试,使用了solt 插槽,看到可以的那一刻,哇,真开心

这个改过之后的布局,具体样式的话,还需要自己调试,效果如下

大致能用了,虽然还有点奇怪,也没有去改,其他的问题就是上传的问题了,本例采用base64的方式上传图片,很多的就是渲染页面时的样式问题,如果出现渲染页面滚动条的问题,可以修改源码样式后在打包

总之大致就这么多

WangEditor的使用

富文本编辑器 WangEditor的使用

1.首先引入jar ---------------wangEditor.js

2.初始化wangEditor

var E = window.wangEditor
editor = new E(‘#notContect‘)
editor.customConfig.uploadImgServer = ‘p/onload/upload‘; //上传URL
editor.customConfig.uploadFileName = ‘myFileName‘;
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {

//上传成功后返回地址
var url =result.data;
insertImg(url);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.create();

附上wangEditor官网地址---http://www.wangeditor.com/