vue中如何创建多个ueditor实例教程


Posted in Javascript onNovember 14, 2017

前言

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

具体可以参考这篇文章:https://3water.com/article/118413.htm

ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/

完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html

最近工作中要求升级,需要在vue中创建多个ueditor实例,我使用neditor,其实就是把ueditor样式美化了下,其他和ueditor几乎一样,下面话不多说了,来一起看看详细的介绍吧。

截图

vue中如何创建多个ueditor实例教程

说明

下载ueditor或neditor源码,拷贝到static目录下面

vue中如何创建多个ueditor实例教程

然后修改ueditor.config.js配置文件

vue中如何创建多个ueditor实例教程

在vue项目的main.js添加ueditor引用

vue中如何创建多个ueditor实例教程

新建3个页面 home,tab1,tab2。tab1和tab2是home下面的子页面

vue中如何创建多个ueditor实例教程

在router-view外面一定要添加keep-alive组件和transition组件,不然ueditor实例无法保存

在components文件夹下面新建一个editor作为编辑器的公共组件

在tab1中调用editor,同时要传入一个id并在editor页面接受,注意如果需要多个实例,id一定不能相同

<template>
 <div>
 <editor ref="editor" id="tab1Editor"></editor>
 <button @click="getContent" class="m-t-10">获取内容</button>
 <div>
 <span>当前富文本编辑器内容是: {{content}}</span>
 </div>
 </div>
 </template>

 <script>
 import Editor from '@/components/editor'
 export default {
 name: 'tab1',
 components: { Editor },
 data() {
 return {
 content:''
 }
 },
 methods: {
 //获取内容
 getContent(){
 this.content = this.$refs.editor.content
 }
 }
 }
 </script>

 <style scoped>
 .m-t-10{
 margin-top: 10px;
 }
 </style>

editor页面代码,因为我们在router-view套用了keep-alive,所以ueditor的初始化一定要放在activated里面,
确保每次进入页面都会重新渲染ueditor,在deactivated里面调用ueditor的destroy方法,确保每次离开页面的时候
会销毁编辑器实例,这样就可以渲染多个ueditor实例了,并且每次切换都能保存编辑器的内容。

如果多个tab只需要一个实例请调用reset()方法

<template>
 <div>
 <div :id="this.id"></div>
 </div>
 </template>

 <script>
 export default {
 name: 'editor',
 props: ['id'],
 data() {
 return {
 ue: '', //ueditor实例
 content: '', //编辑器内容
 }
 },
 methods: {
 //初始化编辑器
 initEditor() {
 this.ue = UE.getEditor(this.id, {
 initialFrameWidth: '100%',
 initialFrameHeight: '350',
 scaleEnabled: true
 })
 //编辑器准备就绪后会触发该事件
 this.ue.addListener('ready',()=>{
 //设置可以编辑
 this.ue.setEnabled()
 })
 //编辑器内容修改时
 this.selectionchange()
 },
 //编辑器内容修改时
 selectionchange() {
 this.ue.addListener('selectionchange', () => {
 this.content = this.ue.getContent()
 })
 }
 },
 activated() {
 //初始化编辑器
 this.initEditor()
 },
 deactivated() {
 //销毁编辑器实例,使用textarea代替
 this.ue.destroy()
 //重置编辑器,可用来做多个tab使用同一个编辑器实例
 //如果要使用同一个实例,请注释destroy()方法
 //this.ue.reset()
 }
 }
 </script>

源码地址

github:https://github.com/oblivioussing/vue-ueditor-multi

本地下载:http://xiazai.3water.com/201711/yuanma/vue-ueditor-multi(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 #Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 #Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 #Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 #Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 #Javascript
js实现数组内数据的上移和下移的实例
Nov 14 #Javascript
vue router使用query和params传参的使用和区别
Nov 13 #Javascript
You might like
c#中的实现php中的preg_replace
2009/12/21 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
JQuery基础语法小结
2015/02/27 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python数学形态学实例分析
2019/09/06 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
医院护士的求职信
2014/01/03 职场文书
预备党员表决心书
2014/03/11 职场文书
高一学生评语大全
2014/04/25 职场文书
大学生作弊检讨书
2014/09/11 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
生产设备维护保养制度
2015/08/06 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书