ueditor-plus富文本编辑器

ueditor-plus
ueditor-plus文档
vue-ueditor-wrap文档

1.下载ueditor-plus

2.放在vue3的public文件下面

3.安装vue-ueditor-wrap

# vue-ueditor-wrap v3 仅支持 Vue 3
npm i vue-ueditor-wrap@3.x -S
# or
yarn add vue-ueditor-wrap@3.x

4.注册组件

// main.js
import { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';

createApp(App).use(VueUeditorWrap).mount('#app');

5.页面使用

<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>

import { ref } from 'vue';

export default {
  setup() {
    const msg = ref('<h2>Hello World!</h2>');
    return {
      msg,
    };
  },
  created() {
    // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config
    this.editorConfig = {
      UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径(可根据环境判断更改地址)
      serverUrl: '后端部署的地址', 
    };
  },
};

6.更改ueditor.config.js