TinyMCE使用手冊

TinyMCE是一個輕量級的基於瀏覽器的所見即所得 (WYSIWYG)HTML編輯器，支援目前流行的IE、firefox、opera等各種瀏覽器。TinyMCE由JavaScript編寫，功能配置靈活簡單（兩行代碼就可以將編輯器嵌入網頁中），支援AJAX。

以名稱－值屬性方式傳遞給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編碼處理。 3.4.7版本參數為"xml" 例如：<將會變成&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。

  

1、讓TinyMCE使用全路徑，預設情況下TinyMCE會將主機地址（當連結的地址與當前伺服器位址一致的時候）替換掉

1 relative_urls:false,2 remove_script_host:false,

 

2、TinyMCE中日文字型顯示過小解決辦法

解決方案：修改js\themes\advanced\skins\default\content.css中得字型樣式定義，將10px改為12px

1 body, td, pre { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}

 

3、TinyMCE中按斷行符號導致行距過大解決辦法

解決方案：在js\themes\advanced\skins\default\content.css檔案尾部加入下面樣式

1 p { margin: 0;}

 

TinyMCE 的詳細介紹：請點這裡
TinyMCE 的：請點這裡

推薦閱讀：

安裝jira4.1.2forLinux並hack富文字編輯器TinyMCE