vue2.0项目中使用Ueditor富文本编辑器示例代码


Posted in Javascript onAugust 14, 2017

最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件。

项目地址:https://github.com/suweiteng/vue2-management-platform 

1.放入静态资源并配置

首先把官网下载的Ueditor资源,放入静态资源src/static中。

vue2.0项目中使用Ueditor富文本编辑器示例代码

 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图:

vue2.0项目中使用Ueditor富文本编辑器示例代码

2.引入

在main.js中引入

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'

3.开发公共组件

开发公共组件,可设置填充内容defaultMsg,配置信息config(宽度和高度等),并提供获取内容的方法。

<template>
 <div>
  <script id="editor" type="text/plain"></script>
 </div>
</template>
<script>
 export default {
  name: 'UE',
  data () {
   return {
    editor: null
   }
  },
  props: {
   defaultMsg: {
    type: String
   },
   config: {
    type: Object
   }
  },
  mounted() {
   const _this = this;
   this.editor = UE.getEditor('editor', this.config); // 初始化UE
   this.editor.addListener("ready", function () {
    _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
   });
  },
  methods: {
   getUEContent() { // 获取内容方法
    return this.editor.getContent()
   }
  },
  destroyed() {
   this.editor.destroy();
  }
 }
</script>

4.使用

当我们需要使用富文本编辑器时,直接调用公共组件即可

<template>
 <div class="components-container">
  <div class="info">UE编辑器示例<br>需要使用编辑器时,调用UE公共组件即可。可设置填充内容defaultMsg,配置信息config(宽度和高度等),可调用组件中获取内容的方法。</div>
  <button @click="getUEContent()">获取内容</button>
  <div class="editor-container">
   <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
  </div>
 </div>
</template>
<style>
 .info{
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
 }
</style>
<script>
 import UE from '../../components/ue/ue.vue';
 export default {
  components: {UE},
  data() {
   return {
    defaultMsg: '这里是UE测试',
    config: {
     initialFrameWidth: null,
     initialFrameHeight: 350
    }
   }
  },
  methods: {
   getUEContent() {
    let content = this.$refs.ue.getUEContent();
    this.$notify({
     title: '获取成功,可在控制台查看!',
     message: content,
     type: 'success'
    });
    console.log(content)
   }
  }
 };
</script>

效果如下:

vue2.0项目中使用Ueditor富文本编辑器示例代码

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

Javascript 相关文章推荐
理解JSON:3分钟课程
Oct 28 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
jQuery实现手势解锁密码特效
Aug 14 #jQuery
Vue+Element使用富文本编辑器的示例代码
Aug 14 #Javascript
带你快速理解javascript中的事件模型
Aug 14 #Javascript
JS获取子、父、兄节点方法小结
Aug 14 #Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 #Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 #Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 #Javascript
You might like
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php实现用于计算执行时间的类实例
2015/04/18 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
python返回昨天日期的方法
2015/05/13 Python
python实现梯度下降算法
2020/03/24 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
nginx rewrite功能使用场景分析
2022/05/30 Servers