在vue中創建多個ueditor實例

簡介

在vue中創建多個ueditor實例,我使用neditor,其實就是把ueditor樣式美化了下,其他和ueditor幾乎一樣

截圖

源碼地址

https://github.com/obliviouss...

說明

下載ueditor或neditor源碼,拷貝到static目錄下面

然后修改ueditor.config.js配置文件

在vue項目的main.js添加ueditor引用

新建3個頁面 home,tab1,tab2。tab1和tab2是home下面的子頁面

在router-view外面一定要添加keep-alive組件和transition組件,不然ueditor實例無法保存

在components文件夾下面新建一個editor作為編輯器的公共組件

在tab1中調用editor,同時要傳入一個id並在editor頁面接受,注意如果需要多個實例,id一定不能相同

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

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

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

editor頁面代碼,因為我們在router-view套用了keep-alive,所以ueditor的初始化一定要放在activated里面,
確保每次進入頁面都會重新渲染ueditor,在deactivated里面調用ueditor的destroy方法,確保每次離開頁面的時候
會銷毀編輯器實例,這樣就可以渲染多個ueditor實例了,並且每次切換都能保存編輯器的內容。

如果多個tab只需要一個實例請調用reset()方法

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

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