사용자 도구

사이트 도구


javascript:editor:tinymce

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판
이전 판
javascript:editor:tinymce [2011/02/08 23:40]
kwon37xi
javascript:editor:tinymce [2011/07/06 11:06] (현재)
kwon37xi
줄 1: 줄 1:
 ====== TinyMCE HTML Wysiwyg Editor ====== ====== TinyMCE HTML Wysiwyg Editor ======
   * [[http://tinymce.moxiecode.com/|TinyMCE Homepage]]   * [[http://tinymce.moxiecode.com/|TinyMCE Homepage]]
 +
 +
 +===== IE에서 한글 첫글자 문제 =====
 +  * IE에서 첫 글자로 한글을 쓰면 몇글자 쓰다가 안써지는 문제가 발생한다.
 +  * ''forced_root_block: false''가 핵심 해결책이라고 한다.
 +  * [[http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/forced_root_block|forced_root_block]]에 관하여
 +  * [[http://wiki.moxiecode.com/index.php/TinyMCE:FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F|P태그 대신 BR 넣게 하기와, P 태그를 써야만 하는 이유]]를 참조하여 정확한 원인과 해결책을 찾을 것.
 +  * <code javascript>
 +tinyMCE.init({
 +   forced_root_block : false,
 +   force_br_newlines : true,
 +   force_p_newlines : false
 +});
 +</code>
 +  * 저거 보다는 차라리 내용이 비어 있을 경우에 ''<p></p>'' 태그를 강제로 넣어주는게 더 나아 보인다.
 +
 +===== Plugins =====
 +==== 설치방법 ====
 +플러그인은 tinymce 설치 디렉토리 아래의 plugins 디렉토리 아래에 디렉토리채로 복사해 넣으면 된다. 그리고 tinyMCE를 초기화 할 때 아래와 같이 "plugins" 옵션에 넣으면 된다.
 +<code javascript>
 +  tinyMCE.init({
 +    theme : "advanced",
 +    mode : "textareas",
 +    plugins : "insertdiv,여기에,쉼표로,구분해서,플러그인,디렉토리이름을,적는다",
 +  });
 +</code>
 +
 +==== 주요 플러그인 ====
 +
 +  * [[http://sourceforge.net/tracker/?func=detail&aid=2770218&group_id=103281&atid=738747|Firefox,Chrome,Opera Link auto detect]] : 링크 문자열을 자동으로 인지하여 <a>태그로 감싼다. IE에서는 원래 자동으로 된다.
  
 ===== 에디터 컨텐츠 제어 ===== ===== 에디터 컨텐츠 제어 =====
줄 25: 줄 55:
  
 **tabIndex** 가 중간의 I 가 대문자임에 주의할 것. IE에서는 tabindex로 하면 안된다고함. **tabIndex** 가 중간의 I 가 대문자임에 주의할 것. IE에서는 tabindex로 하면 안된다고함.
 +
 +===== 허용 HTML Tag/Attribute 추가하기 =====
 +  * [[http://tinymce.moxiecode.com/wiki.php/Configuration:extended_valid_elements|TinyMCE - extended_valid_elements]] 를 사용한다.
 +<code javascript>
 +tinyMCE.init({
 +        ...
 +        extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
 +});
 +</code>
 +
javascript/editor/tinymce.1297176024.txt.gz · 마지막으로 수정됨: 2011/02/08 23:40 저자 kwon37xi