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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
如何使用less实现随机下雪动画详解
Jan 02 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
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php广告加载类用法实例
2014/09/23 PHP
JavaScript 继承的实现
2009/07/09 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
layui中table表头样式修改方法
2018/08/15 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python实用代码片段收集贴
2015/06/03 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python中方法链的使用方法
2016/02/23 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python中的测试框架
2020/11/13 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
员工工作表扬信范文
2014/01/13 职场文书
学校花圃的标语
2014/06/18 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
JUnit5常用注解的使用
2021/07/02 Java/Android