TinyMCE使用配置詳解

初始化

在初始化TinyMCE的時候，需要把以下代碼加入到頁面的HEAD標簽中。按以下例子中的設置，所有的TEXTAREA文本域在頁面加載時將被轉換成編輯器。另外還有其他模塊，我們將在後面詳細講述。

<!-- tinyMCE -->

<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">

tinyMCE.init({

mode : "textareas"

});

</script>

<!-- /tinyMCE -->

注意以上紅色部分是tiny_mce.js腳本文件的位置，該文件中包含了編輯器所需要的全部代碼，主題及語言包將在初始化時被加載。

藍色部分是初始化調用，它生成TinyMCE的全局實例，其中的設置及名稱－值屬性將在以後描述。



設置



以名稱－值屬性方式傳遞給tinyMCE的init方法的設置控制著程序的全局行為。所有的鍵及可能的鍵值如下表所示。注意，用[]括起來的名稱是可選的，不是必須的設置。

常規設置 mode Mode可以是以下幾個值之一：



textareas - 頁面加載時把所有TEXTAREA組件轉換成編輯器.

specific_textareas - 將所有"mce_editable"屬性值為true的TEXTAREA轉換成編輯器.

exact - 只轉換在"elements"設置中指定的確切組件. [theme] 指定要使用的主題名稱，主題將被放在TinyMCE的themes目錄下，默認為default。TinyMCE自帶三個內置的主題，它們是simple，default和advanced。

如果你想創建自己的主題，請仔細閱讀文檔的 主題 部分。 [plugins] 此選項是一系列以逗號分隔的主題插件列表（例如，可以只用來擴展圖像對話框）。這些插件覆蓋了主題模板中定義的功能。插件邏輯應該包含在一個叫"editor_plugin.js"的文件中，它是插件目錄中唯一被包含進來的文件。

例如："my_image_dialog,my_link_dialog".

如果你想創建自己的插件，請仔細閱讀文檔的 主題 部分。 [language] TinyMCE中使用的語言包，這應該是像se,uk,us等諸如此類的FN代碼，它被用來從"langs"目錄中獲取語言包，該設置的默認值為"uk".

中文用戶建議您使用"zh-CN" [elements] 以逗號分隔的用來轉換成編輯器的組件列表，該選項僅在"mode"選項被設置成"exact"時使用。該列表中的元素可以是任何有id或name屬性的HTML組件。 [ask] 當"mode"被設置成"textareas"或"specific_textareas"的時候，該選項被應用，詢問用戶輸入框是否將被轉換成編輯器。

如果你想使用這個選項，將它設置為true. [textarea_trigger] textarea（文本域）觸發器的屬性，默認值為"mce_editable"。

該選項僅在"mode"被設置為"specific_textareas"時使用。 [valid_elements] 以逗號分隔開的組件轉換部分的列表。



例如： a[href|target=_blank],strong/b,div[align],br.



以上例子告訴TinyMCE移除所有除了"a, strong, div"和"br"的組件，將元素b轉換成strong，默認target設為"_blank"並保持href、target、align屬性。在匹配組件及屬性的名稱時可以使用像*,+,?這樣的通配符。



字符：

, 各組件定義之間的分隔符。 / 兩個同義組件之間的分隔符。第一個組件是會被用來輸出的那個（即第二個組件被第一個替換）。 | 各屬性定義之間的分隔符。 [ 定義某組件的屬性列表的開始符號。 ] 定義某組件的屬性列表的結束符號。 = 將屬性的默認值設為特定值。例如："target=_blank" : 將屬性的值強行設為特定值。例如："border:0" < 校驗某個屬性的值。例如："target<_blank?_self" ? 屬性校驗值之間的分隔符，見上。

特殊變量：

{$uid} - 產生一個唯一ID號。 例如："p[id:{$uid}]".



此選項的默認值是以下模式：

"a[href|target],strong/b[class],em/i[class],strike[class],u[class],p[class|align],ol,ul,li,br,

img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style],

table[border=0|cellspacing|cellpadding|width|height|class|align],tr[rowspan],

td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align],

address[class|align],h1[class|align],h2[class|align],h3[class|align],

h4[class|align],h5[class|align],h6[class|align],hr".



要包含所有組件及屬性，請使用 *[*] ，這在使用invalid_elements選項時特別有用。 [extended_valid_elements] 向"valid_elements"列表末尾添加可用組件。此選項在你僅僅想往默認列表中增添部分組件時相當有用。

格式與"valid_elements"一致。 [invalid_elements] 輸出時需要排除在外的組件名稱列表，以逗號分隔開。 [trim_span_elements] True/False選項。如果設置為true，不需要的組件將被移除。默認值即為true。 [verify_css_classes] True/False選項。如果設置為true，將會校驗CSS的class屬性。默認值即為true。 [verify_html] True/False選項。代表著HTML內容是否需要校驗。默認值為true。 [urlconvertor_callback] 當清理進程處理URL的時候調用的函數名。此函數必須遵從以下的格式：func(url, node, on_save) ，返回轉換後的URL。此設置專為集成目的而設。參數url代表要轉換的地址，node代表包含URL的那個節點，on_save是一個布爾值（在用戶提交表單時為真）。 [preformatted] True/False選項。如果設置為true，編輯器將把制表符（TAB）轉換成縮進，除此外保持其他whitespace（空白字符、換行等）字符，就如同HTML標簽中的PRE的效果。默認值為false。 [insertlink_callback] 當執行"insertlink"命令時調用的函數名。此函數獲取選定鏈接的地址和目標，返回一個以"href", "target"和 "title"為collection名稱的數組。當使用新窗口時，為了兼容Mozilla，會在window.opener（彈出窗口的母窗口，譯者注）上調用tinyMCE.insertLink。 [insertimage_callback] 當執行"insertimage"命令時調用的函數名。此函數獲取選定圖像的url並返回一個以src和alt為collection名稱的數組。當使用新窗口時，為了兼容Mozilla，會在window.opener上調用tinyMCE.insertImage。

函數格式：insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action). [setupcontent_callback] 當編輯器初始化時調用的函數名。函數格式：setupContentCallback(editor_id, node)，其中editor_id是編輯器的id，node是編輯器所在的body組件節點。 [save_callback] 當執行triggerSave（觸發保存）命令被調用時調用的函數名。函數格式：save(id, content, node)，如果有特定返回值，其值將會被加到HTML表單組件上。所以可以通過此函數來自定義用戶轉換邏輯。 [docs_language] TinyMCE文檔中使用的語言，這應該是像se,uk,us等諸如此類的FN代碼，它被用來從"<theme>/docs/<lang>"目錄中獲取文檔。 該選項的默認值跟language選項一致。 [width] 編輯器的寬度，它默認的寬度是原先被替換的組件寬度。 [height] 編輯器的高度，它默認的高度是原先被替換的組件高度。 [content_css] 編輯窗口中要使用的CSS文件，其路徑應該跟頁面相關。 [popups_css] 像插入鏈接和圖片時的彈出窗口中使用的CSS文件，其路徑應該跟頁面相關。 [editor_css] 編輯器使用的CSS文件，其路徑應該跟頁面相關。 [encoding] 編輯器的輸出編碼，此選項目前只能為"html"或者空。如果設置為"html"，編輯器的輸出將經過HTML編碼處理。

例如：<將會變成&lt;，依此類推。默認值是空。 [debug] True/False選項。如果設置成true，像css文件路徑等調試信息將會被顯示。 [visual] True/False選項。如果設置成true，當邊框設置成0的時候，為達到更好的視覺效果在編輯器中表格會有虛線出現。

默認值為true。 [visual_table_style] 用戶可自定義表格的樣式，默認值為："border: 1px dashed #BBBBBB"。 [add_form_submit_trigger] True/False選項。如果設置成true，將強制進行所有表單的"onsubmit"事件處理並引發保存。此選項默認值為true。 [add_unload_trigger] True/False選項。如果設置成true，在"onunload"事件發生時，當前窗口會引發一個triggerSave調用。此triggerSave調用不會做任何清理工作，因為它是用來處理 前進/後退 按鈕的。此選項默認值為true。 [force_br_newlines] True/False選項。此選項強制編輯器將段落符號(P)替換成換行符(BR)。此選項默認值為false。（實驗階段） [force_p_newlines] True/False選項。如果打開此選項，在按下回車鍵（Enter）時Mozilla/Firefox浏覽器會生成段落符號(P)，在按下Shift+Enter時會生成換行符(BR)。此選項默認為true。 [relative_urls] True/False選項。如果設置成true，絕對路徑將被轉換成相對路徑。默認值為true。 [remove_script_host] True/False選項。在設置成true的情況下，如果URL中的主機名、端口號跟編輯器當前所在一致，它們會被移除。

例如：編輯器所在站點為 http://www.somesite.com ，那麼以下鏈接 http://www.somesite.com/somedir/somepage.html 將會被轉換成 /somedir/somepage.html 。

如果relative_urls被設置成false，此選項默認為true。 [focus_alert] True/False選項。如果設置成true，編輯器在失去焦點的時候就會出現一個煩人的警告框。默認值為true。 [document_base_url] 在將絕對路徑轉換成相對路徑的時候會用到此文檔的URL。這個選項指定了編輯器當前的默認文檔。

注意如果此選項指定到一個域名，請添加協議前綴，並以斜槓結尾。例如：http://www.somehost.com/mydir/ [custom_undo_redo] True/False選項。此選項可以使 撤消/重做 功能更加完善。默認值為true。 [custom_undo_redo_levels] 自定義最多可撤消操作的次數，默認是無限制。 [custom_undo_redo_keyboard_shortcuts] 如果使用，編輯器可以使用Ctrl+Z和Ctrl+Y快捷鍵來實現撤消和重做。默認允許。 [fix_content_duplication] True/False選項。此選項修正了MSIE中一個內容重復的bug。默認啟用，但是為了兼容性也可以禁用(false)。 [directionality] 此選項可以設置像阿拉伯語等語言的文字方向。可能的值為：ltr, rtl。默認值: ltr（從左到右）。 [auto_cleanup_word] 如果啟用，從MS office/Word粘貼的HTML將會自動被清理。此選項默認值為false。

注意：此操作當前僅支持MSIE。 [cleanup_on_startup] 如果啟用，在編輯器初始化時文本域及組件將會被清理。默認值為false。 [inline_styles] 如果啟用，像width,height,vspace,hspace和align等屬性將會被風格屬性替代。默認值為false。

在使用此選項時記得要把風格屬性應用在正確的組件上。 [convert_newlines_to_brs] 如果啟用，所有的\n(新行)將會在編輯器啟動時被轉換成<br />組件。此選項默認值為false。 [auto_reset_designmode] 因為在調用style.display的none/block方法來顯示/隱藏某個TinyMCE編輯器的時候有bug，設計模式需要被重置。此選項一旦啟用，當編輯器聚焦時，將自動重置。默認值為false。 [entities] 一張以字符代碼來查找名稱的表，該表中元素是以逗號分隔開的實體列表。該列表以奇數項、偶數項區分，其中奇數項是被用來轉換的字符代碼，偶數項是代表那個字符代碼的實體名稱。例如："8205,zwj,8206,lrm,8207,rlm,173,shy"。 [cleanup_callback] 自定義清理函數。此選項能讓用戶在默認的清理基礎上有所擴展。此函數調用跟默認的調用是分開的，它並不替換默認的清理函數，而僅僅是擴展。點擊 插件清理 查看更多細節。 主題的高級特定設置 [theme_advanced_toolbar_location] 此選項用來改變工具欄的默認位置。可能的值為："top"和"bottom"。默認值是"bottom"。 [theme_advanced_toolbar_align] 此選項用來設置工具欄的對齊方式是left, center還是right。默認值是center。 [theme_advanced_styles] 此選項可以用來增加風格下拉框中的CSS類和名稱。格式如下："<title>=<class>;.."。

如果沒有指定此選項，主內容部分的CSS類將會被自動導入。

例如："Header 1=header1;Header 2=header2;Header 3=header3" [theme_advanced_buttons1] 工具欄上第一行要包含的按鈕列表，以逗號分隔開。例如："bold,italic,underline"。



允許的按鈕名稱如下：

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 [theme_advanced_buttons2] 同上，差別在於指定的是工具欄第二行。 [theme_advanced_buttons3] 同上，差別在於指定的是工具欄第三行。 [theme_advanced_buttons<N>_add] 向工具欄上特定的第N行中增加額外的控制/按鈕。例如：theme_advaned_buttons3_add : "iespell". [theme_advanced_buttons<N>_add_before] 向工具欄上特定的第N行的默認按鈕前面增加額外的控制/按鈕。例如：theme_advaned_buttons3_add_before : "iespell"。 [theme_advanced_disable] 要禁用的按鈕/組件的列表，以逗號分隔。例如："formatselect". [theme_advanced_source_editor_width] 源文件編輯器窗口的寬度。 [theme_advanced_source_editor_height] 源文件編輯器窗口的高度。 [theme_advanced_path_location] 組件路徑列表的位置，可能的值為："top"或"bottom"。默認值為："none" [theme_advanced_blockformats] formatselect列表要屏蔽的格式列表，以逗號分隔開。默認值：p,address,pre,h1,h2,h3,h4,h5,h6。

接下來請看第2頁精彩內容： http://www.linuxidc.com/Linux/2013-10/91914p2.htm

TinyMCE 的詳細介紹：請點這裡
TinyMCE 的下載地址：請點這裡