Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

FCKeditor 관련 TIP 본문

Tool/other

FCKeditor 관련 TIP

BeOne 2007. 10. 15. 16:24

저도 FCKeditor을 1.6부터 2.1까지 사용했었는데.. 갠적으로 2.1은 모질라와 기능이 거의 완전 호환되더군요..

좀 사용한지 오래되긴했지만.. 2.1버전에서 추가로 작업한 팁을 올려봅니다.

뭣이냐 하면.. 에디터에서 기능 추가라고 할수있는데.. FCKeditor로 특정 기능 버튼을 추가한후 에디터의 바디에 html을 삽입하는 기능입니당.


1) 먼저 에디터에 버튼을 추가합니다.

 - fckconfig.js 의 FCKConfig.ToolbarSets["Default"] 에 추가로 값을 삽입합니다.

다음과같이..

['Media','FormType'] //미디어 삽입, 게시판 문서양식 추가 moons
['About']
] ;


2) 버튼이미지를 만듭니다. 이미지 이름은 media.gif, formtype.gif(전부소문자로) 만드신후 editor/skins/밑에 스킨별로 넣습니다.


3) fckeditorcode_ie_2.js(익스전용), 또는 fckeditorcode_gecko_2.js(모질라용) 의 스크립트파일에 내용을 추가합니다.(함수 잘찾아야합니다. 배포된 소스에 indent가 안되있으므로 툴을써서 indent하시든가.. 아님 수동으로 -_-)

FCKCommands.GetCommand=function(commandName) 에 추가로 삽입합니다.

case 'Media':oCommand=new FCKDialogCommand('Media','미디어삽입','/bbs/form/mediaForm.jsp',450,400);//moons add
  break;
  case 'FormType':oCommand=new FCKDialogCommand('FormType','문서양식','/bbs/form/bbsFormType.html',450,400);//moons add
  break;


FCKToolbarItems.GetItem=function(itemName)에 추가로 삽입합니다.

case 'Media':oItem=new FCKToolbarButton('Media','미디어삽입');//moons add
  break;
  case 'FormType':oItem=new FCKToolbarButton('FormType','문서양식');//moons add
  break;


====== 여기까지 하면 일단 기능버튼은 떡 튀어나옵니다

그럼 버튼을 누르면 다이얼로그 창이뜨도록 빨간색파일인 bbsFormType.html 을 만듭니다.


====bbsFormType.html=====

<body style="OVERFLOW: hidden" scroll="no">
<table height="100%" width="100%">
<tr>
 <td align="center">
 <table border="0" cellpadding="0" cellspacing="0" width="80%">
 <tr>
  <td>
 
  <a target='_balnk' href="javascript:Ok('formType1')">1) 일일 작업일지</a><br><br>
  <a target='_balnk' href="javascript:Ok('formType2')">2) 주간 작업일지</a>
  <iframe frameborder=0 framespacing=0 marginheight=0 marginwidth=0 scrolling=no vspace=0 style=display:none
  name="formType1" width=100% height=100% src="/bbs/form/form1.jsp">
  </iframe>
  <iframe frameborder=0 framespacing=0 marginheight=0 marginwidth=0 scrolling=no vspace=0 style=display:none
  name="formType2" width=100% height=100% src="/bbs/form/form2.jsp">
  </iframe>
  </td>
 </tr>
 </table>
 </td>
</tr>
</table>
</body>

// iframe형식으로 여러개의 문서양식을 추가할수가 있습니다.

//다만 양식을 만들때 해당 html 을 밑에 빨간색으로 나와있는 값과 매칭되게 div 아이디로 감싸줘야합니다..

<div id=form1>html 내용</div> <-- 요런식으로.

// 마지막으로 Ok함수를 호출했을때 FCKeditor의 바디안에 넣을수 있게 스크립트를 만듭니다.


<script src="/public/fckEx/editor/dialog/common/fck_dialog_common.js" type="text/javascript"></script>
<script type="text/javascript">
var oEditor = window.parent.InnerDialogLoaded() ;
var oDOM = oEditor.FCK.EditorDocument ;
var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;

window.onload = function()
{
 // First of all, translate the dialog box texts
 oEditor.FCKLanguageManager.TranslatePage(document) ;

 if ( oActiveEl && oActiveEl.tagName == 'A' && oActiveEl.name.length > 0 && oActiveEl.getAttribute('href').length == 0 )
  GetE('txtName').value = oActiveEl.name ;
 else
  oActiveEl = null ;

 window.parent.SetOkButton( true ) ;
}

function Ok(ftype)
{
 var formType = '';
 
 if(ftype == 'undefined' || ftype == null)
 {
  alert('양식을 선택하세요');
  return;
 }
 
 switch(ftype)
 {
  case 'formType1' : fromType = formType1.document.getElementById("form1").innerHTML;
  break;
  case 'formType2' : fromType = formType2.document.getElementById("form2").innerHTML;
   break;
 }
 oEditor.FCK.InsertHtml( fromType );
 window.close();
 return true ;
 
}

</script>


//이외에 자잘한 버그를 수정했는데 표시를 안해놔서 ㅡㅜ

//미디어 삽입은 관련 라이브러리(cos.jar)와 실제로 미디어업로드를 구현해야 하므로  여기서는 하지 않겠습니다.


도움이 될까 몰겠습니다..


출처: http://okjsp.pe.kr/bbs?act=VIEW&seq=65503&bbs=bbs4&keyfield=content&keyword=&pg=0

'Tool > other' 카테고리의 다른 글

FCKeditor 한글 이미지 업로드 후 깨진다면...?  (0) 2007.10.15
FCKeditor java 버전 설치 문서  (0) 2007.10.15
WYSWYG(위지윅) 에디터  (1) 2007.10.15
fck관련 자료  (0) 2007.10.15
FCK 에디터  (0) 2007.10.15
'Tool/other' Related Articles more