Vue3富文本组件UEditor ，[email protected]

天马3798

于 2024-02-05 16:58:44 发布

阅读量961

点赞数 13

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u011127019/article/details/136044655

版权

Vue 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

一、Vue 中UEditor

2.0版本跟3.0版本不兼容

重点安装版本不同

使用详细介绍：

vue-ueditor-wrap - Vue + UEditor + v-model双向绑定

二、安装流程

1.安装

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

2.全局引入，注册组件

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

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

3.使用 v-model 绑定属性

<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 静态资源的根路径，可参考常见问题1
      serverUrl: '//ueditor.zhenghaochuan.com/cos', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
    };
  },
};