Tiny MCE

3010938 Tiny MCE 3011010 2009-06-23T10:40:24Z http://susukang98.springnote.com/pages/3010938 2009-03-30T02:20:35Z   아직 까지는 정말 좋은 WYSIWYG Editor 인듯   <h6>Tiny MCE Download 및 설치하기</h6>   <ul> <li> 다운로드 받는다. (난 Development package를 받았다.)  -> <a href="http://tinymce.moxiecode.com/download.php">http://tinymce.moxiecode.com/download.php</a> </li> </ul>   <ul> <li>압축을 풀고 tinymce\jscript\tiny_mce폴더 하위의 모든 파일을 적당한 위치에 복사한다.</li> </ul>   <ul> <li>한국어 지원 페키지를 다운 받는다. ( 페키지의 폴더 구조와 똑같이 tiny_mce의 폴더에 엎어친다. )</li> </ul>   -> <a href="http://tinymce.moxiecode.com/download_i18n.php">http://tinymce.moxiecode.com/download_i18n.php</a>   <ul> <li>에디터를 붙일 소스에 tinymce\examples\full.htm의 아래 있는 두 부분을 적용할 페이지에 복사한다.</li> </ul>   <ul> <li>게시판을 붙이고 싶은 페이지를 다음과 같이 수정한다. [페이지에 포함되어 있는 textarea가 에디터로 변한다.]</li> </ul>   Script Include 부분 <ol class="code"> <li> <script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript">  tinyMCE.init({   // General options   mode : "textareas",   theme : "advanced",</li> <li>  //한국어 지원 페키지 설치후 이렇게 :D</li> <li>  language : "ko",</li> <li>  //IE에서 한글입력 문제 해결을 위해</li> <li>   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",</li> <li>  // 길이를 맞추기</li> <li>  height : "380",</li> <li>  // 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",</li> <li>  theme_advanced_toolbar_location : "top",   theme_advanced_toolbar_align : "left",</li> <li>  // 한글 폰트들 추가</li> <li>  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", </li> <li>  // 리사이즈 불가로 바꿈   theme_advanced_resizing : false,</li> <li>  // Example content CSS (should be your site CSS)</li> <li>  // 뷰페이지에서 보일 css로 바꾼다.   content_css : "css/content.css", // -> content_css : "/css/sub.css",</li> <li>  // 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> </li> </ol>   <ul> <li>메뉴설정과 몇몇 개를 바꿔주면 된다. 사용하기 정말 쉽게 만들었네.. @.@a ㅋㅋ</li> </ul>   <h6>TinyMCE IE에서 한글처리 문제</h6>   <a href="http://sirini.net/blog/?p=760">http://sirini.net/blog/?p=760</a>   <h6>TinyMCE에 Validator를 꼽는다면</h6>   TinyMCE는 Textarea가 아니다. 에디터형태의 HTML코드와 Javascript이다. 동적으로 Textarea를 안보이게 하여 기존 Textarea의 Content를 검사해보면 언제나 empty string으로 되어 있는데 validator에서 TinyMCE의 Contents를 textarea의 content에 복사를 해야 기본 validator의 코드가 동작 할 것이다.   <ol class="code"> <li>// 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;     }    }   }</li> <li>}</li> </ol>   <h6>팝업에 써있는 글씨가 너무 작아서 안보일 때</h6>   옵션을 이용한 방법을 못찾았다. 그냥 내부 dialog의 css를 고쳐서 사용했음.   <ol class="code"> <li>td {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;} //18번째 라인</li> <li>fieldset {margin:0; padding:4px; border:1px solid #919B9C; font-family:Verdana, Arial; font-size:12px;} // 25번째 라인</li> <li>input, select, textarea {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;} // 31번째 라인</li> </ol> js\tiny_mce\themes\advanced\skins\default\dialog.css   몇개를 고쳤는지 기억이 ~.~a 그냥 firebug같은 웹툴로 보면서 고치삼   <h6>tinyMCE Table cell resizing</h6>    <a href="http://tinymce.moxiecode.com/punbb/viewtopic.php?id=16379">http://tinymce.moxiecode.com/punbb/viewtopic.php?id=16379</a>  http://susukang98.myid.net/ http://susukang98.myid.net/ 66