在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>