2011-08-16 5 views
1

포럼 메시지를 보내려면 내 사이트에서 편집 가능한 div가 있어야합니다. 사람들이 메시지를 편집 할 수 있습니다. (굵게, 기울임 꼴, 밑줄, 링크 추가 등)div 및 oncopy에 대한 HTML 태그 onpaste도 필터링

하지만 제가 원하는 것은 하나의 붙여 넣기 또는 드롭 (드롭은 필요하지 않지만 붙여 넣기) 할 때 쓰는 텍스트입니다. HTML 태그가없는 div. - 깨끗하고, 그냥 텍스트. (일부 사람이 단어를 쓰고 200 포인트 크기의 텍스트를 만든 다음 &을 내 div에 붙여 넣으면 매우 다른 메시지가 표시됩니다.) 그리고 나는 그것이 일어나기를 원하지 않습니다.

어떻게 HTML 태그를 죽이고 DIV에 붙여 넣기 위해 클립 보드에서 오는 텍스트를 스캔 할 수 있습니까?

<html> 
<head> 
<script type="text/javascript" language="javascript"> 

function PasteFilter() 
{ 
//windows.clipboardData filter on paste to go here 
} 

function CopyFilter() 
{ 
//windows.clipboardData filter on copy to go here 
} 

</script> 
</head> 
    <body> 
     <Div class="body" onpaste="PasteFilter()" oncopy="CopyFilter"> 
     <!-- div content goes here.--> 
     </Div> 
    </body> 
    </html> 

또한 동일한 필터를 COPY에도 적용하고 싶습니다.

감사합니다, 나는이 작업을 수행하는 두 가지 방법이있다 생각

답변

1

:

1) 쉬운 방법 - PasteFilter에 다음 코드()를 삽입 :

var foo = window.clipboardData.getData('Text'); 
window.clipboardData.setData('Text', foo); 

을 첫 번째 줄에 가져가 clipboardData의 텍스트 값 (이미 HTML 태그가 제거 된 것) 두 번째 줄은 clipboardData를 일반 텍스트로 설정합니다. (IE8에서 테스트 됨)

2) 다른 방법 - 어떤 이유로 그 것이 적합하지 않은 경우.

작은 지연 시간 제한으로 다른 함수를 트리거합니다. 이 함수에서는 DIV의 innerHTML 내용을 가져와 정규 표현식을 실행하여 모든 태그를 제거합니다.

예 :이 도움이

function PasteFilter() 
{ 
    setTimeout('foo()', 200); 
} 

function foo() 
{ 
    var contents = document.getElementById("test").innerHTML; 

    var new_contents = contents.replace(/(<([^>]+)>)/g, ""); // taken from http://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/ 

    document.getElementById("test").innerHTML = new_contents; 
} 

이 방법의 문제는 캐럿 위치를 잃을 것입니다 ...

희망 ...

+0

감사 페리. 두 기술을 모두 시도 할 것이고 큰 내용에 대한 Regex의 효율성을 점검 할 것입니다. 하지만 편집 가능한 div 이미있는 모든 HTML 태그를 유지하고 싶습니다. 내가 창문을 조작하려고하자. 클립 보드 데이터를 먼저. 감사. –

+0

내가 'window.clipboardData'를 IE에서만 사용할 수 있다는 것을 알고 있습니까? – llamerr