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 相关文章推荐
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js制作简易年历完整实例
Jan 28 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
如何在微信小程序中存setStorage
Dec 13 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
一棵php的类树(支持无限分类)
2006/10/09 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
Vue波纹按钮组件制作
2018/04/30 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
甲方资料员岗位职责
2013/12/13 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
宣传委员竞选稿
2015/11/19 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python