Tiny MCE

 

아직 까지는 정말 좋은 WYSIWYG Editor 인듯

 

Tiny MCE Download 및 설치하기

 

• 다운로드 받는다. (난 Development package를 받았다.)

   -> http://tinymce.moxiecode.com/download.php

 

• 압축을 풀고 tinymce\jscript\tiny_mce폴더 하위의 모든 파일을 적당한 위치에 복사한다.

 

• 한국어 지원 페키지를 다운 받는다. ( 페키지의 폴더 구조와 똑같이 tiny_mce의 폴더에 엎어친다. )

  -> http://tinymce.moxiecode.com/download_i18n.php

 

• 에디터를 붙일 소스에 tinymce\examples\full.htm의 아래 있는 두 부분을 적용할 페이지에 복사한다.

 

• 게시판을 붙이고 싶은 페이지를 다음과 같이 수정한다. [페이지에 포함되어 있는 textarea가 에디터로 변한다.]

 

Script Include 부분

1. <!-- TinyMCE -->
   <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
   <script type="text/javascript">
    tinyMCE.init({
     // General options
     mode : "textareas",
     theme : "advanced",
2.   //한국어 지원 페키지 설치후 이렇게 :D
3.   language : "ko",
4.   //IE에서 한글입력 문제 해결을 위해
5.    forced_root_block : false,
     plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
6.   // 길이를 맞추기
7.   height : "380",
8.   // Theme options
     theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
     theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
     theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
     theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
9.   theme_advanced_toolbar_location : "top",
     theme_advanced_toolbar_align : "left",
10.   // 한글 폰트들 추가
11.   theme_advanced_fonts : "굴림=굴림;굴림체=굴림체;궁서=궁서;궁서체=궁서체;돋움=돋움;돋움체=돋움체;바탕=바탕;바탕체=바탕체;Arial=Arial;Comic Sans MS='Comic Sans MS';Courier New='Courier New';Tahoma=Tahoma;Times New Roman='Times New Roman';Verdana=Verdana",
    
    
12.   // 리사이즈 불가로 바꿈
      theme_advanced_resizing : false,
13.   // Example content CSS (should be your site CSS)
14.   // 뷰페이지에서 보일 css로 바꾼다.
      content_css : "css/content.css", // -> content_css : "/css/sub.css",
15.   // Drop lists for link/image/media/template dialogs
      template_external_list_url : "lists/template_list.js",
      external_link_list_url : "lists/link_list.js",
      external_image_list_url : "lists/image_list.js",
      media_external_list_url : "lists/media_list.js"
     });
    </script>
    <!-- /TinyMCE -->

 

• 메뉴설정과 몇몇 개를 바꿔주면 된다. 사용하기 정말 쉽게 만들었네.. @.@a ㅋㅋ

 

TinyMCE IE에서 한글처리 문제

 

http://sirini.net/blog/?p=760

 

TinyMCE에 Validator를 꼽는다면

 

TinyMCE는 Textarea가 아니다. 에디터형태의 HTML코드와 Javascript이다.

동적으로 Textarea를 안보이게 하여 기존 Textarea의 Content를 검사해보면 언제나 empty string으로 되어 있는데

validator에서 TinyMCE의 Contents를 textarea의 content에 복사를 해야 기본 validator의 코드가 동작 할 것이다.

 

1. // check validation
    function valid() {
        if($('subject')) {
      if( $F('subject') == "" ) {
       alert('제목을 입력하세요.');
       $('subject').focus();
       return false;
      }
     }
     if($('content')) {
      // tinyMCE Contents를 content textarea로 assign start
      ed = tinyMCE.getInstanceById('content');
      if (ed) {
       $("content").value = ed.getContent();
      }
      // tinyMCE Contents를 content textarea로 assign end
      if( $F('content') == "" ) {
       alert('본문을 입력하세요.');
       return false;
      } else {
       if ( $F('content').length > 1000 ){
        alert('1000 자 까지만 입력이 가능합니다.');
        return false;
       }
      }
     }
2. }

 

팝업에 써있는 글씨가 너무 작아서 안보일 때

 

옵션을 이용한 방법을 못찾았다. 그냥 내부 dialog의 css를 고쳐서 사용했음.

 

1. td {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;} //18번째 라인
2. fieldset {margin:0; padding:4px; border:1px solid #919B9C; font-family:Verdana, Arial; font-size:12px;} // 25번째 라인
3. input, select, textarea {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;} // 31번째 라인

js\tiny_mce\themes\advanced\skins\default\dialog.css

 

몇개를 고쳤는지 기억이 ~.~a 그냥 firebug같은 웹툴로 보면서 고치삼

 

tinyMCE Table cell resizing

 

 http://tinymce.moxiecode.com/punbb/viewtopic.php?id=16379