miniwini.visualEditor v1.0.0.1 베이직 스킨에 적용하기

복잡하지 않은 이지윅인데 그누하고 상당히 잘 어울리네요.


설치방법입니다.
--------------
1. 압축을 풀고 홈페이지 젤 상위에 복사하세요. 제가 설치한 그림 첨부합니다.
2. miniwini.visualEditor.conf.php 을 수정합니다. 20줄째 줄쯤부터 시작합니다. 보시면서 고치세요
/*수정*/
$visualEditor = array(
// <FORM name="이거">..</FORM> 에서 '이거'
"formName" => "fgbform",

// <FORM...><TEXTAREA name="이거"></TEXTAREA></FORM> 에서 '이거'
"textareaName" => "wr_content",

// "HTML 사용"에 관련된 checkbox의 name
"useHTML" => "w",

// "TEXT 사용"에 관련된 checkbox의 name (미니보드?인가는 HTML 사용이 기본이고 "텍스트 사용"이 옵션이더군요
"useText" => "w",

// "자동 줄바꿈"에 관련된 checkbox의 name
"useAutoBr" => "wr_html",

// 에디터 생성 후 입력 부분에 자동으로 커서가 가게 설정합니다 (TRUE|FALSE)
"autoFocus" => TRUE,

// 게시물 수정 화면일 경우의 기본 내용
"defaultContent" => ($w == "u")?preg_replace("/\n/", "\n", stripslashes($write[wr_content])):"",
/*수정끝*/
3. 미니위니 자바스크립트를 그누와 합쳤습니다. 이쪽이 더 심플하니 좋더군요.
그누보드 javascript.js 파일을 엽니다.
/*추가*/
/*
===============================================================================
* FILENAME : miniwini.visualEditor.js
* VERSION : 0.1.0.1
===============================================================================
* AUTHOR : 위쯔~
* CONTACT : wizz@zezz.com
* URL : http://miniwini.com
===============================================================================
*/

function toggleVisualEditorMode()
{
if (g_bVisualEditor)
{
setVisualEditorMode(false);
}
else
{
setVisualEditorMode(true);
}
g_bVisualEditor = !g_bVisualEditor;
}

function setVisualEditorMode(bVisual)
{
var o1 = document.getElementById(g_sVisualEditor);
var o2 = document.getElementById(g_sVisualEditor+"_code");

if (bVisual)
{
o1.innerHTML = o2.value;
show(o1);
show(divToolbarsVisualTags);
hide(o2);
o1.focus();
}
else
{
o2.value = o1.innerHTML;
hide(o1);
hide(divToolbarsVisualTags);
show(o2);
o2.focus();
}
}



function finalizeVisualEditor()
{
var o1 = document.getElementById(g_sVisualEditor);
var o2 = document.getElementById(g_sVisualEditor+"_code");

if (g_bVisualEditor==true)
{
var sHTML = o1.innerHTML;
}
else
{
var sHTML = o2.value;
}
DivVisualEditorChecker.innerHTML = sHTML;
o2.value = DivVisualEditorChecker.innerHTML;
}


function captureEnterKey()
{
if (event.keyCode == 13)
{
if (event.shiftKey == false)
{
var sel = document.selection.createRange();
sel.pasteHTML('<br>');
event.cancelBubble = true;
event.returnValue = false;
sel.select();
sel.moveEnd("character", 1);
sel.moveStart("character", 1);
sel.collapse(false);
return false;
}
else
{
return event.keyCode = 13;
}
}
}


function fx(nNewPadding)
{
var el = event.srcElement;
while (el.tagName!="TD")
el = el.parentElement;
var nPadding = parseInt(el.getAttribute("nPadding"));
el.style.paddingTop=nPadding+nNewPadding;
}

function defx()
{
var el = event.srcElement;
while (el.tagName!="TD")
el = el.parentElement;
var nPadding = parseInt(el.getAttribute("nPadding"));
el.style.paddingTop = nPadding;
}


function show(obj)
{
obj.style.display = "";
}


function toggle(obj)
{
if (obj.style.display == 'none')
obj.style.display = '';
else
obj.style.display = 'none';
}


function hide(obj)
{
obj.style.display = "none";
}

function visualTag(sTag,obj)
{
obj.focus();
var rng = obj.document.selection.createRange();
switch(sTag)
{
case "bold":
obj.document.execCommand("Bold",false,null);
obj.focus();
break;

case "italic":
obj.document.execCommand("Italic",false,null);
obj.focus();
break;

case "underline":
obj.document.execCommand("Underline",false,null);
obj.focus();
break;

case "strike":
obj.document.execCommand("StrikeThrough",false,null);
obj.focus();
break;

case "insertImage":
var rnd = Math.random();
window.showModalDialog("./miniwini.visualEditor.dialogInsertImage.php?rnd="+rnd,obj,"status:no;dialogWidth:460px;dialogHeight:350px");
break;

case "color":
var sColor = getColorFromColorDlg();
obj.document.execCommand("ForeColor",false,sColor);
obj.focus();
break;

case "bgcolor":
var sColor = getColorFromColorDlg();
obj.document.execCommand("BackColor",false,sColor);
obj.focus();
break;

case "hilite":
obj.document.execCommand("BackColor",false,"FFFF00");
obj.document.execCommand("ForeColor",false,"000000");
break;

case "sup":
obj.document.execCommand("Superscript",false,null);
obj.focus();
break;

case "createLink":
var rnd = Math.random();
window.showModalDialog("./miniwini.visualEditor.dialogCreateLink.php?rnd="+rnd,obj,"status:no;dialogWidth:540px;dialogHeight:500px");
break;

case "insertEmoticons":
var rnd = Math.random();
window.showModalDialog("./miniwini.visualEditor.dialogInsertEmoticons.php?rnd="+rnd,obj,"status:no;dialogWidth:500px;dialogHeight:400px");
break;
}
}



function setImgAlignType(sAlign)
{
document.all.imgAlign1.className = "imgAlign";
document.all.imgAlign2.className = "imgAlign";
document.all.imgAlign3.className = "imgAlign";

event.srcElement.className = "imgAlignOn";
g_sAlign = sAlign;
}


function detectAgentVersion()
{
var ua = window.navigator.userAgent
var msie = ua.indexOf ("MSIE ")

if ( msie > 0 )
return parseFloat(ua.substring(msie+5,ua.indexOf(";", msie)))
else
return 0
}

function changeBorderColor(obj)
{
if (detectAgentVersion()>=6)
{
var sColor = getColorFromColorDlg();
obj.style.backgroundColor = sColor;
g_sBorderColor = "#"+sColor;
}
else
return;
}





function getColorFromColorDlg()
{
var dlgHelper = document.getElementById("dlgHelper");
if (detectAgentVersion()>=6)
{
sInitColor = null;
var sColor = dlgHelper.ChooseColorDlg(sInitColor);

sColor = sColor.toString(16);

if (sColor.length < 6)
{
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
return sColor;
}
}

function playMultimediaFile(sUri,obj)
{
var nPlayState = obj.getAttribute("isPlaying");
if (nPlayState==0)
{
el = obj.previousSibling;
while (el.tagName!="A")
el = el.previousSibling;

var oMedia = document.createElement("EMBED");
oMedia.style.display = "block";
oMedia.src = sUri;
oMedia.autostart = true;
obj.parentNode.appendChild(oMedia);

obj.setAttribute("isPlaying",1);
}
else
{
alert("이미 재생중입니다");
return;
}
}
/*추가끝*/

4.베이직 스킨에 적용하도록 하겠습니다. 미니위니 이지윅을 적용시키겠습니다.
gbform.skin.php 을 엽니다.
<textarea name='wr_content' style='border: 1px solid #C2C2C2; word-break:break-all; width:99%;' required rows=15 itemname='내용' class='textarea lh'><?=$content?></textarea>
을 찾으셔서 아래에 추가해주세요
<?include(getcwd()."/miniwini.visualEditor.php");?>

5.필요없는 부분이 보여서 추가합니다.
miniwini.visualEditor.php 열어서 수정하세요.

수정전
-------------------------------
try {oForm.<?=$visualEditor['useHTML']?>.checked = true;}
catch(e){}

try {oForm.<?=$visualEditor['useText']?>.checked = false;}
catch(e){}

try {oForm.<?=$visualEditor['useAutoBr']?>.checked = false;}
catch(e){}
--------------------------------

수정후
--------------------------------
try {oForm.<?=$visualEditor['useHTML']?>.checked = true;}
catch(e){}

/*
try {oForm.<?=$visualEditor['useText']?>.checked = false;}
catch(e){}

try {oForm.<?=$visualEditor['useAutoBr']?>.checked = false;}
catch(e){}
*/

6. 2004년 10월 23일 추가사항입니다.
수정부분은 글 폼이 글 쓰는 방법에 따라 가로폭이 무한정 늘어나는 현상을 잡았습니다.

(1)miniwini.visualEditor.conf.php 파일을 수정합니다.
45번째 줄 쯤에서
수정전
----------------------
"overflow" => "visible"

수정후
----------------------
"overflow" => "auto"
(2)miniwini.visualEditor.php 을 수정합니다.
48번줄쯤에서 이 부분을 찾습니다.

수정전
----------------------
<span id=DivVisualEditor style="width:<?=$visualEditor['width']?>;height:<?=$visualEditor['height']?>;display:none">
<table border=0 cellpadding=0 cellspacing=0 width=100% style="height:99%">
<tr>
<td><div onblur="finalizeVisualEditor()" onkeypress="captureEnterKey()" id="<?=$visualEditor['objectName']?>" style="<?=$visualEditor['styleWYSIWYG']?>;height:100%;overflow:<?=$visualEditor['overflow']?>" contentEditable><?=$visualEditor['defaultContent']?></div><textarea onblur="finalizeVisualEditor()" id="<?=$visualEditor['objectName']?>_code" name="<?=$visualEditor['textareaName']?>" style="<?=$visualEditor['styleTEXTAREA']?>;height:99%;overflow:<?=$visualEditor['overflow']?>"></textarea></div></td>
</tr>
</table>
</span>

수정후
-----------------------
<span id=DivVisualEditor style="width:<?=$visualEditor['width']?>;height:<?=$visualEditor['height']?>;display:none">
<table border=0 cellpadding=0 cellspacing=0 width=100% style="height:99%" style=table-layout:fixed>
<tr>
<td><div onblur="finalizeVisualEditor()" onkeypress="captureEnterKey()" id="<?=$visualEditor['objectName']?>" style="<?=$visualEditor['styleWYSIWYG']?>;height:100%;overflow:<?=$visualEditor['overflow']?>" contentEditable><?=$visualEditor['defaultContent']?></div><textarea onblur="finalizeVisualEditor()" id="<?=$visualEditor['objectName']?>_code" name="<?=$visualEditor['textareaName']?>" style="<?=$visualEditor['styleTEXTAREA']?>;height:99%;overflow:<?=$visualEditor['overflow']?>"></textarea></div></td>
</tr>
</table>
</span>

<table> 부분에서 width를 fixed 시켰습니다.

-------------------------------------
적용된 것은 홈페이지를 방문해 게시판에 글 써 보세요 ^^