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 EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
vue实现购物车结算功能
Jun 18 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
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
一套Delphi的笔试题二
2013/05/11 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
户外活动策划方案
2014/03/12 职场文书
教师师德考核自我评价
2014/09/13 职场文书
个人整改方案范文
2014/10/25 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
nginx设置资源请求目录的方式详解
2022/05/30 Servers