前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了。
<强>具体可以参考这篇文章:https://www.jb51.net/article/118413.htm
ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/
完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html
最近工作中要求升级,需要在vue中创建多个ueditor实例,我使用neditor,其实就是把ueditor样式美化了下,其他和ueditor几乎一样,下面话不多说了,来一起看看详细的介绍吧。
然后修改ueditor.config.js配置文件
在vue项目的main.js添加ueditor引用
新建3个页面家,tab1, tab2.tab1和tab2是家里下面的子页面
在router-view外面一定要添加点火电极组件和过渡组件,不然ueditor实例无法保存
在组件文件夹下面新建一个编辑器作为编辑器的公共组件
在tab1中调用编辑器,同时要传入一个id并在编辑页面接受,注意如果需要多个实例,id一定不能相同
& lt; template>
& lt; div>
& lt;编辑ref="编辑" id=" tab1Editor祝辞& lt;/editor>
& lt;按钮@click=癵etContent”class=癿-t-10”祝辞获取内容& lt;/button>
& lt; div>
& lt; span>当前富文本编辑器内容是:{{内容}}& lt;/span>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
从“@/组件/导入编辑器编辑器”
出口默认{
名称:“tab1”,
编辑器组件:{},
数据(){
返回{
内容:“
}
},
方法:{//获取内容
getContent () {
这一点。内容=refs.editor.content美元
}
}
}
& lt;/script>
& lt; scoped>风格;
.m-t-10 {
margin-top: 10 px;
}
& lt;/style>
编辑页面代码,因为我们在router-view套用了点火电极,所以ueditor的初始化一定要放在激活里面,
确保每次进入页面都会重新渲染ueditor,在停用里面调用ueditor的破坏方法,确保每次离开页面的时候
会销毁编辑器实例,这样就可以渲染多个ueditor实例了,并且每次切换都能保存编辑器的内容。
如果多个选项卡只需要一个实例请调用复位()方法
& lt; template>
& lt; div>
& lt; div: id=" this.id "祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“编辑器”,
道具:“id”,
数据(){
返回{
问题:“,//ueditor实例
内容:",//编辑器内容
}
},
方法:{//初始化编辑器
initEditor () {
这一点。问题=UE.getEditor(这一点。id, {
initialFrameWidth:“100%”,
initialFrameHeight:“350”,
scaleEnabled:真
}）//编辑器准备就绪后会触发该事件
this.ue.addListener(“准备好”,()=祝辞{//设置可以编辑
this.ue.setEnabled ()
}）//编辑器内容修改时
this.selectionchange ()
},//编辑器内容修改时
selectionchange () {
this.ue。addListener (selectionchange,()=比;{
这一点。内容=this.ue.getContent ()
}）
}
},
激活(){//初始化编辑器
this.initEditor ()
},
释放(){//销毁编辑器实例,使用textarea代替
this.ue.destroy ()//重置编辑器,可用来做多个选项卡使用同一个编辑器实例//如果要使用同一个实例,请注释摧毁()方法//this.ue.reset ()
}
}
& lt;/script>
<>强源码地址
