码迷,mamicode.com
首页 > 其他好文 > 详细

在vue中创建多个ueditor实例

时间:2020-05-08 16:31:08      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:enable   截图   smi   return   相同   stat   keep   下载   需要   

简介

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

在vue中创建多个ueditor实例

标签:enable   截图   smi   return   相同   stat   keep   下载   需要   

原文地址:https://www.cnblogs.com/10manongit/p/12850851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!