vue2+vue-ueditor-wrap组件使用记录

2023-02-08  本文已影响0人  吴小冷

ueditor修改后的包,可直接下载解压使用

pan.baidu.com/s/1s8jdkOeANUUeGOg_yHX3rA?pwd=me3b

1.解压后把 UEditor 文件放到public下

image.png
2.安装vue-ueditor-wrap
npm i vue-ueditor-wrap
3.在main.js中引入并使用
import VueUeditorWrap from 'vue-ueditor-wrap'
createApp(App).use(VueUeditorWrap).mount('#app')

4.直接使用

<vue-ueditor-wrap v-model="contents" :config="myConfig"></vue-ueditor-wrap>
//↑html    ↓js
data() {
    return {
      contents: "你个老六",
      myConfig: {
        //zIndex: 9999,//有层级问题可以设置zIndex
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 420, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: '/UEditor/',
        // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
        serverUrl: `/api/v1/Upload`//后端配置的上传接口(接口返回配置只需要一个oobj,不需要外层内容)
      }
    }
  },

到这里前端就可以直接使用了
5.如果出现not import language file报错
原因:没有引入语言文件,加入下面引入

<script type="text/javascript" src="../ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>

//后端配置请参考原文

blog.csdn.net/lhkuxia/article/details/128882477
上一篇 下一篇

猜你喜欢

热点阅读