TinyMCE使用體驗

最近在項目使用TinyMCE，給我的感覺是配置非常簡便，瀏覽器兼容性較好。因爲也是剛開始使用，功能總是在使用中發現的，後續功能會慢慢來寫的。

wiki地址：[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: <br/>  false: <p>

	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_buttons1：項目中需要的按鈕功能，我的完全是自定義，最後的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, fontselect, fontsizeselect, 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：爲了實現在粘貼的時候過濾掉不讓複製的東西，其中TinyMCE_CleanWord是我自己實現的方法，主現用正則實現了一些替換方法，涉及到公司信息，就不貼出了。
使用時別忘了在plugins中引入paste模塊。此處有較多的方法，詳細見wiki。

[b]實現一個觸發事件[/b]：

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

[b]中文字體偏小的修改[/b]：
修改tiny_mce/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('<strong>Hello world!</strong>');
	}
    });
}
效果是點擊此按鈕在文本中寫入Hello world!