TinyMCE（富文本编辑器）在Asp.Net中的使用方法

from:http://tangb4c.yo2.cn/archives/633878

04月 22nd, 2008

现在做网页，用FCKEditor用得比较多，它的实现原理是在要加入FCKEditor的地方加入一个iframe,并将其src指向FCKeditor/editor/fckeditor.html?InstanceName=commodityBrief&Toolbar=Default，至于后面的参数，根据情况不同，参数传递得不一样，然后里面用Table来实现顶部的工具栏，接着下面再用一个iframe,src指向fckblank.html，来实现编辑区。

 

 

整体上显得有些臃肿。于是找了找其它的HTML编辑器，大概有FreeTextBox,TinyMCE,这里要介绍的就是TinyMCE。这是一款基于JS的编辑器，网方介绍如下：

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

 

优点（我的第一印象）：

1. 生成的代码简洁，默认皮肤简单明了;
2. 在Asp.Net中使用方便，无须太多设置。

在Asp.Net中的使用方法其实挺简单的，不过就琢磨这个，花了大概1~2个小时的时间，所以在这里写下来，以帮助遇到同样问题的人

从官方网站下载TinyMCE(http://tinymce.moxiecode.com/download.php),然后将里面的jscripts目录拷到你的网站目录

假设你的a.aspx页面中，某一个地方需要用到编辑器，则在此位置加入

<asp:TextBox ID=”brand” TextMode=”MultiLine” runat=”server” />

并同时在header里加入：

<script src=”../js/tiny_mce/tiny_mce_src.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
    tinyMCE.init({
    mode : “textareas”,
    theme : “simple”
    });
</script>

运行页面，即可以看到一个编辑器出现了，并且你在服务端可以通过brand.Text来获取值(你可能会看到一个出错的提示，这时只需要将.aspx最开始的<%@ Page 里加入ValidateRequest=”false”,即可)

当然，如果你页面中有多个textareas,你可能只希望某一个用编辑器代替，则上面的mode一行改为:

mode : "exact",elements : “对应的ID”

需要其它的用法，可以到官方网站查看

----------------------------------------------------------------

相关资源收集:

TinyMCE 中文手册 http://www.inpeck.com/TinyMceManual/ 

tinymce中几个比较有用的插件: http://joom.org.ru/home/article/14-tinymce-plugin.html 

在线编辑器 TinyMCE 3 的简体中文语言包: http://www.metalstar.net/?d=86 

tinymce中文字体过小解决方法  http://www.humker.com/2008/03/07/tinymce-chinese-font-size