Html 편집기 붙 여 넣 기 내용 필터 기술 상세 설명

저자:Tony Qu 는 최근 데이터 붙 여 넣 기 를 해결 하 는 데 많은 진전 을 이 루 었 습 니 다.Html 온라인 편집기 로 서 반드시 갖 춰 야 할 기술 로 서 여기 서 상세 하 게 소개 하고 참고 사항 을 제공 합 니 다.연구 과정 에서 저 는 많은 시행 착 오 를 겪 었 습 니 다.n 가지 방식 을 시 도 했 습 니 다.미국의 PM 은 사용자 체험 에 영향 을 주 는 것 을 받 아들 일 수 없다 고 생각 하기 때문에 여러 가지 제안 이 부정 되 었 지만 수확 이 풍부 합 니 다.저 는 지금 code 를 써 서 수요 구동 을 좋아 합 니 다.이 기술 의 주요 수요*사용자 가 붙 인 텍스트 데 이 터 를 걸 러 낼 수 있 습 니 다*사용자 가 붙 인 html 데이터(Html 인 코딩 없 음)*사용자 가 붙 인 Word 데 이 터 를 걸 러 내 고 대부분의 Word 형식 을 유지 할 수 있 습 니 다.*이 과정 에서 사용자 에 게 우리 가 필 터 를 하고 있다 는 것 을 알 리 지 않도록 하 십시오.연구 과정 에서 저 는 주로 tinymce,ckeditor 를 참 고 했 지만 마지막 으로 저 는 tinymce 의 실현 방법 을 선 택 했 습 니 다.구체 적 인 원인 은 아래 의 글 을 보고 알 게 될 것 입 니 다.ckeditor 의 실현 방식 은 onpaste 이벤트 가 실 행 될 때 클립보드 에서 데 이 터 를 꺼 내 고 꺼 낸 텍스트 를 처리 한 다음 에 처 리 된 텍스트 를 클립보드 에 저장 하 는 것 입 니 다.어떤 사람 은 onpaste 에서 paste 동작 을 직접 취소 하고 얻 은 내용 을 iframe 에 넣 을 수 있 겠 느 냐 고 말 했다.나 는 그때 이 일 을 했 지만 의외로 클립보드 에서 직접 꺼 낸 데 이 터 는 형식 정 보 를 포함 하지 않 은 텍스트 였 다.특히 Word 에서 붙 여 온 데이터,일반 텍스트,색상,레이아웃 등 데이터 가 존재 하지 않 았 다.그러면...사용 자 는 형식 이 없 는 데 이 터 를 붙 여 넣 고 Html 편집기 에서 편집 할 수 밖 에 없습니다.그러나 브 라 우 저 스스로 붙 여 넣 으 면 형식 정보 가 보존 되 고 브 라 우 저 는 자동 으로 Word 의 붙 여 넣 기 데 이 터 를 xml 데이터 로 변환 하여 dom 에 넣 습 니 다.따라서 형식 정 보 를 보존 하기 위해 서 는 브 라 우 저의 표준 붙 여 넣 기 행위 의 도움 을 통 해서 만 이 를 실현 할 수 있 을 것 같 습 니 다.또한 ckeditor 의 실현 은 Firefox 에서 치 명 적 인 약점 이 있 습 니 다.클립보드 에서 데 이 터 를 읽 고 쓰 려 면 사용자 에 게 signed.applets.codebase 를 설정 하 라 고 알려 야 합 니 다.principal_슈퍼 port 의 권한,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.
 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 의 위 치 를 조정 합 니 다.제거 하 는 것 이 아니 라 iframe 의 위 치 를 조정 합 니 다.left 와 top 을 조정 하 는 목적 은 임시 iframe 으로 초점 을 옮 길 때 Html 편집기 의 iframe 과 임시 iframe 이 한 보기 안에 없 으 면 화면 이 굴 러 서 화면 이 이유 없 이 반 짝 일 수 있 습 니 다.)Firefox 구현 1.onpaste 리 셋 함수 에 임시 div 를 만 듭 니 다.이 div 는 Html 편집기 의 iframe 에 넣 습 니 다.이것 도 권한 문 제 를 돌아 가 는 관건 입 니 다.2.현재 커서 와 초점 위 치 를 저장 한 다음 임시로 만 든 div 로 커서 를 옮 깁 니 다.3.window.setTimeout 을 통 해 리 셋 함 수 를 설정 하여 paste 동작 이 순식간에 완 료 된 후에 실행 합 니 다.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; 
} 
} 

이 곳 의 paste Clipboard Data 는 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); 
} 

여기 있 는 filter PasteData 함 수 는 우리 가 전문 적 으로 여과 하 는 함수 입 니 다.텍스트,html 및 Word 데 이 터 를 어떻게 걸 러 야 하 는 지 는 다음 편 에서 설명 할 것 입 니 다.