VUE+百度富文本编辑器

在我们开发过程中或多或少会遇到需要富文本的功能,富文本编辑器其实也很多,但是我们常用的就是那么几个,比如百度UEditor富文本编辑器,这个使用起来也方便,功能也很完善。但是总有那么一点吊胃口,百度富文本编辑器官网也不再做更新了,在vue项目中使用的话很难配置,开发过程中遇到的问题!

前期准备工作下载好UEditor

后续提供下载UEditor下载地址UEditor下载

下载好的UEditor文件放置在位置

vue-cli3版本放在public目录下,vue-cli2版本放在静态static目录下
以vue-cli2为例在这里插入图片描述

其次安装vue-ueditor-wrap

npm install vue-ueditor-wrap 或者cnpm install vue-ueditor-wrap

Vue中使用步骤实现

vue文件中html部分代码

 <vue-ueditor-wrap v-model="remark" :config="myConfig"></vue-ueditor-wrap>

vue文件中Js代码部分

 const VueUeditorWrap = window.VueUeditorWrap;// 全局变量,通过 script 标签引入
    export default {
  data(){
         return {
          remark:'我是渲染字段',
          myConfig: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 400,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
            serverUrl: '文件上传的接口地址,自己去实现',
            // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
            UEDITOR_HOME_URL: '/static/UEditor/'
          },
}
}
}
  • 2
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彬_心

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值