1.装置

使用npm下载：npm安装wangeditor

2.创建实例

(1)基本用法：

模板div div id=' editor ' class=' editor '/div/div/templatescript import E from ' Wang editor ' export default { name : ' editor '，Mounted(){ var editor=new E(# editor ')editor . custom config . onchange=(html)={ this . formarticle . content=html } editor . create()}/脚本效果如图

(2)自定义高度编写如下：将菜单与编辑框分开

template div div id=' editor menu ' class=' editor menu '/div div id=' editor ' class=' editor '/div/templatescript import E from ' Wang editor ' export default { name : ' editor '，mounted(){ var editor=new E '(# editor menu '，' # editor ')editor . customconfig . onchange=(html)={ this . formarticle . content=html } editor . create()}/script style scoped . editor menu { border : 1 px solid # CCC；}.编辑器{ margin-top :-1px；//隐藏多余的一个像素边框border: 1px实心# ccc最小高度： 400 px；//编辑框height:auto的最小高度；//如果编辑框高度超过最小高度，会根据内容高度进行适配。}/style3，上传图片

(1)editor . custom config . uploadimg show base64=true//使用base64保存图片

(2)editor . custom config . uploadimg服务器='/upload'/上传服务器地址

/upload是上传图片的服务器接口，接口返回的数据格式如下(固定，否则不获取图片地址！):

{//errno是错误代码，0表示没有错误。//errno！=0时，错误代码可以通过以下监听功能获取失败进行自定义处理。errno': 0，//数据是一个数组，基本上足以返回在线地址' data': ['图片1地址'，'图片2地址'，' .']}的几张图片。官网也写得很详细

wangeditor3 vue2.0的简单示例

将wangeditor用作组件

在子组件中

template div id=' wangeditor ' div ref=' editorElem ' style=' text-align : left '/div/div/template script从' Wang editor '导入E导出默认{ name: ' editorElem，data(){ return { editorcontent : ' '，} }，prop s 3360[' catch data ']，//接收方法mounted () {var editor=new e (this。$ refs . editor em)//创建富文本实例编辑器. custom config . onchange=(html)={ this。editorcontent=html this。catch data(html)//通过catch data } editor . custom config . uploadimg server='您上传图片的界面' editor . custom config . upload file name='您的自定义文件名' editor . custom config . uploadimg headers={ ' accept ' 333 60 ' */* '，' authorization ' : ' carrier ' token//header token } editor . custom config . menus=[//菜单配置' head '，' list '，/list ' alignment '，//alignment' bold '，FontSize编辑器是编辑器对象，文件是选定的图片文件。//如果返回的结果为{prevent: true，msg:' xxxx'}，则表示用户已经放弃上传//return {//prevent3360 true，//msg: '放弃上传'//}}。Success3360函数(xhr，编辑器，结果){//图片上传并返回结果，图片插入成功后触发。//xhr是一个XMLHttpRequst对象，editor是一个editor对象。结果是服务器返回的结果。这个。imgur=对象。值(结果。数据)。tostring ()}，fail :函数(xhr，编辑器，结果){//上传图片并返回结果。图片插入不正确时触发。//xhr为XMLHttpRequst对象，editor为editor对象，result为服务器返回的结果}、error:function (xhr，editor){//图片上传不正确时触发。//xhr是XMLHttpRequst对象。编辑器是编辑器对象}、Timeout:函数(xhr，Editor){//图片上传超时触发//xhr是XMLHttpRequst对象，Editor是编辑器对象}。//如果服务器返回的格式不是{errno:0，data: [.]}，这个配置可以用//(不过，否则，将会报告错误。)自定义insert :函数(insert img，result，editor){//上传图片返回结果，自定义插入图片的事件(而不是编辑器自动插入图片！)//insertImg是插入图片的功能，editor是editor对象，result是服务器返回的结果。//比如图片上传成功，服务器返回的格式为{url3360 '.'}.可以这样插入图片：让URL=object。值(结果。数据)//结果。数据是服务器返回的图片名称和链接。JSON.stringify(url) //这里转换成JSON格式。insertImg(url) //结果必须是JSON格式字符串！否则，在父组件中会报告一个错误

模板div id='父亲' wangeditor : catch data=' catch data '/Wang editor/div/template script从导入Wang editor。/Wang editor ' data(){ return { content : ' ' } }，methods : { catch data(value){ this。content=value//在这里，接受子组件传递的参数，赋给data} }、components: { wangeditor }中的参数，/script上单词最多的地方可以看得一清二楚。只有自定义insert :函数(insert img，result，editor) {}中的步骤完成，图片才会以富文本显示，否则不会自动显示。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。