Vue.js结合Ueditor富文本编辑器的实例代码


Posted in Javascript onJuly 11, 2017

在前端开发的项目中。难免会遇到需要在页面上集成一个富文本编辑器。
前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了。

1. 总体思路

1.1 模块化

vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用。所以可以把Ueditor重新封装成一个.vue的模板文件。其他组件通过引入这个模板实现代码复用。

1.2 数据传输

首先父组件需要设置编辑器的长度、宽度、初始文本,这些数据可以通过props来传递。编辑器中的文本变化可以通过vue自定义事件向父组件传递。

2. 具体实现步骤

2.1 引入关键的JS以及CSS文件

将以下文件全部拷贝到项目中

Vue.js结合Ueditor富文本编辑器的实例代码

2.2 配置Ueditor.config.js

首先配置URL参数,我们需要将这个路径指向刚才拷贝的文件的更目录,注意这里最好使用相对路劲。

var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';

然后是默认宽度高度的设置

,initialFrameWidth:null // null表示宽度自动
,initialFrameHeight:320

其他功能的配置可以在官方文档查看

2.3 创建编辑器模板

我们需要在编辑器模板中import Ueditor核心JS库,并添加contentChange回调函数就大功告成了。

之所以使用import语法来引入核心JS库是因为这样更符合ES6模块化的规范,我看到网上有人建议在main.js中引入JS,但是过早地引入JS可能导致页面首次加载缓慢。

<template>
 <div ref="editor"></div>
</template>

<script>
 /* eslint-disable */
 import '../../../assets/js/ueditor/ueditor.config';
 import '../../../assets/js/ueditor/ueditor.all';
 import '../../../assets/js/ueditor/lang/zh-cn/zh-cn';

 import { generateRandonInteger } from '../../../vuex/utils';

 export default {
 data() {
  return {
  id: generateRandonInteger(100000) + 'ueditorId',
  };
 },
 props: {
  value: {
  type: String,
  default: null,
  },
  config: {
  type: Object,
  default: {},
  }
 },
 watch: {
  value: function value(val, oldVal) {
  this.editor = UE.getEditor(this.id, this.config);
  if (val !== null) {
   this.editor.setContent(val);
  }
  },
 },
 mounted() {
  this.$nextTick(function f1() {
  // 保证 this.$el 已经插入文档

  this.$refs.editor.id = this.id;
  this.editor = UE.getEditor(this.id, this.config);

  this.editor.ready(function f2() {
   this.editor.setContent(this.value);

   this.editor.addListener("contentChange", function () {
   const wordCount = this.editor.getContentLength(true);
   const content = this.editor.getContent();
   const plainTxt = this.editor.getPlainTxt();
   this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
   }.bind(this));

   this.$emit('ready', this.editor);
  }.bind(this));
  });
 },
 };
</script>

<style>
 body{
  background-color:#ff0000;
 }
</style>

3. 编辑器的使用

使用编辑器模板的时候我需要通过props传入config以及初始文本value。

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
 <div class="edit-area">
  <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor>
 </div>

</template>

<script>
 import ueditor from './ueditor.vue';

 export default {
 components: {
  ueditor,
 },
 data() {
  return {
  defaultMsg: '初始文本', 
  config: {
   initialFrameWidth: null,
   initialFrameHeight: 320,
  },
  };
 },
 };
</script>

如果需要让Ueditor上传图片的话,还需要在后台配置一个接口。这部分还没有时间研究,等过几天补上

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
Node.js JSON模块用法实例分析
Jan 04 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 #Javascript
JS自定义滚动条效果简单实现代码
Oct 27 #Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
微信小程序分页加载的实例代码
Jul 11 #Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 #Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 #Javascript
underscore之function_动力节点Java学院整理
Jul 11 #Javascript
You might like
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
JS简单计算器实例
2015/01/20 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python tkinter事件高级用法实例
2018/01/31 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python获取代理IP的实例分享
2018/05/07 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python将数组n等分的实例
2019/12/02 Python
Numpy之reshape()使用详解
2019/12/26 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
python基于win32api实现键盘输入
2020/12/09 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
实习教师自我鉴定
2013/12/12 职场文书
大二自我鉴定
2014/01/31 职场文书
2014村务公开实施方案
2014/02/25 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
PHP 时间处理类Carbon
2022/05/20 PHP