TinyMCE HTML Wysiwyg Editor

• TinyMCE Homepage

• IE에서 첫 글자로 한글을 쓰면 몇글자 쓰다가 안써지는 문제가 발생한다.
• forced_root_block: false가 핵심 해결책이라고 한다.
• forced_root_block에 관하여
• P태그 대신 BR 넣게 하기와, P 태그를 써야만 하는 이유를 참조하여 정확한 원인과 해결책을 찾을 것.

• tinyMCE.init({
     forced_root_block : false,
     force_br_newlines : true,
     force_p_newlines : false
  });

• 저거 보다는 차라리 내용이 비어 있을 경우에 <p></p> 태그를 강제로 넣어주는게 더 나아 보인다.

플러그인은 tinymce 설치 디렉토리 아래의 plugins 디렉토리 아래에 디렉토리채로 복사해 넣으면 된다. 그리고 tinyMCE를 초기화 할 때 아래와 같이 “plugins” 옵션에 넣으면 된다.

  tinyMCE.init({
    theme : "advanced",
    mode : "textareas",
    plugins : "insertdiv,여기에,쉼표로,구분해서,플러그인,디렉토리이름을,적는다",
  });

• Firefox,Chrome,Opera Link auto detect : 링크 문자열을 자동으로 인지하여 <a>태그로 감싼다. IE에서는 원래 자동으로 된다.

• tinyMCE.setContent(“'+input_text+'”); : 에디터에 직접 내용을 넣을 수 있다.
• JavaScript을 이용해 Form을 submit 할 때는 submit 전에 tinyMCE.triggerSave()를 실행해 줘야 한다. triggerSave() 가 원래 textarea에 에디터에서 입력된 내용을 삽입 해 준다.

• http://iamzed.com/2007/06/20/using-jquery-to-skip-the-tinymce-editor-toolbar-when-using-the-tab-key/

• tinyMCE.init({
                  mode : "exact",
                  elements : "about",
                  theme: "advanced",
                  …all your advanced options…
                  init_instance_callback : "setTabIndex"
              });
  function setTabIndex()
              {
                  $(".mceToolbarContainer > *").attr("tabIndex", "-1");
              }

tabIndex 가 중간의 I 가 대문자임에 주의할 것. IE에서는 tabindex로 하면 안된다고함.

• TinyMCE - extended_valid_elements 를 사용한다.

tinyMCE.init({
        ...
        extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});