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 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
使用js画图之饼图
Jan 12 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Python实现二维数组输出为图片
2018/04/03 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
详解Python流程控制语句
2020/10/28 Python
Python self用法详解
2020/11/28 Python
python中最小二乘法详细讲解
2021/02/19 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
团日活动总结报告
2014/06/25 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书