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