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 25 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP分页类集锦
2014/11/18 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
详解Python的三种可变参数
2019/05/08 Python
python中判断文件结束符的具体方法
2020/08/04 Python
Python如何发送与接收大型数组
2020/08/07 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
简历的自荐信
2013/12/19 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
研究生导师评语
2014/12/31 职场文书
好人好事新闻稿
2015/07/17 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技