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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
微信小程序云开发实现云数据库读写权限
May 17 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript修改css样式style
2008/04/15 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
python绘制直线的方法
2018/06/30 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
vscode调试django项目的方法
2020/08/06 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
银行实习鉴定
2013/12/13 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
电影圆明园观后感
2015/06/03 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技