Html 编辑器粘贴内容过滤技术详解
程序员文章站
2022-06-23 21:51:59
作者:tony qu 最近在解决数据粘贴方面取得了不少进展,作为html在线编辑器所必须具备的技术,在这里详细给大家介绍并提供实现参考。在研究过程中,我也确实走了不少弯路,...
作者:tony qu
最近在解决数据粘贴方面取得了不少进展,作为html在线编辑器所必须具备的技术,在这里详细给大家介绍并提供实现参考。在研究过程中,我也确实走了不少弯路,尝试了n种方式,由于美国的pm始终觉得有些影响用户体验的东西无法接受,导致好几个提案被否定,不过收获还是很丰富的。
我现在写code喜欢需求驱动,让我们来看看这项技术的主要需求
* 能够过滤用户贴进来的纯文本数据
* 能够过滤用户贴进来的html数据(未经html编码)
* 能够过滤用户贴进来的word数据,并能把大部分word格式保留下来。
* 在这一过程中尽量不要让用户知道我们在做过滤
* 不要去提示用户是否启用某种权限
本例所适用的场景为使用iframe实现的html编辑器,而不是文本框(textarea或type为text的input)。
在研究过程中,我主要参考了tinymce、ckeditor,但最后我还是选择了tinymce的实现方法,具体原因在你看完下面这段文字后就会明白。
ckeditor的实现方式是在onpaste事件触发时,从剪贴板取出数据,处理取出的文本,然后再把处理好的文本存入剪贴板。有人说,那我能不能在onpaste中直接取消paste动作,然后自己把获得的内容放入iframe当中去,我当时就干过这事,但结果却出人意料,直接从剪贴板拿出的数据是不包括格式信息的文本,特别是从word粘贴过来的数据,纯文本,颜色、布局等数据都不存在,这样的话,你的用户只能粘贴没有格式的数据过来,然后自己重新在html编辑器里面编辑。但是如果让浏览器自己去做粘贴,格式信息都会保留,浏览器会自动把word的粘贴数据转换为xml数据,放入dom中。所以为了保留格式信息,我们恐怕只能通过浏览器的标准粘贴行为的帮助实现这一点。
另外ckeditor的实现在firefox中有一个致命的弱点,如果你要从剪贴板读写数据,你就必须提示用户自己去设置一个叫signed.applets.codebase_principal_support的权限,javascript脚本是没有权限去设置的,虽然从技术人员来看这是很正常的,但是很多产品经理无法接受这一点,至少我的产品经理是这么认为的。
以下是ckeditor获取和设置剪贴板的代码,供大家参考。
function setclipboard(maintext) {
if (window.clipboarddata) {
return (window.clipboarddata.setdata("text", maintext));
}
else if (window.netscape) {
netscape.security.privilegemanager.enableprivilege('universalxpconnect');
var clip = components.classes['@mozilla.org/widget/clipboard;1'].createinstance(components.interfaces.nsiclipboard);
if (!clip) return;
var trans = components.classes['@mozilla.org/widget/transferable;1'].createinstance(components.interfaces.nsitransferable);
if (!trans) return;
trans.adddataflavor('text/unicode');
var str = new object();
var len = new object();
var str = components.classes["@mozilla.org/supports-string;1"].createinstance(components.interfaces.nsisupportsstring);
var copytext=maintext;
str.data=copytext;
trans.settransferdata("text/unicode",str,copytext.length*2);
var clipid=components.interfaces.nsiclipboard;
if (!clip) return false;
clip.setdata(trans,null,clipid.kglobalclipboard);
return true;
}
return false;
}
function getclipboard() {
if (window.clipboarddata) {
return(window.clipboarddata.getdata('text'));
}
else if (window.netscape) {
netscape.security.privilegemanager.enableprivilege('universalxpconnect');
var clip = components.classes['@mozilla.org/widget/clipboard;1'].createinstance(components.interfaces.nsiclipboard);
if (!clip) return;
var trans = components.classes['@mozilla.org/widget/transferable;1'].createinstance(components.interfaces.nsitransferable);
if (!trans) return;
trans.adddataflavor('text/unicode');
clip.getdata(trans,clip.kglobalclipboard);
var str = new object();
var len = new object();
try {
trans.gettransferdata('text/unicode',str,len);
}
catch(error) {
return null;
}
if (str) {
if (components.interfaces.nsisupportswstring) str=str.value.queryinterface(components.interfaces.nsisupportswstring);
else if (components.interfaces.nsisupportsstring) str=str.value.queryinterface(components.interfaces.nsisupportsstring);
else str = null;
}
if (str) {
return(str.data.substring(0,len.value / 2));
}
}
return null;
}
以下是提示用户启用权限的代码
if (window.netscape)
{
try
{
netscape.security.privilegemanager.enableprivilege("universalxpconnect");
}
catch (ex)
{
alert("if you want to do paste, please input 'about:config' in address bar, then input enter.\n set \"signed.applets.codebase_principal_support\" to \"true\"");
}
}
于是我参考了tinymce的实现方式,我在看它的代码的时候特别留意到它尽然不需要权限就能在firefox下面搞定粘贴,并且还能保留word格式,于是就仔细阅读了其中的代码。tinymce的实现步骤在ie和firefox下面是不同的:
ie实现
1. 在onpaste回调函数中创建一个临时的iframe,用于粘贴内容,这个iframe放在主窗口的body下面即可。
2. 在当前光标位置创建一个range,用来保存光标位置和选中信息。
3. 让临时iframe获得焦点,执行粘贴命令,即document.execcommand(“paste”),内容会粘贴在临时的iframe中
4. 通过innerhtml获得临时iframe中的内容并进行过滤
5. 让html编辑器的iframe获得焦点,用之前创建的range对象执行pastehtml方法来粘贴过滤后的内容
6. 最后取消默认的paste动作
(临时iframe可以根据个人喜好从dom中删除,但由于这个iframe可以在多个htmleditor之间共用,所以我的实现中仅仅改变了iframe的left, top来调整iframe的位置,而不是移除它,调整left和top的目的在于焦点移到临时iframe的时候如果html编辑器的iframe和临时iframe不在一个视图之内,屏幕会滚动,这样会导致屏幕没有原因的闪烁。)
firefox实现
1. 在onpaste回调函数中创建一个临时的div,这个div放在html编辑器的iframe里面,这也是绕过权限问题的关键。
2. 保存当前光标和焦点位置,然后将光标移到临时创建的div中
3. 通过window.settimeout设置一个回调函数在paste动作瞬间完成之后执行
4. 让paste动作执行(onpaste回调函数执行完毕)
5. 刚才设置的回调函数执行,在里面获得临时div的innerhtml并进行过滤
6. 恢复刚才保存的光标和焦点位置,并移除临时div
7. 通过inserthtml命令(execcommand(“inserthtml”))把过滤后的内容贴到html编辑器的iframe中。
详细代码如下:
function getsel(w)
{
return w.getselection ? w.getselection() : w.document.selection;
}
function setrange(sel,r)
{
sel.removeallranges();
sel.addrange(r);
}
function filterpastedata(originaltext)
{
var newtext=originaltext;
//do something to filter unnecessary data
return newtext;
}
function block(e)
{
e.preventdefault();
}
var w,or,divtemp,origintext;
var newdata;
function pasteclipboarddata(editorid,e)
{
var objeditor = document.getelementbyid(editorid);
var eddoc=objeditor.contentwindow.document;
if(isie)
{
var orrange=objeditor.contentwindow.document.selection.createrange();
var ifmtemp=document.getelementbyid("ifmtemp");
if(!ifmtemp)
{
ifmtemp=document.createelement("iframe");
ifmtemp.id="ifmtemp";
ifmtemp.style.width="1px";
ifmtemp.style.height="1px";
ifmtemp.style.position="absolute";
ifmtemp.style.border="none";
ifmtemp.style.left="-10000px";
ifmtemp.src="iframeblankpage.html";
document.body.appendchild(ifmtemp);
ifmtemp.contentwindow.document.designmode = "on";
ifmtemp.contentwindow.document.open();
ifmtemp.contentwindow.document.write("<body></body>");
ifmtemp.contentwindow.document.close();
}else
{
ifmtemp.contentwindow.document.body.innerhtml="";
}
origintext=objeditor.contentwindow.document.body.innertext;
ifmtemp.contentwindow.focus();
ifmtemp.contentwindow.document.execcommand("paste",false,null);
objeditor.contentwindow.focus();
newdata=ifmtemp.contentwindow.document.body.innerhtml;
//filter the pasted data
newdata=filterpastedata(newdata);
ifmtemp.contentwindow.document.body.innerhtml=newdata;
//paste the data into the editor
orrange.pastehtml(newdata);
//block default paste
if(e)
{
e.returnvalue = false;
if(e.preventdefault)
e.preventdefault();
}
return false;
}else
{
enablekeydown=false;
//create the temporary html editor
var divtemp=eddoc.createelement("div");
divtemp.id='htmleditor_tempdiv';
divtemp.innerhtml='\ufeff';
divtemp.style.left="-10000px"; //hide the div
divtemp.style.height="1px";
divtemp.style.width="1px";
divtemp.style.position="absolute";
divtemp.style.overflow="hidden";
eddoc.body.appendchild(divtemp);
//disable keyup,keypress, mousedown and keydown
objeditor.contentwindow.document.addeventlistener("mousedown",block,false);
objeditor.contentwindow.document.addeventlistener("keydown",block,false);
enablekeydown=false;
//get current selection;
w=objeditor.contentwindow;
or=getsel(w).getrangeat(0);
//move the cursor to into the div
var docbody=divtemp.firstchild;
rng = eddoc.createrange();
rng.setstart(docbody, 0);
rng.setend(docbody, 1);
setrange(getsel(w),rng);
origintext=objeditor.contentwindow.document.body.textcontent;
if(origintext==='\ufeff')
{
origintext="";
}
window.settimeout(function()
{
//get and filter the data after onpaste is done
if(divtemp.innerhtml==='\ufeff')
{
newdata="";
eddoc.body.removechild(divtemp);
return;
}
newdata=divtemp.innerhtml;
// restore the old selection
if (or)
{
setrange(getsel(w),or);
}
newdata=filterpastedata(newdata);
divtemp.innerhtml=newdata;
//paste the new data to the editor
objeditor.contentwindow.document.execcommand('inserthtml', false, newdata );
eddoc.body.removechild(divtemp);
},0);
//enable keydown,keyup,keypress, mousedown;
enablekeydown=true;
objeditor.contentwindow.document.removeeventlistener("mousedown",block,false);
objeditor.contentwindow.document.removeeventlistener("keydown",block,false);
return true;
}
}
这里的pasteclipboarddata是用做onpaste回调函数的,要使用它的话,可以通过下面的代码把它加到html编辑器的iframe的onpaste事件上。
var ifrm=document.getelementbyid("editor")
if(isie)
{
ifrm.contentwindow.document.documentelement.attachevent("onpaste", function(e){return pasteclipboarddata(ifrm.id,e);});
}
else
{
ifrm.contentwindow.document.addeventlistener("paste", function(e){return pasteclipboarddata(ifrm.id,e);},false);
}
这里的filterpastedata函数就是我们专门用来做过滤的函数,具体要怎么去过滤纯文本、html及word数据将在下一篇讲解。
最近在解决数据粘贴方面取得了不少进展,作为html在线编辑器所必须具备的技术,在这里详细给大家介绍并提供实现参考。在研究过程中,我也确实走了不少弯路,尝试了n种方式,由于美国的pm始终觉得有些影响用户体验的东西无法接受,导致好几个提案被否定,不过收获还是很丰富的。
我现在写code喜欢需求驱动,让我们来看看这项技术的主要需求
* 能够过滤用户贴进来的纯文本数据
* 能够过滤用户贴进来的html数据(未经html编码)
* 能够过滤用户贴进来的word数据,并能把大部分word格式保留下来。
* 在这一过程中尽量不要让用户知道我们在做过滤
* 不要去提示用户是否启用某种权限
本例所适用的场景为使用iframe实现的html编辑器,而不是文本框(textarea或type为text的input)。
在研究过程中,我主要参考了tinymce、ckeditor,但最后我还是选择了tinymce的实现方法,具体原因在你看完下面这段文字后就会明白。
ckeditor的实现方式是在onpaste事件触发时,从剪贴板取出数据,处理取出的文本,然后再把处理好的文本存入剪贴板。有人说,那我能不能在onpaste中直接取消paste动作,然后自己把获得的内容放入iframe当中去,我当时就干过这事,但结果却出人意料,直接从剪贴板拿出的数据是不包括格式信息的文本,特别是从word粘贴过来的数据,纯文本,颜色、布局等数据都不存在,这样的话,你的用户只能粘贴没有格式的数据过来,然后自己重新在html编辑器里面编辑。但是如果让浏览器自己去做粘贴,格式信息都会保留,浏览器会自动把word的粘贴数据转换为xml数据,放入dom中。所以为了保留格式信息,我们恐怕只能通过浏览器的标准粘贴行为的帮助实现这一点。
另外ckeditor的实现在firefox中有一个致命的弱点,如果你要从剪贴板读写数据,你就必须提示用户自己去设置一个叫signed.applets.codebase_principal_support的权限,javascript脚本是没有权限去设置的,虽然从技术人员来看这是很正常的,但是很多产品经理无法接受这一点,至少我的产品经理是这么认为的。
以下是ckeditor获取和设置剪贴板的代码,供大家参考。
复制代码 代码如下:
function setclipboard(maintext) {
if (window.clipboarddata) {
return (window.clipboarddata.setdata("text", maintext));
}
else if (window.netscape) {
netscape.security.privilegemanager.enableprivilege('universalxpconnect');
var clip = components.classes['@mozilla.org/widget/clipboard;1'].createinstance(components.interfaces.nsiclipboard);
if (!clip) return;
var trans = components.classes['@mozilla.org/widget/transferable;1'].createinstance(components.interfaces.nsitransferable);
if (!trans) return;
trans.adddataflavor('text/unicode');
var str = new object();
var len = new object();
var str = components.classes["@mozilla.org/supports-string;1"].createinstance(components.interfaces.nsisupportsstring);
var copytext=maintext;
str.data=copytext;
trans.settransferdata("text/unicode",str,copytext.length*2);
var clipid=components.interfaces.nsiclipboard;
if (!clip) return false;
clip.setdata(trans,null,clipid.kglobalclipboard);
return true;
}
return false;
}
function getclipboard() {
if (window.clipboarddata) {
return(window.clipboarddata.getdata('text'));
}
else if (window.netscape) {
netscape.security.privilegemanager.enableprivilege('universalxpconnect');
var clip = components.classes['@mozilla.org/widget/clipboard;1'].createinstance(components.interfaces.nsiclipboard);
if (!clip) return;
var trans = components.classes['@mozilla.org/widget/transferable;1'].createinstance(components.interfaces.nsitransferable);
if (!trans) return;
trans.adddataflavor('text/unicode');
clip.getdata(trans,clip.kglobalclipboard);
var str = new object();
var len = new object();
try {
trans.gettransferdata('text/unicode',str,len);
}
catch(error) {
return null;
}
if (str) {
if (components.interfaces.nsisupportswstring) str=str.value.queryinterface(components.interfaces.nsisupportswstring);
else if (components.interfaces.nsisupportsstring) str=str.value.queryinterface(components.interfaces.nsisupportsstring);
else str = null;
}
if (str) {
return(str.data.substring(0,len.value / 2));
}
}
return null;
}
以下是提示用户启用权限的代码
复制代码 代码如下:
if (window.netscape)
{
try
{
netscape.security.privilegemanager.enableprivilege("universalxpconnect");
}
catch (ex)
{
alert("if you want to do paste, please input 'about:config' in address bar, then input enter.\n set \"signed.applets.codebase_principal_support\" to \"true\"");
}
}
于是我参考了tinymce的实现方式,我在看它的代码的时候特别留意到它尽然不需要权限就能在firefox下面搞定粘贴,并且还能保留word格式,于是就仔细阅读了其中的代码。tinymce的实现步骤在ie和firefox下面是不同的:
ie实现
1. 在onpaste回调函数中创建一个临时的iframe,用于粘贴内容,这个iframe放在主窗口的body下面即可。
2. 在当前光标位置创建一个range,用来保存光标位置和选中信息。
3. 让临时iframe获得焦点,执行粘贴命令,即document.execcommand(“paste”),内容会粘贴在临时的iframe中
4. 通过innerhtml获得临时iframe中的内容并进行过滤
5. 让html编辑器的iframe获得焦点,用之前创建的range对象执行pastehtml方法来粘贴过滤后的内容
6. 最后取消默认的paste动作
(临时iframe可以根据个人喜好从dom中删除,但由于这个iframe可以在多个htmleditor之间共用,所以我的实现中仅仅改变了iframe的left, top来调整iframe的位置,而不是移除它,调整left和top的目的在于焦点移到临时iframe的时候如果html编辑器的iframe和临时iframe不在一个视图之内,屏幕会滚动,这样会导致屏幕没有原因的闪烁。)
firefox实现
1. 在onpaste回调函数中创建一个临时的div,这个div放在html编辑器的iframe里面,这也是绕过权限问题的关键。
2. 保存当前光标和焦点位置,然后将光标移到临时创建的div中
3. 通过window.settimeout设置一个回调函数在paste动作瞬间完成之后执行
4. 让paste动作执行(onpaste回调函数执行完毕)
5. 刚才设置的回调函数执行,在里面获得临时div的innerhtml并进行过滤
6. 恢复刚才保存的光标和焦点位置,并移除临时div
7. 通过inserthtml命令(execcommand(“inserthtml”))把过滤后的内容贴到html编辑器的iframe中。
详细代码如下:
复制代码 代码如下:
function getsel(w)
{
return w.getselection ? w.getselection() : w.document.selection;
}
function setrange(sel,r)
{
sel.removeallranges();
sel.addrange(r);
}
function filterpastedata(originaltext)
{
var newtext=originaltext;
//do something to filter unnecessary data
return newtext;
}
function block(e)
{
e.preventdefault();
}
var w,or,divtemp,origintext;
var newdata;
function pasteclipboarddata(editorid,e)
{
var objeditor = document.getelementbyid(editorid);
var eddoc=objeditor.contentwindow.document;
if(isie)
{
var orrange=objeditor.contentwindow.document.selection.createrange();
var ifmtemp=document.getelementbyid("ifmtemp");
if(!ifmtemp)
{
ifmtemp=document.createelement("iframe");
ifmtemp.id="ifmtemp";
ifmtemp.style.width="1px";
ifmtemp.style.height="1px";
ifmtemp.style.position="absolute";
ifmtemp.style.border="none";
ifmtemp.style.left="-10000px";
ifmtemp.src="iframeblankpage.html";
document.body.appendchild(ifmtemp);
ifmtemp.contentwindow.document.designmode = "on";
ifmtemp.contentwindow.document.open();
ifmtemp.contentwindow.document.write("<body></body>");
ifmtemp.contentwindow.document.close();
}else
{
ifmtemp.contentwindow.document.body.innerhtml="";
}
origintext=objeditor.contentwindow.document.body.innertext;
ifmtemp.contentwindow.focus();
ifmtemp.contentwindow.document.execcommand("paste",false,null);
objeditor.contentwindow.focus();
newdata=ifmtemp.contentwindow.document.body.innerhtml;
//filter the pasted data
newdata=filterpastedata(newdata);
ifmtemp.contentwindow.document.body.innerhtml=newdata;
//paste the data into the editor
orrange.pastehtml(newdata);
//block default paste
if(e)
{
e.returnvalue = false;
if(e.preventdefault)
e.preventdefault();
}
return false;
}else
{
enablekeydown=false;
//create the temporary html editor
var divtemp=eddoc.createelement("div");
divtemp.id='htmleditor_tempdiv';
divtemp.innerhtml='\ufeff';
divtemp.style.left="-10000px"; //hide the div
divtemp.style.height="1px";
divtemp.style.width="1px";
divtemp.style.position="absolute";
divtemp.style.overflow="hidden";
eddoc.body.appendchild(divtemp);
//disable keyup,keypress, mousedown and keydown
objeditor.contentwindow.document.addeventlistener("mousedown",block,false);
objeditor.contentwindow.document.addeventlistener("keydown",block,false);
enablekeydown=false;
//get current selection;
w=objeditor.contentwindow;
or=getsel(w).getrangeat(0);
//move the cursor to into the div
var docbody=divtemp.firstchild;
rng = eddoc.createrange();
rng.setstart(docbody, 0);
rng.setend(docbody, 1);
setrange(getsel(w),rng);
origintext=objeditor.contentwindow.document.body.textcontent;
if(origintext==='\ufeff')
{
origintext="";
}
window.settimeout(function()
{
//get and filter the data after onpaste is done
if(divtemp.innerhtml==='\ufeff')
{
newdata="";
eddoc.body.removechild(divtemp);
return;
}
newdata=divtemp.innerhtml;
// restore the old selection
if (or)
{
setrange(getsel(w),or);
}
newdata=filterpastedata(newdata);
divtemp.innerhtml=newdata;
//paste the new data to the editor
objeditor.contentwindow.document.execcommand('inserthtml', false, newdata );
eddoc.body.removechild(divtemp);
},0);
//enable keydown,keyup,keypress, mousedown;
enablekeydown=true;
objeditor.contentwindow.document.removeeventlistener("mousedown",block,false);
objeditor.contentwindow.document.removeeventlistener("keydown",block,false);
return true;
}
}
这里的pasteclipboarddata是用做onpaste回调函数的,要使用它的话,可以通过下面的代码把它加到html编辑器的iframe的onpaste事件上。
复制代码 代码如下:
var ifrm=document.getelementbyid("editor")
if(isie)
{
ifrm.contentwindow.document.documentelement.attachevent("onpaste", function(e){return pasteclipboarddata(ifrm.id,e);});
}
else
{
ifrm.contentwindow.document.addeventlistener("paste", function(e){return pasteclipboarddata(ifrm.id,e);},false);
}
这里的filterpastedata函数就是我们专门用来做过滤的函数,具体要怎么去过滤纯文本、html及word数据将在下一篇讲解。