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>