1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue element中使用UEditor富文本编辑器--vue-ueditor-wrap

Vue element中使用UEditor富文本编辑器--vue-ueditor-wrap

时间:2021-10-21 22:48:15

相关推荐

Vue element中使用UEditor富文本编辑器--vue-ueditor-wrap

一、安装依赖:

首先在前端项目Terminal中执行以下命令:

如果你没安装yarn就用npm(第一条命令),安装过yarn就用(第二条命令):简单测试安装yarn与否,可以在Terminal输入yarn命令,如果提示yarn不是内部命令就是说明你还未成功安装yarn,这时你可以选择用npm命令安装,如果npm也不是内部命令,那就说明你node.js可能也没装。

npm i vue-ueditor-wrap# 或者 yarn add vue-ueditor-wrap

二、下载ueditor并将其复制到Public目录下

下载地址.

(网上也有下载)

三、引入VueUeditorWrap组件

<el-form-item label="操作说明:" prop="explain"><el-row><el-col><VueUeditorWrap v-model="form.explain" :config="myConfig" v-loading="loading"/></el-col></el-row></el-form-item>import VueUeditorWrap from 'vue-ueditor-wrap'components: {VueUeditorWrap},data() {return{myConfig: {// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 200,// 初始容器宽度initialFrameWidth: '100%',// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)serverUrl: config.baseURL + 'config',// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2UEDITOR_HOME_URL: config.UEDITOR_HOME_URL + 'static/UEditor/'},}}

五、最后显示

<el-table-column label="使用说明" align="center" prop="explain"><template slot-scope="scope"><span v-html="scope.row.explain"></span></template></el-table-column>

prop看element-ui文档

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。