HTML 소스입력 전용 textarea - 스크랩 버튼 Scrap 복사 붙여 넣기 기능
HTML 소스입력 전용 textarea - 스크랩 버튼 Scrap 복사 붙여 넣기 기능
Multimedia DATA
Text DATA
소스 =================================================================
<html>
<head>
<style>
body,H1{
font-family: "Courier New", Courier, mono;
}
</style>
<script>
/*********************************************************************
* 만드니 : 호색사자
* dr-no.co.kr / minin.hanweb.biz
* http://dr-no.co.kr/public/js_050426.html
HTML 소스입력 전용 textarea
블러그에서.. 글 올릴때.. html 페이지 드래그 해서 붙여 넣지요?
html 의 요소를 드래그 해서 복사하면 클립보드에는 멀티미디어 데이터가 됩니다.
이걸 일반 textarea 에 붙여넣기 하면 HTML 소스는 붙여넣기가 안되지요..
그걸 가능하게 하는 예제입니다.
스크립트내용을 보시면 많은 부분들이 진행이 되어 있고 공개되어 있습니다.
활용 하셔서 좋은 목적으로 쓰시길 바랍니다.
*********************************************************************/
//window.clipboardData.setData('Text',"");
function init(){
HTMLEDITEFRAME.document.designMode="On";
setTimeout(f_int,100);
}
function f_int(){
inputHTMLz();
outputHTMLz();
}
function outputHTMLz(){
// A 태그에 TARGET 부여
for ( var i = 0 ; i < HTMLEDITEFRAME.document.body.all.length ; i ++){
if (HTMLEDITEFRAME.document.body.all[i].tagName == "A")
HTMLEDITEFRAME.document.body.all[i].target="_blank";
}
outputHTMLVAL = HTMLEDITEFRAME.document.body.outerHTML;
document.all.HTMLCONTENTS.value = outputHTMLVAL.replace(/\<BODY\>|\<\/BODY\>/gi,"");
}
function inputHTMLz(){
HTMLEDITEFRAME.document.body.innerHTML = document.all.HTMLCONTENTS.value;
}
function HTMLSetData(){
Range2 = HTMLEDITEFRAME.document.body.createTextRange();
Range2.select();
HTMLEDITEFRAME.document.execCommand("copy");
}
function TXETSetData(){
Range2 = HTMLCONTENTS.createTextRange();
Range2.select();
HTMLCONTENTS.document.execCommand("copy");
}
var HTMLCONTENTS_FOCUS = false;
var tab_text = "||-yajava.com-||";
function ekeydown(e){
if(event.ctrlKey && event.keyCode == 86){
textobj = document.all.HTMLCONTENTS;
var sText = document.selection.createRange();
if (sText.text!=""){
document.execCommand("paste",true,tab_text);
}else{
textobj.value= textobj.value + tab_text;
}
textobj.value= textobj.value.replace(tab_text,multmedia_GetData());
event.keyCode = null;
event.cancelBubble = true;
event.returnValue = false;
textobj.focus();
return false;
}
return;
}
// 멀티미디어 클립보드 -> 텍스트 게시판에 태그로 생성
function multmedia_GetData(){
Range2 = HTMLEDITEFRAME.document.body.createTextRange();
Range2.select();
HTMLEDITEFRAME.document.execCommand("paste");
// A 태그에 TARGET 부여
for ( var i = 0 ; i < HTMLEDITEFRAME.document.body.all.length ; i ++){
if (HTMLEDITEFRAME.document.body.all[i].tagName == "A")
HTMLEDITEFRAME.document.body.all[i].target="_blank";
}
outputHTMLVAL = HTMLEDITEFRAME.document.body.outerHTML;
return outputHTMLVAL.replace(/\<BODY\>|\<\/BODY\>/gi,"");
}
</script>
</head>
<body onload="init()">
<H1>Multimedia DATA</H1>
<iframe id="HTMLEDITEFRAME" name="HTMLEDITEFRAME" src="about:blank" style="height:200px; width:100%;border:1 solid C4CAD1" scrolling="auto" frameborder="0" ></iframe>
<button onclick="outputHTMLz();">Html 소스로 보내기↓</button>
<button onclick="inputHTMLz();">들여보내기 ↑</button>
<button onclick="HTMLSetData();">멀티 내용복사</button>
<button onclick="TXETSetData();">텍스트 내용복사</button>
<H1>Text DATA</H1>
<textarea name="HTMLCONTENTS" id="HTMLCONTENTS" rows="10" style="height:200px; width:100%;border:1 solid C4CAD1" onkeydown="return ekeydown(event)" onfocus="HTMLCONTENTS_FOCUS=true;" onblur="HTMLCONTENTS_FOCUS=false;">
</textarea>
<textarea name="HIDDENCONTENTS" id="HIDDENCONTENTS" style="display:none;"></textarea>
</body>
</html>
