tinyMCE的使用方法

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

tinyMCE使用詳解

初始化

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

代碼如下:

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

設(shè)置

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

以下是一個較為復(fù)雜的初始化例子：
<!-- 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 -->

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

TinyMCE有一個全局實例，它能提供一些可從頁面調(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ù)找到某個編輯器實例，在此編輯器上執(zhí)行一個命令。
參數(shù)：
editor_id - 編輯器實例的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也有自身一些特殊的命令如下表所示：

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

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



返回： 無



示例：

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

描述：此方法在當(dāng)前選定編輯器實例的鼠標(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)前選定編輯器實例的鼠標(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ù)：

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

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

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

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

參數(shù)：

[theme] - 當(dā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是一款功能強大的基于js的富文本編輯器.
官方主頁：http://www.tinymce.com/
現(xiàn)在最新的版本是3.4.7了
這款編輯器的功能幾乎可以跟微軟的office有的一比，毫不遜色。編輯器里面的各項編輯工具都可以定制，大部分高級功能都是以插件的形式添加進(jìn)來，開發(fā)使用者可以根據(jù)需要添加/刪除自己的功能。
首先下載tinyMce的開發(fā)包(建議下載dev版本，里面有大量的實例，還可以查看源代碼)
下載鏈接：http://kemok4.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文件全部在官網(wǎng)下載的tinymce_3.5_dev文件下的jscripts中
將此文件夾放到myeclipse中的webroot下即可

到此，關(guān)于“tinyMCE的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>