vue中使用UEditor富文本首次加载正常，第二次无法正常加载

这个问题可能是由于UEditor的实例没有正确销毁，导致第二次加载时出现问题。可以在Vue组件的`beforeDestroy`钩子函数中手动销毁UEditor实例，例如：

<template>
  <div ref="editor"></div>
</template>

<script>
import UEditor from 'ueditor'

export default {
  mounted() {
    this.editor = new UEditor(this.$refs.editor)
  },
  beforeDestroy() {
    this.editor.destroy()
  }
}
</script>

这样，在组件销毁前会先销毁掉UEditor实例，下次再加载时就不会出现问题了。

相关问题

vue中使用ueditor

在Vue中使用UEditor，可以使用vue-ueditor-wrap插件。安装方法为：npm i vue-ueditor-wrap@2.x 或者 yarn add vue-ueditor-wrap@2.x。在相应的Vue组件文件中，可以使用富文本编辑器，将editor的div作为富文本的承载容器，然后实例化editor编辑器，获取editor中的文本，最后将editor进行销毁。

vue3+vite+ts 使用富文本编辑器vue-ueditor-wrap

以下是使用vue-ueditor-wrap富文本编辑器的步骤：

1.安装vue-ueditor-wrap

npm install vue-ueditor-wrap --save

2.在Vue组件中引入vue-ueditor-wrap

<template>
  <div>
    <vue-ueditor-wrap v-model="content" :config="myConfig" editor-id="editor-demo-01" @ready="ready"></vue-ueditor-wrap>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      content: '',
      myConfig: {
        // 配置项
      },
      editorInstance: null
    }
  },
  methods: {
    ready(editorInstance) {
      this.editorInstance = editorInstance
    }
  }
}
</script>

3.在Vue组件中定义myConfig配置项

<script>
export default {
  data() {
    return {
      myConfig: {
        // 配置项
        UEDITOR_HOME_URL: '/static/UEditor/', // UEditor资源文件的根目录
        serverUrl: '/api/ueditor/' // UEditor服务端接口地址
      }
    }
  }
}
</script>

4.在Vue组件中使用editorInstance获取编辑器实例

<script>
export default {
  methods: {
    ready(editorInstance) {
      this.editorInstance = editorInstance
    },
    getContent() {
      console.log(this.editorInstance.getContent()) // 获取编辑器内容
    }
  }
}
</script>