TinyMCE 사용 체험

최근 프로젝트 에서 TinyMCE 를 사용 하면 서 설정 이 매우 간편 하고 브 라 우 저 호환성 이 좋다 는 느낌 을 받 았 습 니 다.처음 사용 하기 때문에 기능 은 항상 사용 중 에 발견 되 고 후속 기능 은 천천히 쓸 것 이다.
위 키 주소:[url]http://wiki.moxiecode.com/[/url]이 주 소 는 정말 유용 합 니 다.많은 도움 을 주 었 습 니 다.
홈 페이지:[url]http://tinymce.moxiecode.com/[/url]가방 을 홈 페이지 에서 다운로드 하 는 것 을 권장 합 니 다.저 는 편리 함 을 얻 기 위해 인터넷 에서 중국어 가방 을 내 렸 습 니 다.그 결과 FF3 에서 전혀 안 되 었 습 니 다.나중에 영어 가방 을 내 린 다음 에 중국어 언어 가방 으로 바 꾸 었 습 니 다.어차피 홈 페이지 에 있 고 상세 한 소개 가 있어 서 매우 간단 합 니 다.
사이트 몇 개 더 추천:[url]http://www.juujo.com/manual/TinyMce/[/url]TinyMCE 중국어 매 뉴 얼
[url]http://www.iwms.net/n2065c17.aspx[/url]tinyMCE 사용 설명
페이지 에 tiny 도입mce_js,그리고 초기 화 합 니 다.다음은 제 프로젝트 에 사 용 된 인 스 턴 스 입 니 다.

tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	language : 'zh',
	force_br_newlines : true,   //    　true: 
  false: 


	plugins : "table, paste",

	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_buttons1 : "bold,italic,underline,sub, sup,justifyleft, justifycenter, justifyright, justifyfull,image,table,charmap",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",   

	relative_urls : false,  //           
	remove_script_host : false,	 //               

	 paste_preprocess : function(pl, o) { // This callback enables you to do regexp replaces on the clipboard contents before it's inserted.
            // Content string containing the HTML from the clipboard
            o.content = TinyMCE_CleanWord(o.content);
        }
});

theme_advanced_buttons 1:항목 에 필요 한 단추 기능 입 니 다.저 는 완전히 사용자 정의 입 니 다.마지막 1,2,3 은 줄 번호 입 니 다.여기 서 선택 할 수 있 는 값 은 다음 과 같 습 니 다.
bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator, col_before, col_after, delete_col,hr,removeformat,sub,sup,formatselect,fonts elect,fonts izeselect,forecolor,charmap,visualaid,spacer,cut,copy,paste,일부 단 추 는 plugins 에 해당 하 는 내용 을 도입 해 야 합 니 다.예 를 들 어 table,paste 등 입 니 다.
효과:
[img]http://dl.iteye.com/upload/attachment/267657/7b8a6e70-c215-33ab-af2e-787a3b2c317a.png[/img]
paste_preprocess:붙 여 넣 을 때 복사 하지 말 라 는 것 을 걸 러 내기 위해 TinyMCECleanWord 는 제 가 실현 하 는 방법 입 니 다.주 현 은 정규 로 교체 방법 을 실 현 했 고 회사 정보 와 관련 되 어 붙 이지 않 습 니 다.
사용 시 plugins 에 paste 모듈 을 도입 하 는 것 을 잊 지 마 세 요.여기 에는 많은 방법 이 있 습 니 다.위 키 를 자세히 보 세 요.
[b]트리거 이벤트 구현[/b]:

   setup : function(ed) {
      ed.onMouseUp.add(function(ed, e) {
          console.debug('Mouse up event: ' + e.target.nodeName);
      });
   }

[b]중국어 글꼴 이 작은 수정[/b]:
수정 tinymce/themes/advanced/skins/default/content.css 의 첫 줄
body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
그 중의 font-size:10px 를 font-size:12px 로 바 꾸 면 됩 니 다.
[b]사용자 정의 단추[/b]

setup : function(ed) {
    // Add a custom button
    ed.addButton('mybutton', {
	title : 'My button',
	image : 'img/example.gif',
	onclick : function() {
		ed.selection.setContent('Hello world!');
	}
    });
}
              Hello world!