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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
js post提交调用方法
Feb 12 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php实现分页工具类分享
2014/01/09 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Django 路由控制的实现代码
2018/11/08 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
珍珠鸟教学反思
2014/02/01 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
学生评语大全
2014/04/18 职场文书
2014年实习期工作总结
2014/11/27 职场文书
幼儿教师个人总结
2015/02/05 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技