您的当前位置:首页>全部文章>文章详情

vue引入富文本编辑器Ueditor

发表于:2023-09-09 09:09:22浏览:121次TAG: #Vue #Ueditor

1.安装

npm  i  vue-ueditor-wrap --save

cnpm i vue-ueditor-wrap --save

yarn add vue-ueditor-wrap --save

2.将Ueditor.rar解压到项目public文件夹下
3.引入组件

import VueUeditorWrap from 'vue-ueditor-wrap'

4.注册组件

components:{
    VueUeditorWrap
}

5.使用组件

<VueUeditorWrap v-model="content" :config="myConfig"/>

6.定义数据

value: '这是我调用vue-ueditor-wrap的案例',
myConfig: {
    // 编辑器不自动被内容撑高
    autoHeightEnabled: false,
    // 初始容器高度
    initialFrameHeight: 240,
    // 初始容器宽度
    initialFrameWidth: '100%',
    // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
    serverUrl: 'http://35.201.165.105:8000/controller.php',
    // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项
    // vue-ueditor-wrap 会自动处理常见的情况
    UEDITOR_HOME_URL: '/UEditor/'
}