javascript - 在vue中，如何多次调用ueditor？

问题描述

问 题

在webpack的模块化构建当中，使用vue开发

在组件内import了ueditor，第一次打开或刷新页面，ueditor是正常渲染的

ueditor渲染在一个弹窗当中，弹窗关闭后，ueditor被销毁，再次打开弹窗，则ueditor没有被渲染

由于是spa应用，许多时候没有被刷新，那么，怎么让ueditor多次渲染？而避免刷新呢？

import '../../static/ueditor/ueditor.config.js'
import '../../static/ueditor/ueditor.all.js'
import '../../static/ueditor/lang/zh-cn/zh-cn.js'

// 在mounted中执行

UE.getEditor('content', {
          UEDITOR_HOME_URL: __dirname + 'static/ueditor/',
          serverUrl: config.ajaxUrl + '/ueditor/jsp/controller.jsp',
          autoHeight: false,
          initialFrameHeight: '250',
          emotionLocalization: true,
          scaleEnabled: true,
          toolbars: [[
            'fullscreen','undo', 'redo','emotion','bold', 'italic', 'underline','forecolor', 'backcolor','insertimage','blockquote','justifyleft', 'justifycenter', 'justifyright','inserttable'
          ]]
        });

模板：

<script id="content" name="content" type="text/plain"></script>

very much Thanks in advance.

解决方案

离开时销毁editor对象

  data: () => (
    {
      editor: null,
    }
  ),
  mounted() {
    this.editor = UE.getEditor('editor');
  },
  destroyed() {
    this.editor.destroy();
  },

这篇关于javascript - 在vue中，如何多次调用ueditor？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！