vue中如何創(chuàng)建多個(gè)ueditor實(shí)例教程

 <template>
 <div>
 <editor ref="editor" id="tab1Editor"></editor>
 <button @click="getContent" class="m-t-10">獲取內(nèi)容</button>
 <div>
 <span>當(dāng)前富文本編輯器內(nèi)容是: {{content}}</span>
 </div>
 </div>
 </template>

 <script>
 import Editor from '@/components/editor'
 export default {
 name: 'tab1',
 components: { Editor },
 data() {
 return {
 content:''
 }
 },
 methods: {
 //獲取內(nèi)容
 getContent(){
 this.content = this.$refs.editor.content
 }
 }
 }
 </script>

 <style scoped>
 .m-t-10{
 margin-top: 10px;
 }
 </style>

 <template>
 <div>
 <div :id="this.id"></div>
 </div>
 </template>

 <script>
 export default {
 name: 'editor',
 props: ['id'],
 data() {
 return {
 ue: '', //ueditor實(shí)例
 content: '', //編輯器內(nèi)容
 }
 },
 methods: {
 //初始化編輯器
 initEditor() {
 this.ue = UE.getEditor(this.id, {
 initialFrameWidth: '100%',
 initialFrameHeight: '350',
 scaleEnabled: true
 })
 //編輯器準(zhǔn)備就緒后會(huì)觸發(fā)該事件
 this.ue.addListener('ready',()=>{
 //設(shè)置可以編輯
 this.ue.setEnabled()
 })
 //編輯器內(nèi)容修改時(shí)
 this.selectionchange()
 },
 //編輯器內(nèi)容修改時(shí)
 selectionchange() {
 this.ue.addListener('selectionchange', () => {
 this.content = this.ue.getContent()
 })
 }
 },
 activated() {
 //初始化編輯器
 this.initEditor()
 },
 deactivated() {
 //銷毀編輯器實(shí)例，使用textarea代替
 this.ue.destroy()
 //重置編輯器，可用來做多個(gè)tab使用同一個(gè)編輯器實(shí)例
 //如果要使用同一個(gè)實(shí)例,請(qǐng)注釋destroy()方法
 //this.ue.reset()
 }
 }
 </script>