tinyMCE的使用方法

这篇文章主要介绍“tinyMCE的使用方法”，在日常操作中，相信很多人在tinyMCE的使用方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”tinyMCE的使用方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

tinyMCE使用详解

初始化

在初始化TinyMCE的时候，需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置，所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块，我们将在后面详细讲述。

代码如下:

<!-- tinyMCE -->
<script language="javascript" type="text/javascript" class="lazy" data-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方法的设置控制着程序的全局行为。所有的键及可能的键值如下表所示。注意，用[]括起来的名称是可选的，不是必须的设置。

以下是一个较为复杂的初始化例子：
<!-- tinyMCE -->
<script language="javascript" type="text/javascript" class="lazy" data-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也有自身一些特殊的命令如下表所示：

user_interface - 申明某命令是否会显示用户界面。True/False选项。

value - 要传递给命令的值。例如，插入链接时，它就是链接的URL。



返回： 无



示例：

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

描述：此方法在当前选定编辑器实例的鼠标位置插入一个链接，或者用新的数据来更新已有链接。当你创建自己的主题时，此方法应在插入链接的弹出窗口中的OK按钮按下时被调用。

参数：

href - 链接的地址/URL。

target - 链接的目标。

返回： 无

语法： tinyMCE.insertImage(class="lazy" data-src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);

描述：此方法在当前选定编辑器实例的鼠标位置插入图像，或者用新的数据来更新已有图像。当你创建自己的主题时，此方法应在插入图像的弹出窗口中的OK按钮按下时被调用。

参数：

class="lazy" data-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?class="lazy" data-src={$class="lazy" data-src}被替换为：image.php?class="lazy" data-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版本，里面有大量的实例，还可以查看源代码)
下载链接：https://www.yisu.com/codes/44180.html http://www.tinymce.com/download/download.php
然后在需要使用的Web页面添加tinyMce文件
<script type="text/javascript" class="lazy" data-src="common/tiny_mce/tiny_mce_class="lazy" data-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" class="lazy" data-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的使用方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！