【笔记】vue项目使用Ueditor富文本编辑器

最新推荐文章于 2024-08-20 14:28:21 发布

_月半_

最新推荐文章于 2024-08-20 14:28:21 发布

阅读量663

点赞数

文章标签： vue.js html5

本文链接：https://blog.csdn.net/qq_46100150/article/details/107322017

版权

// 下载依赖
yarn add vue-ueditor-wrap

//下载ueditor包（https://github.com/HaoChuan9421/vue-ueditor-wrap），并更名为UEditor放在public文件夹下
工程目录
//页面使用

//-----------1.引入-----------
import VueUeditorWrap from 'vue-ueditor-wrap'

//-----------2.component-----------
   components: {
      VueUeditorWrap
    },
    
//-----------3.html-----------
<vue-ueditor-wrap class="ueditorBox" v-model="msg" :config="myConfig"></vue-ueditor-wrap>

//-----------4.data-----------
      msg: '<h2>Vue + UEditor + v-model双向绑定</h2>',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        serverUrl: '这里自配',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/UEditor/'
      }