vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题
1、如何设置config中的内容
readonly:true,//只读模式
wordCount:false,//是否开启字数统计
enableAutoSave: false,//自动保存功能 重点:enableAutoSave不一定生效,怎么办?
ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。
//启用自动保存
,enableAutoSave: false
ueditor1.4.3版本是没有效果的,需要修改代码,在ueditor1.5.0版本已经得到修复。
修改方法
ueditor.all.js文件
找到
// plugins/autosave.js
UE.plugin.register('autosave', function (){
var me = this,
//无限循环保护
lastSaveTime = new Date(),
//最小保存间隔时间
MIN_TIME = 20,
//auto save key
saveKey = null;
function save ( editor ) {
var saveData;
if ( new Date() – lastSaveTime < MIN_TIME ) {
return;
}
if ( !editor.hasContents() ) {
//这里不能调用命令来删除, 会造成事件死循环
saveKey && me.removePreferences( saveKey );
return;
}
lastSaveTime = new Date();
editor._saveFlag = null;
saveData = me.body.innerHTML;
if ( editor.fireEvent( "beforeautosave", {
content: saveData
} ) === false ) {
return;
}
me.setPreferences( saveKey, saveData );
editor.fireEvent( "afterautosave", {
content: saveData
} );
}
return {
defaultOptions: {
//默认间隔时间
saveInterval: 500
},
bindEvents:{
'ready':function(){
var _suffix = "-drafts-data",
key = null;
if ( me.key ) {
key = me.key + _suffix;
} else {
key = ( me.container.parentNode.id || 'ue-common' ) + _suffix;
}
//页面地址+编辑器ID 保持唯一
saveKey = ( location.protocol + location.host + location.pathname ).replace( /[.:\/]/g, '_' ) + key;
},
'contentchange': function () {
//新增加的代码
if (!me.getOpt('enableAutoSave')) {
return;
}
if ( !saveKey ) {
return;
}
if ( me._saveFlag ) {
window.clearTimeout( me._saveFlag );
}
if ( me.options.saveInterval > 0 ) {
me._saveFlag = window.setTimeout( function () {
save( me );
}, me.options.saveInterval );
} else {
save(me);
}
}
},
commands:{
'clearlocaldata':{
execCommand:function (cmd, name) {
if ( saveKey && me.getPreferences( saveKey ) ) {
me.removePreferences( saveKey )
}
},
notNeedUndo: true,
ignoreContentChange:true
},
'getlocaldata':{
execCommand:function (cmd, name) {
return saveKey ? me.getPreferences( saveKey ) || '' : '';
},
notNeedUndo: true,
ignoreContentChange:true
},
'drafts':{
execCommand:function (cmd, name) {
if ( saveKey ) {
me.body.innerHTML = me.getPreferences( saveKey ) || '<p>'+domUtils.fillHtml+'</p>';
me.focus(true);
}
},
queryCommandState: function () {
return saveKey ? ( me.getPreferences( saveKey ) === null ? -1 : 0 ) : -1;
},
notNeedUndo: true,
ignoreContentChange:true
}
}
}
});
以下是新增加的代码
if (!me.getOpt('enableAutoSave')) {
return;
}
ueditor1.4.3版本自动保存关闭不了
https://github.com/fex-team/ueditor/issues/470
已在1.5.0分支修改
https://github.com/fex-team/ueditor/blob/dev-1.5.0/_src/plugins/autosave.js#L71-73
vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题的更多相关文章
- WEB项目中使用UEditor(富文本编辑器)
Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文 ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- vue2.0项目中使用Ueditor富文本编辑器示例
最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 在线预览:https://suweiteng.github.io/vue2-management-platform ...
- ASP.NET MVC 中使用 UEditor 富文本编辑器
在上篇<使用ASP.NET MVC+Entity Framework快速搭建博客系统>中,已经基本上可以实现博客分类和博客文章的CURD.但是,文章编辑界面实在是…… 好吧,咱得搞专业点. ...
- 在网站中使用UEditor富文本编辑器
UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点. 官网链接 进入到下载页面,选择相应的版本下载 这里我们使用ASP.NET开发,所以选择 ...
- Vue 中使用UEditor富文本编辑器-亲测可用-vue-ueditor-wrap
其中UEditor中也存在不少错误,再引用过程中. 但是UEditor相对还是比较好用的一个富文本编辑器. vue-ueditor-wrap说明 Vue + UEditor + v-model 双向绑 ...
- 在Vue2.0中集成UEditor 富文本编辑器
在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很 ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
随机推荐
- Django基础(二)
Django基础(二) http://www.cnblogs.com/wupeiqi/articles/4508271.html
- Mysql [Err] 1118 - Row size too large
首先声明,对MySQL不懂,很多都不知道原因 设计了一个表,里面很多text字段,然后填进去的东西太多(用的是Python的MySQLdb),报错: _mysql_exceptions.Operati ...
- Perl PPM安装模块
介绍一下如何使用PPM(Perl Package Manager)安装模块(必须安装了ActivePerl).打开PPM,我们看到的界面是这样的: 我们看到第二行是工具栏,从左到右,第一个是查看仓 ...
- Network-Flow
//Created by pritry int graph[MAX][MAX]; //原图 int source; //起点,这里为0 int sink; //终点,这里为n-1 int e[MAX] ...
- cent OS官网上下载老版本系统镜像的正确打开方式
当时的情况是这样的: 客户需要给服务器安装cent OS 7.3操作系统,我打开官网https://www.centos.org/,点击“GET CENTOS”——>“Minimal ISO”, ...
- C#学习笔记_06_方法&函数
06_方法&函数 方法的定义 方法就是一个功能的集合,可以把程序中某段具有特殊功能的代码提取出来: 声明方法 [ 访问权限修饰符 ] [ 其他的修饰符 ] 返回值类型 方法名 ( [形参列表] ...
- base64模块 简单了解
base64,字符串文本编码解码,方便数据进行传输 import base64 '''编码解码''' st = 'ni hao'.encode('utf8') result = base64.b64e ...
- 【ACM】poj_2356_Find a multiple_201308061947
Find a multipleTime Limit: 1000MS Memory Limit: 65536K Total Submissions: 4988 Accepted: 2159 Spe ...
- Win8下建立shortcut到開始界面
在win8前建立開始菜单都非常easy,但到win8就有点不一样了.它的開始菜单是metro风格的.以下我们来看下详细的实现代码.有兴趣的朋友能够自己測试下,它的作用是设置shortcut到metro ...
- Aizu/Aoj 0121 Seven Puzzle
这题应该算是经典的八数码问题的弱化版吧:给你一个4x2的方版,上面有0-7 八个数字,每次只能让编号0的方格跟他的上下左右的方格交换:所以也就是把方格0当做空格看待,每次只有空格周围的方格能够向空格处 ...