免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

tinyMCE的使用方法

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

公司主營業務:網站制作、網站設計、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳,提高企業的競爭能力。成都創新互聯是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰,讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創新互聯推出秦皇島免費做網站回饋大家。

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方法的設置控制著程序的全局行為。所有的鍵及可能的鍵值如下表所示。注意,用[]括起來的名稱是可選的,不是必須的設置。

常規設置
modeMode可以是以下幾個值之一:



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],h2[class|align],h3[class|align],h4[class|align],

h5[class|align],h6[class|align],h7[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,h2,h3,h4,h5,h6,h7。


以下是一個較為復雜的初始化例子:
<!-- tinyMCE -->
<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>
<!-- /tinyMCE -->

函數 (供高級使用)

TinyMCE有一個全局實例,它能提供一些可從頁面調用的公用函數。

--------------------------------------------------------------------------------
語法: tinyMCE.triggerSave([skip_cleanup]);
描述:進行清除操作,并將編輯器內容移回到表單域中。tinyMCE通過向表單提交方法中增加觸發器來自動調用此函數。
參數:
[skip_cleanup] - 禁用保存觸發器的清除功能,默認為false。(可選)

返回: 無

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

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

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

mceLink打開插入鏈接對話框并插入鏈接。
mceImage打開插入圖像對話框并插入圖像。
mceCleanup從HTML代碼中移除不需要的組件和屬性。
mceHelp打開文檔頁面。
mceInsertTable在鼠標位置插入表格,默認尺寸為:2&times;2。如果execCommand函數中有指定value參數,它的格式必須為name/value形式的數組,其中 name有以下選項:cols, rows, border, cellspacing, cellpadding。border(邊框)的默認大小為:0。
mceTableInsertRowBefore在當前鼠標所在位置之前插入一行。
mceTableInsertRowAfter在當前鼠標所在位置之后插入一行。
mceTableDeleteRow將當前鼠標所在行刪除。
mceTableInsertColBefore在當前鼠標所在位置之前插入一列。
mceTableInsertColAfter在當前鼠標所在位置之后插入一列。
mceTableDeleteCol將當前鼠標所在列刪除。
mceAddControl向編輯器添加組件控制,此編輯器的id/name由value指定。
mceRemoveControl通過editor_id名稱來移除特定控制。value是要移除的editor_id(編輯器ID),編輯器ID格式如下:"mce_editor_<index>"。

也可以使用DOM組件的ID和表單名。
mceFocus使以value的值為ID的編輯器獲得焦點。編輯器ID格式如下:"mce_editor_<index>"。也可以使用DOM組件的ID和表單名。
mceSetCSSClass設置CSS類屬性,或者在選擇框中創建新的span。value的值是要給選定組件指派的css類名或者要新創建的span組件名稱。
mceInsertContent在當前鼠標所在位置插入value的內容。
mceReplaceContent將當前選定部分替換為value中的HTML代碼。{$selection}變量由當前選定部分的文字內容替換。
mceSetAttribute

為當前選定組件設置屬性。此命令的value應該是name/value數組,其參數如下:



name- 要設置的屬性名。

value- 要設置的屬性值。

[targets]- 要增加屬性的目標組件,默認為:p,img,span,div,td,h2,h3,h4,h5,h6,h7,pre,address。



使用示例:

tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});

mceToggleVisualAid

是否開啟視覺幫助模式

mceAnchor

插入名稱錨點。value是錨點的名稱。

mceResetDesignMode

重置所有編輯器實例的設計模式狀態。在Firefox中,當編輯器被放在制表符中或者用style.display="none/block"來控制隱顯的時候,此命令非常有用。在編輯器重新顯示時調用此命令。

mceSelectNode

選定value指定的節點/組件。同時此命令會使編輯器滾動到此組件所在位置。

mceSelectNodeDepth

從當前節點以深度關系選擇指定的節點/組件。所以0值會選定當前聚焦的節點。同時此命令會使編輯器滾動到此組件所在位置。

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

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



返回:



示例:

<a href="javascript :tinymce.execCommand('Bold');">[Do bold]</a>

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

描述:此方法在當前選定編輯器實例的鼠標位置插入一個鏈接,或者用新的數據來更新已有鏈接。當你創建自己的主題時,此方法應在插入鏈接的彈出窗口中的OK按鈕按下時被調用。

參數:

href - 鏈接的地址/URL。

target - 鏈接的目標。

返回:


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

描述:此方法在當前選定編輯器實例的鼠標位置插入圖像,或者用新的數據來更新已有圖像。當你創建自己的主題時,此方法應在插入圖像的彈出窗口中的OK按鈕按下時被調用。

參數:

src - 圖像地址。

alt - 圖片的替代文字。

border - 圖像邊框。

hspace - 圖像水平間距。

vspace - 圖像垂直間距。

width - 圖像寬。

height - 圖像高。

align - 圖像對齊方式。

title - 圖像鏈接的標題。

onmouseover - 圖像在鼠標放上去時的事件處理。

onmouseout - 圖像在鼠標移開時的事件處理。

返回:


語法:tinyMCE.triggerNodeChange();

描述:當編輯器發生外部變化時此方法被調用。然后此方法回調主題的"handleNodeChangeCallback"方法。

參數:None

返回:


語法:tinyMCE.getContent();

描述:此方法返回當前選定編輯器中的HTML內容。如果沒有任何選定編輯器,該方法返回null。

參數:None

返回:當前選定編輯器中的HTML內容或者null。


語法:tinyMCE.setContent(html);

描述:此方法設定當前選定編輯器的HTML內容。

參數:

html - 要設定的HTML源代碼。

返回:None.


語法:tinyMCE.getEditorInstance(editor_id);

描述:此方法通過editor_id返回某個編輯器實例。



參數:

editor_id - 要獲取的編輯器實例。

返回:編輯器實例(TinyMCEControl)。


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

描述:此方法導入主題中特定的語言包。自定義主題中可以調用此方法。

參數:

[theme] - 當前主題名稱。此選項可選,默認為全局的"theme"設定。此參數在主題插件中非常有用。

返回:None.


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

描述:此方法導入插件中特定的語言包。自定義插件中可以調用此方法。

參數:

plugin - 當前插件的名稱。

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

返回:None.


語法:tinyMCE.applyTemplate(html);

描述:此方法替換主題中的設置及語言變量。

參數:

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

返回:轉換后的HTML代碼。


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

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

還有一些自定義的窗口參數:

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

mce_windowresize - 啟用/禁用彈出窗口的自動resize特征,默認啟用。

參數:

template - Name/Value數組,以width, height, html和file為鍵。

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

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

返回:None.


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

描述:此方法根據name返回窗口參數,它可以用在主題中的彈出窗口中,以獲取對話框中的參數。

參數:

name - 要獲取的窗口參數的名稱。

[default_value] - 窗口參數丟失時返回的默認值。

返回:窗口參數的值。


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

描述:此方法根據name設定窗口參數,例如它在某插件調用其他插件時非常有用。

參數:

name - 要設置的窗口參數。

value - 窗口參數中要設置的值。

返回:窗口參數值。


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

描述:此方法返回TinyMCE的配置參數。

參數:

name - 要獲取的窗口參數名。

[default_value] - 窗口參數丟失時返回的默認值。

[strip_whitespace] - 如果為真,所有返回值中的空白字符將會被除去。默認:false。

tinyMce使用心得

tinyMce是一款功能強大的基于js的富文本編輯器.
官方主頁:http://www.tinymce.com/
現在最新的版本是3.4.7了
這款編輯器的功能幾乎可以跟微軟的office有的一比,毫不遜色。編輯器里面的各項編輯工具都可以定制,大部分高級功能都是以插件的形式添加進來,開發使用者可以根據需要添加/刪除自己的功能。
首先下載tinyMce的開發包(建議下載dev版本,里面有大量的實例,還可以查看源代碼)
下載鏈接:http://m.newbst.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" />
<!-- TinyMCE -->
<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>
<!-- /TinyMCE -->
</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>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="15" cols="80" >
 &lt;p&gt;This is the first paragraph.&lt;/p&gt;
 &lt;p&gt;This is the second paragraph.&lt;/p&gt;
 &lt;p&gt;This is the third paragraph.&lt;/p&gt;
</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文件全部在官網下載的tinymce_3.5_dev文件下的jscripts中
將此文件夾放到myeclipse中的webroot下即可

到此,關于“tinyMCE的使用方法”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注創新互聯網站,小編會繼續努力為大家帶來更多實用的文章!

網站欄目:tinyMCE的使用方法
當前鏈接:http://m.newbst.com/article0/ijphio.html

成都網站建設公司_創新互聯,為您提供網站維護虛擬主機動態網站App設計軟件開發全網營銷推廣

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都seo排名網站優化