네티즌칼럼

Total article 1129 : 1 page / total 46 page

[1129]

일반 (403)

블록 (82)

코딩 (27)

Subject :

[코딩] WYSIWYG 에디터에 툴바레이어 특수문자 클릭해 삽입하기 소스 간단 정리...

(Homepage) \| Point : 71435 \| 2014-10-26 14:52:28 \| Read : 4,680 \| Vote : 141

아래 소스를 복사해 html 파일로 만들면 완전하게 동작합니다. 함 살펴보시고 익스플로어11에 맞게 소스를 변경해 보시기 바랍니다. 핵심적인 부분은 get_selection() 함수에서 주석 처리한 부분입니다. 주석을 제거하면 1번 버튼이 동작합니다. 그럼 행운이 있길... 저도 문제점을 찾아보겠습니다. 
 
모바일에서 소스가 잘 안보이시는 분은 다음 링크를 클릭하세요. <a href=http://bit.ly/1QdP5PR target=_blank>http://bit.ly/1QdP5PR</a> 
 
[완전체 소스] 
<pre class="brush: js; first-line: 1" title="완전체 소스">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; 위지윅 에디터에서 툴바레이어 클릭 관련 익스플로어11 호환성 맞추기 초간단 정리 소스 &lt;/TITLE&gt;
&lt;script language="JavaScript"&gt;
var DocReadyState = false;
var DocReloadInterval = null;
var memoiE = null;
var memoiW = null;
var memoE = null;
var close_id = null;
var default_source = "&lt;HEAD&gt;&lt;STYLE&gt; body,td,div { font-family:굴림; font-size:10pt; color:#444444; line-height:140%; scrollbar-arrow-color: #CCCCCC; scrollbar-track-color: #EEEEEE; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #CCCCCC; scrollbar-face-color:#FFFFFF; scrollbar-3dlight-color: #CCCCCC; scrollbar-darkshadow-color: #FFFFFF; margin-top:2px; margin-bottom:0px; margin-left:1px; margin-right:1px; } body { background-color:#FFFFFF; }&lt;/STYLE&gt;&lt;/HEAD&gt;";
function CSelection()
{
&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection = null;
&nbsp;&nbsp;&nbsp;&nbsp;this.GetSelection = get_selection;
&nbsp;&nbsp;&nbsp;&nbsp;this.PutSelection = put_selection;
}
&nbsp;
function get_selection()
{
&nbsp;&nbsp;&nbsp;&nbsp;if(this.m_selection != null)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(this.m_selection.type != "Control")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(memoiW.document.body.createTextRange().inRange(this.m_selection) == true)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection.select();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection.select();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;//alert(memoiW.document.selection.type+" & "+memoiW.document.selection.createRange());
&nbsp;&nbsp;&nbsp;&nbsp;//document.getElementById('test').innerHTML = memoiW.document.selection.type+" & "+memoiW.document.selection.createRange();
}
&nbsp;
function put_selection()
{
&nbsp;&nbsp;&nbsp;&nbsp;if(typeof window.getSelection != "undefined"){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection = memoiW.window.getSelection();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection.type = typeof memoiW.document.getSelection;
&nbsp;&nbsp;&nbsp;&nbsp;} else if(typeof document.selection != "Control"){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection = memoiW.document.selection.createRange();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.m_selection.type = memoiW.document.selection.type;
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
function deactivate_handler()
{
&nbsp;&nbsp;&nbsp;&nbsp;if(DocReadyState)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectionObj.PutSelection();
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
function DocReload()
{
&nbsp;&nbsp;&nbsp;&nbsp;memoiE = document.getElementById("memoi");
&nbsp;&nbsp;&nbsp;&nbsp;memoiW = memoiE.contentWindow;
&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(DocReloadInterval);
&nbsp;&nbsp;&nbsp;&nbsp;memoE = document.getElementById("memo");
&nbsp;&nbsp;&nbsp;&nbsp;DocLoading();
}
&nbsp;
function DocLoading()
{
&nbsp;&nbsp;&nbsp;&nbsp;DocReadyState = true;
&nbsp;&nbsp;&nbsp;&nbsp;memoiW.document.designMode = "On";
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;selectionObj = new CSelection();
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;var doc = memoiW.document.open("text/html");
&nbsp;&nbsp;&nbsp;&nbsp;doc.write(default_source);
&nbsp;&nbsp;&nbsp;&nbsp;doc.close();
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;selectionObj.m_selection = null;
&nbsp;&nbsp;&nbsp;&nbsp;memoiW.focus();
}
&nbsp;
function buttonover(td)
{
&nbsp;&nbsp;&nbsp;&nbsp;td.style.filter='glow(color=#FF0000 strength=1)';
}
&nbsp;
function buttonout(td)
{
&nbsp;&nbsp;&nbsp;&nbsp;td.style.filter='';
}
&nbsp;
function command(obj,myEvent)
{
&nbsp;&nbsp;&nbsp;&nbsp;memoiW.focus();
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(selectionObj.m_selection != null)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectionObj.GetSelection();
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(obj.tagName == "SELECT")
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("잘못된 분기 여기가 아닙니다! SELECT command");
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch (obj.id) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case ("ed_asword") :
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Layer_hidden(ed_asworddiv);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Layer_xy(ed_asworddiv,'ed_aswordtable',0,+10,myEvent);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
function layerClick(obj,objcmd)
{
&nbsp;&nbsp;&nbsp;&nbsp;memoiW.focus();
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(selectionObj.m_selection != null)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;selectionObj.GetSelection();
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(objcmd == "div_clear")
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("잘못된 분기 여기가 아닙니다! This objcmd div_clear");
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(obj.id == "ed_asworddiv")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(typeof window.getSelection != "undefined")
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memoiW.document.execCommand("InsertHTML",false,[objcmd]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else if(typeof document.selection != "Control"){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var eEdit = memoiW.document.selection.createRange();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eEdit.pasteHTML([objcmd]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ed_asworddiv.style.visibility = "hidden";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;
}
&nbsp;
function Layer_hidden(obj)
{
&nbsp;&nbsp;&nbsp;&nbsp;var sw_Layers = new Array('ed_asworddiv');
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0 ; i &lt; sw_Layers.length ; i++)
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(obj != sw_Layers[i])
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LayerView = document.getElementById(sw_Layers[i]);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LayerView.style.visibility = "hidden";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
function Layer_xy(obj,objt,lpx,lpy,myEvent)
{
&nbsp;&nbsp;&nbsp;&nbsp;var scrollLeft = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft;
&nbsp;&nbsp;&nbsp;&nbsp;var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;obj.style.left = (myEvent.clientX + scrollLeft + lpx) + "px";
&nbsp;&nbsp;&nbsp;&nbsp;obj.style.top = (myEvent.clientY + scrollTop + lpy) + "px";
&nbsp;&nbsp;&nbsp;&nbsp;obj.style.visibility = "visible";
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;if(objt) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;start_timeout(document.getElementById(objt));
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
function close_div(obj)
{
&nbsp;&nbsp;&nbsp;&nbsp;obj.style.visibility = "hidden";
&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(close_id);
}
&nbsp;
function start_timeout(table)
{
&nbsp;&nbsp;&nbsp;&nbsp;switch (table.id) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case ("ed_aswordtable") : {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;asworddiv = document.getElementById("ed_asworddiv");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;close_id = setTimeout("close_div(asworddiv)",1500);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&nbsp;
function clear_timeout()
{
&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(close_id);
&nbsp;&nbsp;&nbsp;&nbsp;close_id = null;
}
&nbsp;
&nbsp;
var inasw = new Array();
inasw[0] = new Array('＃','＆','＊','＠','§','※','☆','★','○','●','◎','◇','◆','□','■','△','▲','▽','▼','→','←','↑','↓','↔','〓','◁','◀','▷','▶','♤','♠','♡','♥','♧','♣','⊙','◈','▣','◐','◑','▒','▤','▥','▨','▧','▦','▩','♨','☏','☎','☜','☞','¶','†','‡','↕','↗','↙','↖','↘','♭','♩','♪','♬','㉿','㈜','№','㏇','™','㏂','㏘','℡','®','ª','《','》','『','』','【','】');
&nbsp;
&lt;/script&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;SCRIPT language="JavaScript"&gt;
&nbsp;&nbsp;&lt;!--
&nbsp;&nbsp;&nbsp;&nbsp;var sw_layers_asword = "&lt;div id='ed_asworddiv' style='position:absolute; visibility:hidden;'&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;sw_layers_asword += "&lt;table id='ed_aswordtable' border='0' cellpadding='0' cellspacing='0' bgcolor='yellow' onmousemove='clear_timeout()' onmouseout='start_timeout(this)'&gt;&lt;tr&gt;&lt;td style='padding:3;'&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;sw_layers_asword += "&lt;table width='210' height='170' border='0' cellpadding='2' cellspacing='0'&gt;";
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;function ed_aswordF()
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var e_list = new String;
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var i=0 ; i &lt; 80 ; i++)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!(i % 10)) e_list += "&lt;tr&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (inasw[0][i] == "blank") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e_list += "&lt;td align='center'&gt;&lt;font class='sw_ft_style_1'&gt;X&lt;/font&gt;&lt;/td&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e_list += "&lt;td align='center' onClick='javascript:layerClick(ed_asworddiv,\""+ inasw[0][i] +"\");' onMouseOver=this.className='sw_MouseOver_0' onMouseOut=this.className='sw_MouseOut_0' style='cusor:pointer;'&gt;&lt;font class='sw_ft_style_0'&gt;" + inasw[0][i] + "&lt;/font&gt;&lt;/td&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(i % 10 == 9) e_list += "&lt;/tr&gt;";
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return e_list;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;sw_layers_asword += ed_aswordF();
&nbsp;&nbsp;&nbsp;&nbsp;sw_layers_asword += "&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;";
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;document.writeln(sw_layers_asword);
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;DocReloadInterval = setInterval("DocReload()", 300);
&nbsp;&nbsp;//--&gt;
&lt;/SCRIPT&gt;
1. 브라우저에서 DIV 영역에 selection 찍기&lt;br&gt;
&lt;input type=button value="selectionObj.GetSelection();" onclick="selectionObj.GetSelection();"&gt;&lt;br&gt;
[DIV 영역]&lt;br&gt;
&lt;div id=test&gt;&lt;/div&gt;
[DIV 영역 끝]&lt;br&gt;&lt;br&gt;
2. 브라우저에서 위지윅 에디터에 특수문자 삽입하기&lt;br&gt;
&lt;input type=button value="특수문자 삽입" onClick='javascript:command(this,event);' id='ed_asword' title='특수문자' onmouseover='buttonover(this)' onmouseout='buttonout(this)'&gt;&lt;br&gt;
[WYSIWYG에디터 박스 영역]&lt;br&gt;
&lt;iframe id="memoi" style='width:100%; height:300px; display:block;' onbeforedeactivate='deactivate_handler()' scrolling='yes' frameborder='yes' border='1' ALLOWTRANSPARENCY='true'&gt;&lt;/iframe&gt;
&lt;textarea id='memo' style='width:100%; height:300px; display:none;'&gt;&lt;/textarea&gt;
[WYSIWYG에디터 박스 영역 끝]&lt;br&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
 </pre> 
 
* 관리자님에 의해서 게시물이 이동되었습니다 (2015-06-06 11:14)

216.73.216.138

http://run.blrun.net/
http://www.ntzn.net/
http://www.blrun.net/eight
http://삼성산뜨란채.kr

[HOME]

[bitly]