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 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
详解JavaScript常量定义
Jan 03 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 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
图书管理程序(三)
2006/10/09 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python判断设备是否联网的方法
2018/06/29 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
四年级数学教学反思
2014/02/02 职场文书
八一建军节感言
2014/02/28 职场文书
欢度春节标语
2014/07/01 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
责任书范本大全
2015/05/11 职场文书
公司业务员管理制度
2015/08/05 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers