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优先加载笔记代码
Sep 30 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
js面向对象编程总结
Feb 16 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
Vue内部渲染视图的方法
Sep 02 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原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python中if有多个条件处理方法
2020/02/26 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
工作自我评价怎么写
2014/01/29 职场文书
教学评估实施方案
2014/03/16 职场文书
天猫活动策划方案
2014/08/21 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
成绩报告单家长评语
2014/12/30 职场文书
财务人员个人工作总结
2015/02/27 职场文书
爱心募捐通知范文
2015/04/27 职场文书
目标责任书格式范文
2015/05/11 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android