wangEditor富文本的使用

基于wangEditor轻量、简洁,并且么有依赖Jquery的优点,是大多数开发者的选择,

尽管官方文档为中文,但是介绍的大多为browser端的开发,对于工程化的开发并不是很详细

下边我就给大家分享一下在vue工程化中他的使用

 npm install wangeditor

安装完之后直接在所需要使用的组件中导入就可以


下边就是创建和配置


我使用的是官网中的 分离结构

实例化对象我选择在mounted中 

其中editor1.customConfig.menus是配置你所需要的富文本,如表情,图片等

editor1.customConfig.uploadImgShowBase64=true 是配置本地上传图片

editor1.customConfig.uploadImgMaxSize 设置图片大小

editor1.customConfig.onchange = (txt) => {

          this.editorContent = txt

        }

获取内容  editorContent 是已在data中定义好的

其中还有官网给的另外两种写法

this.editorContent = editor1.$txt.html()

this.editorContent = editor1.$txt.text()

当然一切的配置都需要写在在实例化对象创建之前及editor1.create()之前

小弟不才,高深的还搞不太明太,欢迎大佬指点

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容