Vue集成UEditor puls富文本编辑器

要在Vue项目中集成UEditor富文本编辑器，你需要按照以下步骤操作：

1. 在Vue项目中安装UEditor的JavaScript版本。

npm install ueditor --save

2. 在Vue组件中引入并初始化UEditor。

<template>
  <div ref="editor"></div>
</template>
 
<script>
import 'ueditor/ueditor.config.js'
import 'ueditor/ueditor.all.min.js'
import 'ueditor/lang/zh-cn/zh-cn.js'
import 'ueditor/themes/iframe.css'
 
export default {
  name: 'UE',
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = UE.getEditor(this.$refs.editor, this.ueditorInit)
  },
  methods: {
    ueditorInit() {
      // 初始化配置
    },
    getContent() {
      return this.editor.getContent()
    },
    setContent(content) {
      this.editor.setContent(content)
    }
  },
  destroyed() {
    this.editor.destroy()
  }
}
</script>

3. 在父组件中使用UEditor组件。

<template>
  <div>
    <ue :content="content" ref="ue"></ue>
    <button @click="submitContent">提交内容</button>
  </div>
</template>
 
<script>
import Ue from './components/ue.vue' // 引入UEditor组件
 
export default {
  components: {
    Ue
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    submitContent() {
      this.content = this.$refs.ue.getContent()
      // 执行提交操作
    }
  }
}
</script>

确保在Vue项目的vue.config.js文件中配置了正确的UEditor资源路径：

module.exports = {
  configureWebpack: {
    externals: {
      'ueditor': 'UE'
    }
  }
}

以上代码提供了一个基本的UEditor组件，你可以在父组件中引用它，并通过ref获取内容。记得在实际使用时根据需要配置UEditor的初始化选项。