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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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采集相关教程之一 CURL函数库
2010/02/15 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
python中np是做什么的
2020/07/21 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
怎样声明子类
2013/07/02 面试题
高中家长寄语
2014/04/02 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
投标承诺函格式
2015/01/21 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
高中班主任寄语
2019/06/21 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
详解如何使用Nginx解决跨域问题
2022/05/06 Servers