文章摘要
这篇文章介绍了一个基于JavaScript的剪贴板处理工具，主要用于从IE浏览器中执行剪贴板操作。代码定义了多个函数，包括`getSel`（获取选择内容）、`setRange`（添加或移除范围）、`filterPasteData`（过滤粘贴数据）和`block`（阻止事件默认行为）。核心功能包括： 1. **剪贴板操作**：通过`pasteClipboardData`函数从剪贴板中获取数据，并结合`filterPasteData`对其进行过滤处理。2. **IE浏览器特判**：代码针对IE浏览器的特性进行了特殊处理，包括创建临时`IFrame`容器以模拟非IE浏览器的行为。3. **事件阻塞与复位**：代码通过`mousedown`、`keydown`事件阻塞，阻止默认操作，并在粘贴完成后复位键盘事件。4. **临时存储**：使用`divTemp`元素临时存储粘贴后的内容，便于后续操作和展示。 文章重点描述了代码的结构和处理流程，适合需要跨浏览器兼容性剪贴板操作的场景。
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=”https://www.jb51.net/article/iframeblankpage.html”;
document.body.appendChild(ifmTemp);
ifmTemp.contentWindow.document.designMode=”On”;
ifmTemp.contentWindow.document.open();
ifmTemp.contentWindow.document.write(“”);
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=’?’;
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===’?’)
{
originText=””;
}
window.setTimeout(function()
{
//get and filter the data after onpaste is done
if(divTemp.innerHTML===’?’)
{
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;
}
}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
