实时监测contenteditable(可编辑文档)的内容发生改变

如果是文本框用onchange,oninput,onpropertychange都可以实时监控值发生变化,但是div设置了属性contenteditable(可编辑文档)就不管用了。

最简单的方法用oninput事件,可惜ie下支持度不好

addEvent(doc,‘input‘,function(){
    //do something...
});

那么自己实现一个:

var oldValue = context.getSource(), newValue;

[‘blur‘,‘keyup‘,‘mouseup‘].forEach(function(type){
    addEvent(doc,type,function(){
             newValue = context.getSource();
            if(oldValue != newValue){
                //do something...
                oldValue = newValue;
            }
        });
});

JQ实现:

(function ($) {
 $.fn.wysiwygEvt = function () {
  return this.each(function () {
   var $this = $(this);
   var htmlold = $this.html();
   $this.bind(‘blur keyup paste copy cut mouseup‘, function () {
    var htmlnew = $this.html();
    if (htmlold !== htmlnew) {
     $this.trigger(‘change‘)
    }
   })
  })
 }
})(jQuery);

//调用:$(‘.wysiwyg‘).wysiwygEvt();
时间: 2024-08-01 22:44:53

实时监测contenteditable(可编辑文档)的内容发生改变的相关文章

NET中weboffice组件在线编辑文档并保存到服务器上

页面中组件的引用以及控件触发事件: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="9" background="images/tab_12.gif"> <asp:Button ID="btnuploadsave"

PDF格式文档的内容如何编辑

对于经常处理各种文档的会遇到很多不同格式的文档文件,除了office.txt等文档外,PDF这种格式的文档也是经常会遇到的,有些PDF文件是可以进行编辑的,但编辑文字没有word编辑起来方便,而且需要编辑工具来编辑,PDF的阅读工具是不能对文档内容进行编辑的,那么到底怎么编辑的呢? 先装好PDF的编辑工具,然后用PDF编辑工具来打开需要处理的PDF文档,在编辑工具的编辑区域就可以对文档的内容进行编辑修改了,需要切换页面的话直接在左侧选择对应的缩略图就可以了. 编辑的时候可以按住Ctrl+鼠标滚轮

织梦图集模型编辑文档checkbox多选字段失效逗号,被过滤问题

织梦图集模型编辑文档checkbox多选字段失效,还有tag标签的逗号,被过滤问题的解决方法 打开 include/helpers/filter.helper.php 找到 '/([\x00-\x08,\x0b-\x0c,\x0e-\x19])/' 改成 '/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]+/S' 图集模型添加自定义字段checkbox数据类型,重新编辑时,勾选的多选全部没了. 打开/dede/album_edit.php 搜索 $arcRow=XSSClean

Office 365 小技巧 :Microsoft Teams_ 就地编辑文档

Blog 地址:https://blog.51cto.com/13969817 Microsoft Teams 最大的特性是可以加强团队之间的协作能力,团队可以在同一个地方进行沟通和协作,并且与Microsoft Office深度集成,与团队成员进行文档共享,多人协同编辑,团队的工作方式发生了改变,工作效率得到了提升. 但很多企业在推广Teams的时候,终端用户都需要一个转型的过程,他们希望分享的文档可以就地编辑,保留传统的编辑模式,而非在线编辑,这种情况下,我们该如何满足用户的需求呢? 今天我

将Word文档发给别人时如何限制别人只能修改文档部分内容

将Word文档发给别人时如何限制别人只能修改文档部分内容 转自:互联网.时间:2014-04-16   作者:snow   来源:互联网 在很多情况下我们都不希望别人修改我们的文档内容,特别实在将Word文档发给别人时,我们只希望别人能够在word文档中填写该填的地方,不该填写的地方只能看,不能修改.整个文档完成后就向填空题一样,只能在里面填入相关的内容,不能更改和编辑其他部分.想实现这样的功能并非难事,只需对文档中的部分内容设置保护即可,同样如果内容不需要保护,只需解除即可.  一.设置保护的

C# 给Word文档添加内容控件

C# 给Word文档添加内容控件 在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word文档.下面就来看看如何使用C#给word文档添加组合框.文本.图片.日期选取器及下拉列表等内容控件(这里我借助了一个word组件Spire.Doc). 添加组合框内容控件 组合框用于显示用户可以选择的项目列表.和下拉列表不同的是组合框允许用户编辑或添加项. //给段落添加一个内容控件并指定它的SDT

linux 编辑文档

本篇主要分享下vi 命令行的操作: vi  /etc/sysconfig/iptabels 首先我们需要理解putty客户端的复制 粘贴 插入文档  退出等命令 复制:指在putty客户端中的选择复制.按住鼠标左键选择你需要复制的命令,单击一下即是复制了命令行,鼠标在继续右键一下即表示粘贴到了下一行. 粘贴:即如何粘贴网页上的命令到putty客户端.鼠标选择你需求的网页上的命令行文字复制,点击putty软件,鼠标在putty软件里右键一下即可从网页端输入到putty客户端,然后我们回车即可打开.

Unity3d 游戏中的实时降噪-对Square Enix文档的研究与实现

看到SE的技术文档关于降噪的决定研究一下,本次试验场景: 文章中提到了3中主要滤波方法,最后一种方法又有三种方式分别为Conventional geometry-aware ?ltering,Distribution-Aware Filtering,Specular Lobe-Aware Filtering and Upsampling根据公式做了一些,自己弄得除噪方法不知道是否正确,虽然有效果=  =: 博主的步骤:1.    找出噪波(包括噪波与贴图上的细节)2.    算出specular

如何在 Windows 上 使用 ONLYOFFICE 协作编辑文档

0.安装准备 如果是局域网,部署的电脑拥有固定ip(下文叫宿主机,切记).电脑能打开cup的虚拟功能.如果部署到云主机,道理是一样的. 环境是win7以上,win10以下.Win10区别就是安装的docker软件不同而已. 第一步:确定电脑打开了cpu虚拟打开.https://jingyan.baidu.com/article/22fe7ced3b4c003002617f17.html 第二步:下载和安装docker toolbox,默认安装即可.下载地址http://get.daocloud.