tinyMCE的使用方法

這篇文章主要介紹“tinyMCE的使用方法”，在日常操作中，相信很多人在tinyMCE的使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”tinyMCE的使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

公司主營業(yè)務(wù)：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出秦皇島免費(fèi)做網(wǎng)站回饋大家。

tinyMCE使用詳解

初始化

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

代碼如下:

<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>

注意以上紅色部分是tiny_mce.js腳本文件的位置，該文件中包含了編輯器所需要的全部代碼，主題及語言包將在初始化時被加載。
藍(lán)色部分是初始化調(diào)用，它生成TinyMCE的全局實(shí)例，其中的設(shè)置及名稱－值屬性將在以后描述。

設(shè)置

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

常規(guī)設(shè)置
mode	Mode可以是以下幾個值之一： textareas- 頁面加載時把所有TEXTAREA組件轉(zhuǎn)換成編輯器. specific_textareas- 將所有"mce_editable"屬性值為true的TEXTAREA轉(zhuǎn)換成編輯器. exact- 只轉(zhuǎn)換在"elements"設(shè)置中指定的確切組件.
[theme]	指定要使用的主題名稱，主題將被放在TinyMCE的themes目錄下，默認(rèn)為default。TinyMCE自帶三個內(nèi)置的主題，它們是simple，default和advanced。如果你想創(chuàng)建自己的主題，請仔細(xì)閱讀文檔的主題部分。
[plugins]	此選項(xiàng)是一系列以逗號分隔的主題插件列表（例如，可以只用來擴(kuò)展圖像對話框）。這些插件覆蓋了主題模板中定義的功能。插件邏輯應(yīng)該包含在一個叫"editor_plugin.js"的文件中，它是插件目錄中唯一被包含進(jìn)來的文件。例如："my_image_dialog,my_link_dialog". 如果你想創(chuàng)建自己的插件，請仔細(xì)閱讀文檔的主題部分。
[language]	TinyMCE中使用的語言包，這應(yīng)該是像se,uk,us等諸如此類的FN代碼，它被用來從"langs"目錄中獲取語言包，該設(shè)置的默認(rèn)值為"uk". 中文用戶建議您使用"zh-CN"
[elements]	以逗號分隔的用來轉(zhuǎn)換成編輯器的組件列表，該選項(xiàng)僅在"mode"選項(xiàng)被設(shè)置成"exact"時使用。該列表中的元素可以是任何有id或name屬性的HTML組件。
[ask]	當(dāng)"mode"被設(shè)置成"textareas"或"specific_textareas"的時候，該選項(xiàng)被應(yīng)用，詢問用戶輸入框是否將被轉(zhuǎn)換成編輯器。如果你想使用這個選項(xiàng)，將它設(shè)置為true.
[textarea_trigger]	textarea（文本域）觸發(fā)器的屬性，默認(rèn)值為"mce_editable"。該選項(xiàng)僅在"mode"被設(shè)置為"specific_textareas"時使用。
[valid_elements]	以逗號分隔開的組件轉(zhuǎn)換部分的列表。例如： a[href\|target=_blank],strong/b,div[align],br. 以上例子告訴TinyMCE移除所有除了"a, strong, div"和"br"的組件，將元素b轉(zhuǎn)換成strong，默認(rèn)target設(shè)為"_blank"并保持href、target、align屬性。在匹配組件及屬性的名稱時可以使用像,+,?這樣的通配符。字符：* ,各組件定義之間的分隔符。/兩個同義組件之間的分隔符。第一個組件是會被用來輸出的那個（即第二個組件被第一個替換）。\|各屬性定義之間的分隔符。[定義某組件的屬性列表的開始符號。]定義某組件的屬性列表的結(jié)束符號。=將屬性的默認(rèn)值設(shè)為特定值。例如："target=_blank":將屬性的值強(qiáng)行設(shè)為特定值。例如："border:0"<校驗(yàn)?zāi)硞€屬性的值。例如："target<_blank?_self"?屬性校驗(yàn)值之間的分隔符，見上。特殊變量： {$uid} - 產(chǎn)生一個唯一ID號。例如："p[id:{$uid}]". 此選項(xiàng)的默認(rèn)值是以下模式： "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],h2[class\|align],h3[class\|align],h4[class\|align], h5[class\|align],h6[class\|align],h7[class\|align],hr". 要包含所有組件及屬性，請使用 [] ，這在使用invalid_elements選項(xiàng)時特別有用。
[extended_valid_elements]	向"valid_elements"列表末尾添加可用組件。此選項(xiàng)在你僅僅想往默認(rèn)列表中增添部分組件時相當(dāng)有用。格式與"valid_elements"一致。
[invalid_elements]	輸出時需要排除在外的組件名稱列表，以逗號分隔開。
[trim_span_elements]	True/False選項(xiàng)。如果設(shè)置為true，不需要的組件將被移除。默認(rèn)值即為true。
[verify_css_classes]	True/False選項(xiàng)。如果設(shè)置為true，將會校驗(yàn)CSS的class屬性。默認(rèn)值即為true。
[verify_html]	True/False選項(xiàng)。代表著HTML內(nèi)容是否需要校驗(yàn)。默認(rèn)值為true。
[urlconvertor_callback]	當(dāng)清理進(jìn)程處理URL的時候調(diào)用的函數(shù)名。此函數(shù)必須遵從以下的格式：func(url, node, on_save) ，返回轉(zhuǎn)換后的URL。此設(shè)置專為集成目的而設(shè)。參數(shù)url代表要轉(zhuǎn)換的地址，node代表包含URL的那個節(jié)點(diǎn)，on_save是一個布爾值（在用戶提交表單時為真）。
[preformatted]	True/False選項(xiàng)。如果設(shè)置為true，編輯器將把制表符（TAB）轉(zhuǎn)換成縮進(jìn)，除此外保持其他whitespace（空白字符、換行等）字符，就如同HTML標(biāo)簽中的PRE的效果。默認(rèn)值為false。
[insertlink_callback]	當(dāng)執(zhí)行"insertlink"命令時調(diào)用的函數(shù)名。此函數(shù)獲取選定鏈接的地址和目標(biāo)，返回一個以"href", "target"和 "title"為collection名稱的數(shù)組。當(dāng)使用新窗口時，為了兼容Mozilla，會在window.opener（彈出窗口的母窗口，譯者注）上調(diào)用tinyMCE.insertLink。
[insertimage_callback]	當(dāng)執(zhí)行"insertimage"命令時調(diào)用的函數(shù)名。此函數(shù)獲取選定圖像的url并返回一個以src和alt為collection名稱的數(shù)組。當(dāng)使用新窗口時，為了兼容Mozilla，會在window.opener上調(diào)用tinyMCE.insertImage。函數(shù)格式：insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action).
[setupcontent_callback]	當(dāng)編輯器初始化時調(diào)用的函數(shù)名。函數(shù)格式：setupContentCallback(editor_id, node)，其中editor_id是編輯器的id，node是編輯器所在的body組件節(jié)點(diǎn)。
[save_callback]	當(dāng)執(zhí)行triggerSave（觸發(fā)保存）命令被調(diào)用時調(diào)用的函數(shù)名。函數(shù)格式：save(id, content, node)，如果有特定返回值，其值將會被加到HTML表單組件上。所以可以通過此函數(shù)來自定義用戶轉(zhuǎn)換邏輯。
[docs_language]	TinyMCE文檔中使用的語言，這應(yīng)該是像se,uk,us等諸如此類的FN代碼，它被用來從"<theme>/docs/<lang>"目錄中獲取文檔。該選項(xiàng)的默認(rèn)值跟language選項(xiàng)一致。
[width]	編輯器的寬度，它默認(rèn)的寬度是原先被替換的組件寬度。
[height]	編輯器的高度，它默認(rèn)的高度是原先被替換的組件高度。
[content_css]	編輯窗口中要使用的CSS文件，其路徑應(yīng)該跟頁面相關(guān)。
[popups_css]	像插入鏈接和圖片時的彈出窗口中使用的CSS文件，其路徑應(yīng)該跟頁面相關(guān)。
[editor_css]	編輯器使用的CSS文件，其路徑應(yīng)該跟頁面相關(guān)。
[encoding]	編輯器的輸出編碼，此選項(xiàng)目前只能為"html"或者空。如果設(shè)置為"html"，編輯器的輸出將經(jīng)過HTML編碼處理。例如：<將會變成<，依此類推。默認(rèn)值是空。
[debug]	True/False選項(xiàng)。如果設(shè)置成true，像css文件路徑等調(diào)試信息將會被顯示。
[visual]	True/False選項(xiàng)。如果設(shè)置成true，當(dāng)邊框設(shè)置成0的時候，為達(dá)到更好的視覺效果在編輯器中表格會有虛線出現(xiàn)。默認(rèn)值為true。
[visual_table_style]	用戶可自定義表格的樣式，默認(rèn)值為："border: 1px dashed #BBBBBB"。
[add_form_submit_trigger]	True/False選項(xiàng)。如果設(shè)置成true，將強(qiáng)制進(jìn)行所有表單的"onsubmit"事件處理并引發(fā)保存。此選項(xiàng)默認(rèn)值為true。
[add_unload_trigger]	True/False選項(xiàng)。如果設(shè)置成true，在"onunload"事件發(fā)生時，當(dāng)前窗口會引發(fā)一個triggerSave調(diào)用。此triggerSave調(diào)用不會做任何清理工作，因?yàn)樗怯脕硖幚?前進(jìn)/后退按鈕的。此選項(xiàng)默認(rèn)值為true。
[force_br_newlines]	True/False選項(xiàng)。此選項(xiàng)強(qiáng)制編輯器將段落符號(P)替換成換行符(BR)。此選項(xiàng)默認(rèn)值為false。（實(shí)驗(yàn)階段）
[force_p_newlines]	True/False選項(xiàng)。如果打開此選項(xiàng)，在按下回車鍵（Enter）時Mozilla/Firefox瀏覽器會生成段落符號(P)，在按下Shift+Enter時會生成換行符(BR)。此選項(xiàng)默認(rèn)為true。
[relative_urls]	True/False選項(xiàng)。如果設(shè)置成true，絕對路徑將被轉(zhuǎn)換成相對路徑。默認(rèn)值為true。
[remove_script_host]	True/False選項(xiàng)。在設(shè)置成true的情況下，如果URL中的主機(jī)名、端口號跟編輯器當(dāng)前所在一致，它們會被移除。例如：編輯器所在站點(diǎn)為 http://www.somesite.com ，那么以下鏈接 http://www.somesite.com/somedir/somepage.html 將會被轉(zhuǎn)換成 /somedir/somepage.html 。如果relative_urls被設(shè)置成false，此選項(xiàng)默認(rèn)為true。
[focus_alert]	True/False選項(xiàng)。如果設(shè)置成true，編輯器在失去焦點(diǎn)的時候就會出現(xiàn)一個煩人的警告框。默認(rèn)值為true。
[document_base_url]	在將絕對路徑轉(zhuǎn)換成相對路徑的時候會用到此文檔的URL。這個選項(xiàng)指定了編輯器當(dāng)前的默認(rèn)文檔。注意如果此選項(xiàng)指定到一個域名，請?zhí)砑訁f(xié)議前綴，并以斜杠結(jié)尾。例如：http://www.somehost.com/mydir/
[custom_undo_redo]	True/False選項(xiàng)。此選項(xiàng)可以使撤消/重做功能更加完善。默認(rèn)值為true。
[custom_undo_redo_levels]	自定義最多可撤消操作的次數(shù)，默認(rèn)是無限制。
[custom_undo_redo_keyboard_shortcuts]	如果使用，編輯器可以使用Ctrl+Z和Ctrl+Y快捷鍵來實(shí)現(xiàn)撤消和重做。默認(rèn)允許。
[fix_content_duplication]	True/False選項(xiàng)。此選項(xiàng)修正了MSIE中一個內(nèi)容重復(fù)的bug。默認(rèn)啟用，但是為了兼容性也可以禁用(false)。
[directionality]	此選項(xiàng)可以設(shè)置像阿拉伯語等語言的文字方向。可能的值為：ltr, rtl。默認(rèn)值: ltr（從左到右）。
[auto_cleanup_word]	如果啟用，從MS office/Word粘貼的HTML將會自動被清理。此選項(xiàng)默認(rèn)值為false。注意：此操作當(dāng)前僅支持MSIE。
[cleanup_on_startup]	如果啟用，在編輯器初始化時文本域及組件將會被清理。默認(rèn)值為false。
[inline_styles]	如果啟用，像width,height,vspace,hspace和align等屬性將會被風(fēng)格屬性替代。默認(rèn)值為false。在使用此選項(xiàng)時記得要把風(fēng)格屬性應(yīng)用在正確的組件上。
[convert_newlines_to_brs]	如果啟用，所有的\n(新行)將會在編輯器啟動時被轉(zhuǎn)換成<br />組件。此選項(xiàng)默認(rèn)值為false。
[auto_reset_designmode]	因?yàn)樵谡{(diào)用style.display的none/block方法來顯示/隱藏某個TinyMCE編輯器的時候有bug，設(shè)計(jì)模式需要被重置。此選項(xiàng)一旦啟用，當(dāng)編輯器聚焦時，將自動重置。默認(rèn)值為false。
[entities]	一張以字符代碼來查找名稱的表，該表中元素是以逗號分隔開的實(shí)體列表。該列表以奇數(shù)項(xiàng)、偶數(shù)項(xiàng)區(qū)分，其中奇數(shù)項(xiàng)是被用來轉(zhuǎn)換的字符代碼，偶數(shù)項(xiàng)是代表那個字符代碼的實(shí)體名稱。例如："8205,zwj,8206,lrm,8207,rlm,173,shy"。
[cleanup_callback]	自定義清理函數(shù)。此選項(xiàng)能讓用戶在默認(rèn)的清理基礎(chǔ)上有所擴(kuò)展。此函數(shù)調(diào)用跟默認(rèn)的調(diào)用是分開的，它并不替換默認(rèn)的清理函數(shù)，而僅僅是擴(kuò)展。點(diǎn)擊插件清理查看更多細(xì)節(jié)。
主題的高級特定設(shè)置
[theme_advanced_toolbar_location]	此選項(xiàng)用來改變工具欄的默認(rèn)位置?？赡艿闹禐椋?quot;top"和"bottom"。默認(rèn)值是"bottom"。
[theme_advanced_toolbar_align]	此選項(xiàng)用來設(shè)置工具欄的對齊方式是left, center還是right。默認(rèn)值是center。
[theme_advanced_styles]	此選項(xiàng)可以用來增加風(fēng)格下拉框中的CSS類和名稱。格式如下："<title>=<class>;.."。如果沒有指定此選項(xiàng)，主內(nèi)容部分的CSS類將會被自動導(dǎo)入。例如："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行的默認(rè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"。默認(rèn)值為："none"
[theme_advanced_blockformats]	formatselect列表要屏蔽的格式列表，以逗號分隔開。默認(rèn)值：p,address,pre,h2,h3,h4,h5,h6,h7。

以下是一個較為復(fù)雜的初始化例子：

<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "exact",
theme : "mytheme",
language : "se",
elements : "elm1,elm2"
});
</script>


函數(shù) （供高級使用）

TinyMCE有一個全局實(shí)例，它能提供一些可從頁面調(diào)用的公用函數(shù)。

--------------------------------------------------------------------------------
語法： tinyMCE.triggerSave([skip_cleanup]);
描述：進(jìn)行清除操作，并將編輯器內(nèi)容移回到表單域中。tinyMCE通過向表單提交方法中增加觸發(fā)器來自動調(diào)用此函數(shù)。
參數(shù)：
[skip_cleanup] - 禁用保存觸發(fā)器的清除功能，默認(rèn)為false。(可選)

返回：無

--------------------------------------------------------------------------------
語法： tinyMCE.updateContent(form_element_name);
描述：將表單組件的內(nèi)容轉(zhuǎn)移到編輯器中，此操作的功能跟triggerSave()正好相反。當(dāng)你想動態(tài)改變編輯器內(nèi)容時可以使用此方法。
參數(shù)：
form_element_name - 要獲取內(nèi)容的組件所在表單的名稱。
返回：無

--------------------------------------------------------------------------------
語法： tinyMCE.execInstanceCommand(editor_id, command, [user_interface], [value]);
描述：此方法通過editor_id參數(shù)找到某個編輯器實(shí)例，在此編輯器上執(zhí)行一個命令。
參數(shù)：
editor_id - 編輯器實(shí)例的ID或者被替換后的組件id/名稱。
command - 要執(zhí)行的命令。查看execCommand函數(shù)以獲取更多細(xì)節(jié)。
[user_interface] - 是否使用用戶界面。
[value] - 執(zhí)行命令時要傳遞的參數(shù)，例如：一個URL。
返回：無

--------------------------------------------------------------------------------
語法： tinyMCE.execCommand(command, [user_interface], [value]);
描述：此方法在選定編輯器中通過名稱執(zhí)行特定命令。
參數(shù)：
command - 要執(zhí)行的命令，例如："Bold" or "Italic"。你可以通過此連接來查看Mozilla Midas spec。但是tinyMCE也有自身一些特殊的命令如下表所示：

mceLink	打開插入鏈接對話框并插入鏈接。
mceImage	打開插入圖像對話框并插入圖像。
mceCleanup	從HTML代碼中移除不需要的組件和屬性。
mceHelp	打開文檔頁面。
mceInsertTable	在鼠標(biāo)位置插入表格，默認(rèn)尺寸為：2×2。如果execCommand函數(shù)中有指定value參數(shù)，它的格式必須為name/value形式的數(shù)組，其中 name有以下選項(xiàng)：cols, rows, border, cellspacing, cellpadding。border（邊框）的默認(rèn)大小為：0。
mceTableInsertRowBefore	在當(dāng)前鼠標(biāo)所在位置之前插入一行。
mceTableInsertRowAfter	在當(dāng)前鼠標(biāo)所在位置之后插入一行。
mceTableDeleteRow	將當(dāng)前鼠標(biāo)所在行刪除。
mceTableInsertColBefore	在當(dāng)前鼠標(biāo)所在位置之前插入一列。
mceTableInsertColAfter	在當(dāng)前鼠標(biāo)所在位置之后插入一列。
mceTableDeleteCol	將當(dāng)前鼠標(biāo)所在列刪除。
mceAddControl	向編輯器添加組件控制，此編輯器的id/name由value指定。
mceRemoveControl	通過editor_id名稱來移除特定控制。value是要移除的editor_id（編輯器ID），編輯器ID格式如下："mce_editor_<index>"。也可以使用DOM組件的ID和表單名。
mceFocus	使以value的值為ID的編輯器獲得焦點(diǎn)。編輯器ID格式如下："mce_editor_<index>"。也可以使用DOM組件的ID和表單名。
mceSetCSSClass	設(shè)置CSS類屬性，或者在選擇框中創(chuàng)建新的span。value的值是要給選定組件指派的css類名或者要新創(chuàng)建的span組件名稱。
mceInsertContent	在當(dāng)前鼠標(biāo)所在位置插入value的內(nèi)容。
mceReplaceContent	將當(dāng)前選定部分替換為value中的HTML代碼。{$selection}變量由當(dāng)前選定部分的文字內(nèi)容替換。
mceSetAttribute	為當(dāng)前選定組件設(shè)置屬性。此命令的value應(yīng)該是name/value數(shù)組，其參數(shù)如下： name- 要設(shè)置的屬性名。 value- 要設(shè)置的屬性值。 [targets]- 要增加屬性的目標(biāo)組件，默認(rèn)為：p,img,span,div,td,h2,h3,h4,h5,h6,h7,pre,address。使用示例： tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});
mceToggleVisualAid	是否開啟視覺幫助模式
mceAnchor	插入名稱錨點(diǎn)。value是錨點(diǎn)的名稱。
mceResetDesignMode	重置所有編輯器實(shí)例的設(shè)計(jì)模式狀態(tài)。在Firefox中，當(dāng)編輯器被放在制表符中或者用style.display="none/block"來控制隱顯的時候，此命令非常有用。在編輯器重新顯示時調(diào)用此命令。
mceSelectNode	選定value指定的節(jié)點(diǎn)/組件。同時此命令會使編輯器滾動到此組件所在位置。
mceSelectNodeDepth	從當(dāng)前節(jié)點(diǎn)以深度關(guān)系選擇指定的節(jié)點(diǎn)/組件。所以0值會選定當(dāng)前聚焦的節(jié)點(diǎn)。同時此命令會使編輯器滾動到此組件所在位置。

user_interface - 申明某命令是否會顯示用戶界面。True/False選項(xiàng)。

value - 要傳遞給命令的值。例如，插入鏈接時，它就是鏈接的URL。

返回：無

示例：

語法：tinyMCE.insertLink(href, target);

描述：此方法在當(dāng)前選定編輯器實(shí)例的鼠標(biāo)位置插入一個鏈接，或者用新的數(shù)據(jù)來更新已有鏈接。當(dāng)你創(chuàng)建自己的主題時，此方法應(yīng)在插入鏈接的彈出窗口中的OK按鈕按下時被調(diào)用。

參數(shù)：

href - 鏈接的地址/URL。

target - 鏈接的目標(biāo)。

返回：無

語法：tinyMCE.insertImage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);

描述：此方法在當(dāng)前選定編輯器實(shí)例的鼠標(biāo)位置插入圖像，或者用新的數(shù)據(jù)來更新已有圖像。當(dāng)你創(chuàng)建自己的主題時，此方法應(yīng)在插入圖像的彈出窗口中的OK按鈕按下時被調(diào)用。

參數(shù)：

src - 圖像地址。

alt - 圖片的替代文字。

border - 圖像邊框。

hspace - 圖像水平間距。

vspace - 圖像垂直間距。

width - 圖像寬。

height - 圖像高。

align - 圖像對齊方式。

title - 圖像鏈接的標(biāo)題。

onmouseover - 圖像在鼠標(biāo)放上去時的事件處理。

onmouseout - 圖像在鼠標(biāo)移開時的事件處理。

返回：無

語法：tinyMCE.triggerNodeChange();

描述：當(dāng)編輯器發(fā)生外部變化時此方法被調(diào)用。然后此方法回調(diào)主題的"handleNodeChangeCallback"方法。

參數(shù)：None

返回：無

語法：tinyMCE.getContent();

描述：此方法返回當(dāng)前選定編輯器中的HTML內(nèi)容。如果沒有任何選定編輯器，該方法返回null。

參數(shù)：None

返回：當(dāng)前選定編輯器中的HTML內(nèi)容或者null。

語法：tinyMCE.setContent(html);

描述：此方法設(shè)定當(dāng)前選定編輯器的HTML內(nèi)容。

參數(shù)：

html - 要設(shè)定的HTML源代碼。

返回：None.

語法：tinyMCE.getEditorInstance(editor_id);

描述：此方法通過editor_id返回某個編輯器實(shí)例。

參數(shù)：

editor_id - 要獲取的編輯器實(shí)例。

返回：編輯器實(shí)例(TinyMCEControl)。

語法：tinyMCE.importThemeLanguagePack([theme]);

描述：此方法導(dǎo)入主題中特定的語言包。自定義主題中可以調(diào)用此方法。

參數(shù)：

[theme] - 當(dāng)前主題名稱。此選項(xiàng)可選，默認(rèn)為全局的"theme"設(shè)定。此參數(shù)在主題插件中非常有用。

返回：None.

語法：tinyMCE.importPluginLanguagePack(plugin, valid_languages);

描述：此方法導(dǎo)入插件中特定的語言包。自定義插件中可以調(diào)用此方法。

參數(shù)：

plugin - 當(dāng)前插件的名稱。

valid_languages - 以逗號分隔的所支持語言包列表。

返回：None.

語法：tinyMCE.applyTemplate(html);

描述：此方法替換主題中的設(shè)置及語言變量。

參數(shù)：

html - 要替換主題變量的HTML代碼。

返回：轉(zhuǎn)換后的HTML代碼。

語法：tinyMCE.openWindow(template, [args]);

描述：此方法通過從指定的template參數(shù)中獲取width, height及html數(shù)據(jù)來打開新窗口。數(shù)組參數(shù)args中包含要替換的變量名。

還有一些自定義的窗口參數(shù)：

mce_replacevariables - 啟用/禁用HTML文檔中的語言/變量替換。默認(rèn)啟用。

mce_windowresize - 啟用/禁用彈出窗口的自動resize特征，默認(rèn)啟用。

參數(shù)：

template - Name/Value數(shù)組，以width, height, html和file為鍵。

[args] - 包含要替換變量名的Name/Value數(shù)組。模板文件中的鍵值變量被參數(shù)列表所替換。

例如：image.php?src={$src}被替換為：image.php?src=image.gif。

返回：None.

語法：tinyMCE.getWindowArg(name, [default_value]);

描述：此方法根據(jù)name返回窗口參數(shù)，它可以用在主題中的彈出窗口中，以獲取對話框中的參數(shù)。

參數(shù)：

name - 要獲取的窗口參數(shù)的名稱。

[default_value] - 窗口參數(shù)丟失時返回的默認(rèn)值。

返回：窗口參數(shù)的值。

語法：tinyMCE.setWindowArg(name, value);

描述：此方法根據(jù)name設(shè)定窗口參數(shù)，例如它在某插件調(diào)用其他插件時非常有用。

參數(shù)：

name - 要設(shè)置的窗口參數(shù)。

value - 窗口參數(shù)中要設(shè)置的值。

返回：窗口參數(shù)值。

語法：tinyMCE.getParam(name, [default_value], [strip_whitespace]);

描述：此方法返回TinyMCE的配置參數(shù)。

參數(shù)：

name - 要獲取的窗口參數(shù)名。

[default_value] - 窗口參數(shù)丟失時返回的默認(rèn)值。

[strip_whitespace] - 如果為真，所有返回值中的空白字符將會被除去。默認(rèn)：false。

tinyMce使用心得

tinyMce是一款功能強(qiáng)大的基于js的富文本編輯器.
官方主頁：http://www.tinymce.com/
現(xiàn)在最新的版本是3.4.7了
這款編輯器的功能幾乎可以跟微軟的office有的一比，毫不遜色。編輯器里面的各項(xiàng)編輯工具都可以定制，大部分高級功能都是以插件的形式添加進(jìn)來，開發(fā)使用者可以根據(jù)需要添加/刪除自己的功能。
首先下載tinyMce的開發(fā)包(建議下載dev版本，里面有大量的實(shí)例，還可以查看源代碼)
下載鏈接：http://bm7419.com/codes/44180.html http://www.tinymce.com/download/download.php
然后在需要使用的Web頁面添加tinyMce文件
<script type="text/javascript" src="common/tiny_mce/tiny_mce_src.js"></script>
只需要添加一個js文件即可，其他tinyMce需要的css和js它會自己加載。
然后在頁面的<body>中放一個<textarea id="myRTE"></textarea>
最后使用tinyMce的init方法，在方法的配置里綁定那個textarea就可以了。

jsp頁面代碼

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Word processor example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
skin : "o2k7",
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example word content CSS (should be your site CSS) this one removes paragraph margins
content_css : "css/word.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>

</head>
<body>
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h4>Word processor example</h4>
<p>
This page shows you how to configure TinyMCE to work more like common word processors.
There are more examples on how to use TinyMCE in the <a href="http://tinymce.moxiecode.com/examples/">Wiki</a>.
</p>

<textarea id="elm1" name="elm1" rows="15" cols="80" >
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</textarea>

<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
<script type="text/javascript">
if (document.location.protocol == 'file:') {
alert("The examples might not work properly on the local file system due to security settings in your browser. Please use a real webserver.");
}
</script>
</body>
</html>

另外所需的js文件全部在官網(wǎng)下載的tinymce_3.5_dev文件下的jscripts中
將此文件夾放到myeclipse中的webroot下即可

到此，關(guān)于“tinyMCE的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)站欄目：tinyMCE的使用方法
當(dāng)前鏈接：http://bm7419.com/article0/ijphio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、虛擬主機(jī)、動態(tài)網(wǎng)站、App設(shè)計(jì)、軟件開發(fā)、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容