vue2.x集成百度UEditor富文本编辑器的方法


Posted in Javascript onSeptember 21, 2018

最近开发vue项目过程中,由于产品需要在项目中添加富文本编辑器,也在npm上找了几个基于vue开发的富文本编辑器,但是对兼容性比较高,不能兼容到IE9,10。所以最后决定使用百度UEditor。然后又是各种找如何集成到vue中。好记性不如烂笔头,记录下来以便以后需要的时候可以直接用。

1.首先下载UEditor源码,将整个文件放到static文件夹中

vue2.x集成百度UEditor富文本编辑器的方法

2.然后将UEditor集成到项目中去。

找到src/main.js,在main.js中

import '../static/ueditor/ueditor.config.js'
import '../static/ueditor/ueditor.all.min.js'
import '../static/ueditor/lang/zh-cn/zh-cn.js' 
import '../static/ueditor/ueditor.parse.min.js'

3.在src/components文件夹下创建公共组件UE.vue文件,作为编辑器组件

<template>
 <div class="UE">
 <!--这个地方的大小是可以自己控制的-->
 <div id="editor" style="width:100%;height:120px;">
 </div>
 </div>
</template>
export default {
 name:'ue',
 props:{
  value:{
   type:String,
   default:""
  }
 },
 data() {
  return {
  editor: null,
  };
 },
 mounted() {
  // 实例化editor编辑器
  this.editor = window.UE.getEditor("editor");
  //设置编辑器默认内容
  this.editor.addListener('ready', () => {
  this.editor.setContent(this.value)
  })
 },
  methods: {
  //获取编辑器中的内容
  getUEContent () {
  return this.editor.getContent()
  }
 },
 destroyed() {
  // 将editor进行销毁
  this.editor.destroy();
 }
}

4.我们可以通过ueditor.config.js来改变编辑器所显示的选项

如果我们默认显示的话,会是这个样子

vue2.x集成百度UEditor富文本编辑器的方法

如果你不需要某些元素,你可以在ueditor.config.js中的toolbars中设置需要显示的标签

vue2.x集成百度UEditor富文本编辑器的方法

当然你还需要做下其他的配置,比如指定编辑器资源文件根目录

window.UEDITOR_HOME_URL = "./static/UE/";

在这里友情提示,如果你的项目打包之后不是放在一级目录下,建议写成这样相对路径,不然会报错找不到资源。
5.这样你就可以在其他组件引入使用了,我们可以通过props向编辑器传递默认显示的值,还可以通过getUEContent()方法获取编辑器输入的内容。但是在浏览器控制台你还是会看到报错

后台配置项返回格式出错,上传功能将不能正常使用!

这是因为我们在编辑器中上传图片或者视频的时候,没有配置服务器请求接口,在ueditor.config.js中,对serverUrl进行配置就可以了

serverUrl: "" //这个接口地址去跟你们的后台要就可以了

到这里,我们就可以愉快的使用UEditor富文本编辑器了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 #Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
Sep 21 #Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 #Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 #Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 #Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 #Javascript
探秘vue-rx 2.0(推荐)
Sep 21 #Javascript
You might like
PHP文件上传实例详解!!!
2007/01/02 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
phpinfo的知识点总结
2019/10/10 PHP
JS event使用方法详解
2008/04/28 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
微信小程序入门教程
2016/11/18 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
python中关于for循环的碎碎念
2017/06/30 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python 基于opencv操作摄像头
2020/12/24 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
高三毕业生自我鉴定
2013/12/20 职场文书
公司培训欢迎词
2014/01/10 职场文书
通信研究生自荐信
2014/02/01 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
python数字图像处理:图像简单滤波
2022/06/28 Python