百度编辑器的内容改变事件监听bug
先贴上我的初始化代码，可能是用法问题冤枉了百度编辑器，如果是我的用法有问题欢迎大侠们指正
<!DOCTYPE type>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易编辑器</title>
<script type="text/javascript" src="/resources/js/lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/resources/js/user/client/common/ajax-urlconfig.js"></script>
<script type="text/javascript" src="/resources/js/user/client/common/utils.js"></script> <script type="text/javascript" src="/resources/js/lib/md5.js"></script>
<script type="text/javascript" src="/resources/js/user/client/common/init.js"></script>
<script type="text/javascript" src="/resources/js/lib/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="/resources/js/lib/ueditor/editor_config.js"></script> <script type="text/javascript" src="/resources/js/lib/ueditor/lang/zh-cn/zh-cn.js"></script> <link rel="stylesheet" type="text/css" href="/resources/css/basic.css"/>
<link rel="stylesheet" type="text/css" href="/resources/js/lib/ueditor/themes/iframe.css"/>
<link rel="stylesheet" type="text/css" href="/resources/js/lib/ueditor/themes/default/ueditor.css"/>
<link rel="stylesheet" type="text/css" href="/resources/js/lib/ueditor/themes/default/css/ueditor.css"/> <style>
.aaa, .bbb {
margin: 100px;
}
</style>
</head>
<body style="background: #fff;">
<div class="con-textarea width-100pt">
<textarea class="hidden" id="content" name="contentHtml">就要一个框框</textarea>
</div> <input type="button" id="addLinkTest" value="addLinkTest"/>
<input type="button" id="addImgTest" value="addImgTest"/>
<script> $(function () { //初始化百度编辑器 by 小嘉最后修改
var createEditor = function () { var shellId = 'content'; window.UEDITOR_HOME_URL = "/resources/js/lib/ueditor/"; window.UEDITOR_CONFIG.langPath = '/resources/js/lib/ueditor/lang/zh-cn/';
window.UEDITOR_CONFIG.maximumWords = 140;
window.UEDITOR_CONFIG.initialFrameHeight = 120;
window.UEDITOR_CONFIG.initialFrameWidth = 530;
var editor = new UE.ui.Editor();
editor.render(shellId); //'content' 是 teatarea 的 ID ################################ editor.ready(function(){
//alert('fuck ready'+editor.getAllHtml());
$('#' + shellId + ' #edui1_toolbarbox').css('display','none');
editor.fireEvent("contentChange"); var $textarea = $('#' + shellId + '').parent().find('iframe').contents();
//$('#' + shellId + '').parent().find('iframe'); var fn = function(){
alert(editor.getContent());
} if (document.all) {
$textarea.get(0).attachEvent('onpropertychange',function(e) {
fn();
});
}else{
$textarea.on('input',fn);
} }); // var whiteTagList = 'img,a,span,p,strong,em,ul,ol,li';//标签白名单 editor.addListener("beforePaste",function(type,data){
$("body").append("<div id='cleanPaste' style='display:none;'></div>"); $("#cleanPaste").html(data.html); $("#cleanPaste script").remove();
$("#cleanPaste input").remove();
$("#cleanPaste button").remove();
$("#cleanPaste object").remove();
$("#cleanPaste *").removeAttr("class").removeAttr("style").removeAttr("id").removeAttr("width").removeAttr("height");
var aTags = $("#cleanPaste a");
for(var i =0;i<aTags.length; i++){
if($(aTags[i]).attr("href") && $(aTags[i]).attr("href").toLowerCase().indexOf("javascript") == 0 ){
$(aTags[i].attr("href","javascript:;"));
}
}
data.html = $("#cleanPaste").html();
//$("#cleanPaste").remove();
}); //事件
editor.addListener("selectionChange",function(){
//console.log('选取改变');
console.log('选取改变:'+editor.getContent());
}); //事件
editor.addListener("contentChange",function(){
console.log('内容改变:'+editor.getContent());
//var d = editor.getContent();
}); editor.addListener("fullScreenChanged",function(type,mode){
//mode代表当前是否全屏，true代表切换到了全屏模式，false代表切换到了普通模式
console.log('全屏模式：'+mode);
}) return editor;
} var editor = createEditor(); $('#addLinkTest').click(function(){
editor.execCommand("link",{
href: "http://ueditor.baidu.com", //超链地址，必选
data_ue_src: "http://ueditor.baidu.com", //UE内部使用参数，与href保持一致即可，可选
target: "_self", //目标窗口，可选
textValue: "UEditor", //链接显示文本，可选
title: "木仓威武" //标题，可选
}); }); $('#addImgTest').click(function(){ editor.execCommand("insertImage",{
src: "/resources/other/expression/gif/10.gif", //图片链接地址,必选
data_ue_src: "/resources/other/expression/gif/10.gif", //UE内部使用参数，与src保持一致即可，可选
width: 24, //图片显示宽度，可选
height: 24, //图片显示高度，可选
hspace: 5, //图片左右边距，可选
vspace: 2, //图片上下边距，可选
alt: '浮云', //图片替换文字，可选
title: "神马都是浮云" //图片标题，可选
}); });
});
//init.invokeAll();
</script> </body>
</html>
提供的事件监听是这样的：
//事件
editor.addListener("contentChange",function(){
console.log('内容改变:'+editor.getContent());
});
一般的字符都可以监听，但是@#￥%……这些字符的输入是监听不到的。实现原理应该是监听的键盘事件，百度的牛人们呀，你们难道不知道对于这些特殊字符是监听键盘的keypress和keyup是监听不到的吗....
好吧那字能自己解决了。
最挫的办法就是时钟监听了，每隔几十毫秒获取一下编辑框中的内容，与之前内容比较一下，变了就触发改变事件。但是这不是理想的方案呀...
有没有好的实现方案呢，有了！想到之前看过的一个实时统计字数的小东西
什么字符都支持，好研究一下，核心到吗如下
var $textarea = $('#' + shellId + '');
var fn = function(){
alert(editor.getContent());
}
if (document.all) {
$textarea.get(0).attachEvent('onpropertychange',function(e) {
fn();
});
}else{
$textarea.on('input',fn);
}
好，我们也这么玩。
但是问题来了，iframe是可编辑元素吗？支持上面的监听事件吗？
万能的网友给了我答案，能！
果断实现，结果如下：
editor.ready(function(){
$('#' + shellId + ' #edui1_toolbarbox').css('display','none');
editor.fireEvent("contentChange");
var $textarea = $('#' + shellId + '').parent().find('iframe').contents();
var fn = function(){
alert(editor.getContent());
}
if (document.all) {
$textarea.get(0).attachEvent('onpropertychange',function(e) {
fn();
});
}else{
$textarea.on('input',fn);
}
});
百度编辑器的内容改变事件监听bug的更多相关文章
- 事件监听机制——列出指定目录内容、添加Dialog对话框
事件监听机制理解与Dialog练习 利用Java语言,仿照我的电脑目录进行打开目录,输入文件路径,查看该路径下所有的文件,设置两个文本框,一个转到按钮,当点击转到按钮时,查看路径是否正确,若正确在第二 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- java 事件监听 - 键盘
java 事件监听 - 键盘 //事件监听 //键盘事件监听,写了一个小案例,按上下左右,改变圆形的位置,圆形可以移动 import java.awt.*; import javax.swing.*; ...
- Android软键盘的隐藏显示、事件监听的代码
把开发过程中重要的一些内容片段做个珍藏,如下资料是关于Android软键盘的隐藏显示.事件监听的内容,应该是对小伙伴们有所用途. public class ResizeLayout extends L ...
- JavaScript事件监听以及addEventListener参数分析
事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- Zookeeper Curator 事件监听 - 秒懂
目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...
- HTML5 storage事件监听
引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage st ...
- Spring的事件监听机制
最近公司在重构广告系统,其中核心的打包功能由广告系统调用,即对apk打包的调用和打包完成之后的回调,需要提供相应的接口给广告系统.因此,为了将apk打包的核心流程和对接广告系统的业务解耦,利用了spr ...
随机推荐
- IdentityServer4 登录成功后，跳转到原来页面
IdentityServer4 登录成功后,默认会跳转到Config.Client配置的RedirectUris地址http://localhost:5003/callback.html,用于获取 T ...
- 一键生成koa/koa2项目：
一键生成koa/koa2项目: 1. npm install -g koa-generator 2.新建项目目录 koa mytest (koa1项目) koa2 koa2test (koa2项目) ...
- mac链接linux终端，shell脚本发布代码
项目的业务需求:从mac端直接连上linux服务终端,并发布相关的代码 一.使用ssh链接上linux服务端 1.cd ~/.ssh 2.vi config,按照下面的内容配置config文件,然后: ...
- w3wp.exe已附加有调试器，但没有该调试器配置为调试此未经处理的异常，若要调试此异常，必须分离当前的调试器。
之前通过使用VS2010附加进程调试项目后,今天开机发现调试本机的项目报错如下图: 到网上到处查看无果,经过反复实验找到解决方法,我的项目是发布到IIS的 1.首先删除IIS上面的项目 2.在VS右击 ...
- SSM框架搭建（Spring+SpringMVC+MyBatis）与easyui集成并实现增删改查实现
一.用myEclipse初始化Web项目 新建一个web project: 二.创建包 controller //控制类 service //服务接口 service.impl //服务 ...
- 【开源】canvas图像裁剪、压缩、旋转
前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...
- Oracle.DataAccess.Client.OracleCommand”的类型初始值设定项引发异常。
Oracle.DataAccess.Client.OracleCommand”的类型初始值设定项引发异常. 64位系统下,部署32位odp.net,出现问题.解决方法:卸载32位xcopy odt.n ...
- 修改 Sublime 按快捷键 ctrl+s 自动格式化(reindent lines)的问题
Sublime 工具自带代码格式化的功能,但在某些场景下格式化代码后并不是我们想要的代码格式,且是点击保存ctrl+s才触发的格式代码事件,so,为关闭点击ctrl+s格式代码,我们需要改命令 sav ...
- [转载] OAuth2.0认证和授权原理
转载自http://www.tuicool.com/articles/qqeuE3 什么是OAuth授权? 一.什么是OAuth协议 OAuth(开放授权)是一个开放标准,允许第三方网站在用户授权的前 ...
- 自动化部署必备技能—部署yum仓库、定制rpm包
部署yum仓库.定制rpm包 目录 第1章 扩展 - yum缓存 1.1 yum缓存使用步骤... 1 1.1.1 导言... 1 1.1.2 修改配置文件... 1 1.1.3 使用缓存... 1 ...