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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
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
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python操作excel让工作自动化
2019/08/09 Python
python实现五子棋程序
2020/04/24 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python如何将字符串转换为日期
2020/07/31 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
老师的检讨书
2014/02/23 职场文书
代领毕业证委托书
2014/08/02 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
小学校园广播稿
2015/08/18 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技