Vue2.0中集成UEditor富文本编辑器的方法


Posted in Javascript onMarch 03, 2018

在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。

这类的文章网上有很多,我进行了摸索、手写代码、汇总、排版,形成了这篇文章。

下载对应的UEditor源码

首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP、Asp、.Net、Jsp)。

http://ueditor.baidu.com/website/download.html

下载之后,把资源放到 /static/ue/ 静态目录下。文档结构如下:

Vue2.0中集成UEditor富文本编辑器的方法

(我把UEditor放到了static静态目录下面,这里的文件不会被webpack打包,当然你也可以选择性地放进src中)

编辑 UEditor 编辑器 配置文件

我们打开 ueditor.config.js,修改其中的window.UEDITOR_HOME_UR配置,如下:

window.UEDITOR_HOME_URL = "/static/UE/";   //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
ueditor.config.js文件有很多配置,可以在这里进行一些初始化的全局配置,比如编辑器的默认宽高等:
,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
,initialFrameHeight:320 //初始化编辑器高度,默认320
其他的参数配置,在该文件中有详细列出,或者参考官方文档 http://fex.baidu.com/ueditor/

将编辑器集成到系统中

打开 /src/main.js 文件,插入下面的代码:

//ueditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

开发公共组件 UE.vue

我们在 /src/components/ 目录下创建 UE.vue文件,作为我们的编辑器组件文件。

下面代码提供简单功能,具体使用根据需求完善该组件即可。

<template>
  <div>
    <script type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'ue',
    data () {
      return {
        editor: null
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      this.editor = window.UE.getEditor('editor', this.config);
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

组件暴露了两个接口:

  • value是编辑器的文字
  • config是编辑器的配置参数

在其他页面中使用该组件

简单地创建一个需要UEditor的页面,再该页面中使用刚才封装好的UE.vue组件:

<template>
  <div>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <button @click="returnContent">显示编辑器内容</el-button>
    <div>{{dat.content}}</div>
  </div>
</template>
<script>
  import Uediter from '@/components/UE.vue';

  export default {
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 800,
            initialFrameHeight: 320
          }
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      }
    },
    components: {
      Uediter
    },
  }
</script>

效果如下:

Vue2.0中集成UEditor富文本编辑器的方法

What's more: 服务端需要做的配置

配置完上述内容后,控制台可能会出现"后台配置项返回格式出错,上传功能将不能正常使用!"的报错,
我们在编辑器中上传图片或者视频,也会出现响应的报错,这是因为没有配置服务器的请求接口,在ueditor.config.js中,对serverUrl进行配置:

// 服务器统一请求接口路径
, serverUrl: 'http://172.16.254.49:83/File/UEditor'  //地址管你们后端要去
Javascript 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
js操作二进制数据方法
Mar 03 #Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 #Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
You might like
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python实现图片彩色转化为素描
2019/01/15 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
25道Java面试题集合
2013/05/21 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
运动会开幕式解说词
2014/02/05 职场文书
高三政治教学反思
2014/02/06 职场文书
商务助理求职信范文
2014/04/20 职场文书
普通党员对照检查材料
2014/08/28 职场文书
运动会加油稿30字
2015/07/21 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
正则表达式拆分url实例代码
2022/02/24 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android