The problem

The problem is that with images on hosted environments on IIS 6, it’s impossible to control the serving of them without redirecting them through an HTTP handler. That’s not a good idea for several reasons:

• It adds unnecessary overhead by going through the ASP.NET ISAPI
• You need to add custom code to handle the requests
• You need to change the URL from .gif to .gif.axd or similar

Here is what YSlow finds on my website that needs the expires header set to a far future date:

As you can see, it is all my static images that lacks the expires header.

The solution

If you run IIS 6 there is no good way of adding an expires header to images unless you have control over the IIS. If your site is hosted then you probably have no control at all. If you are using IIS 7 however, you can very easily add the header in your web.config’s system.webServer section like so:

<staticContent>
 <clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />
</staticContent>

What happens is that all static content will now have an expires HTTP header set to the year 2020. Static content means anything that isn’t served through the ASP.NET engine such as images, script files and styles sheets. This is one of the very easy tricks that will increase the performance of your site as well as your YSlow score.

　　TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。

　　使用:

　　1、首先将TinyMCE解压缩，会建立如下的目录结构:

　　/tinymce/

　　/tinymce/docs/

　　/tinymce/docs/zh_cn/

　　/tinymce/examples/

　　/tinymce/examples/zh_cn/

　　/tinymce/jscripts/

　　/tinymce/jscripts/tiny_mce/

　　/tinymce/jscripts/tiny_mce/langs/

　　/tinymce/jscripts/tiny_mce/plugins/

　　/tinymce/jscripts/tiny_mce/plugins/

　　/tinymce/jscripts/tiny_mce/themes/

　　/tinymce/jscripts/tiny_mce/themes/advanced/

　　/tinymce/jscripts/tiny_mce/themes/default/

　　/tinymce/jscripts/tiny_mce/themes/simple/

　　其中docs/目录下是TinyMCE的说明文档，examples/目录下是4个实例页面，而jscripts/目录下则是真正的JS文件。实际使用时候只需要将jscripts/目录上传到服务器上即可。

　　2、然后在需要使用TinyMCE的页面里加入如下的JS代码:

　　这里假设页面与jscripts/处于同一目录下，否则请修改代码里的路径。

　　现在页面里所有的textarea元素就会被渲染成TinyMCE实例。

　　3、初始化配置介绍:

　　tinyMCE.init({

　　mode : "exact",

　　elements : "example_textarea",

　　theme : "advanced",

　　language :"zh_cn",

　　plugins : "flash,emotions,paste",

　　theme_advanced_buttons1 : "bold,italic,underline,

　　strikethrough, separator, forecolor,backcolor,

　　fontselect,fontsizeselect",

　　theme_advanced_buttons2_add_before: "cut,copy,

　　pastetext,separator",

　　theme_advanced_buttons2 : "undo,redo,separator,hr,

　　link,unlink,image,flash,separator",

　　theme_advanced_buttons2_add :"code,emotions,charmap",

　　theme_advanced_buttons3 : "",

　　theme_advanced_toolbar_location : "bottom",

　　theme_advanced_toolbar_align : "center",

　　relative_urls : false,

　　remove_script_host : false

　　});

　　引用内容

　　mode与elements是搭配使用的，用来指定渲染name在elements中的HTML元素为TinyMCE编辑器(可以是DIV或者Textarea)，比如:

　　mode : "exact",elements : "example_textarea"

　　也可以单独用 mode : "textareas",这样页面中所有的Textarea元素都会被渲染。

　　theme 可以是advanced或者simple(受功能限制),也可以自定义主题。

　　language 常用选择可以是:en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf8(和语言包名字对应)

　　plugins 用来指定加载相应的插件，以提供特别功能

　　theme_advanced_buttons 后面的数字用来指定工具栏的第几行，前3行可以不写，系统会自动用默认图标填在前3个工具栏，如果你不想显示前3行，可以像例子里面一样这样写:theme_advanced_buttons3 : "",_add_before后缀指在默认工具栏前面加图标，_add后缀指在默认工具栏后面加图标，具体每个按钮资料可以查看文档(/doc目录)。

　　theme_advanced_toolbar_location和theme_advanced_toolbar_align很简单，一看就明白。

　　relative_urls : false,remove_script_host : false一般也配对使用，因为TinyMce会自动把本地链接改成相对链接的形式，比如会把绝对路径http://www.jacklam.cn /2006/03/abc.html改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改写了。

1.先讲怎么设置TinyMce编辑器的内容
    （1）如果在初始化编辑器之前，已经给编辑器所处的控件设置了内容，那么TinyMce在初始化的时候，会自动获取控件的内容。
    （2）在客户端可以用下面的函数来随时获取内容：

    <script language="javascript" type="text/javascript">
    <!--
        //功能：获取TinyMce编辑器的内容
        //参数：editorId——编辑器的id
        //返回：内容字符串；如果失败，返回空字符串
        function GetTinyMceContent(editorId)
        ...{
            return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
        }
       
        //功能：设置TinyMce编辑器的内容
        //参数：editorId——编辑器的id
        //        content——内容
        //返回：（无）
        function SetTinyMceContent(editorId,content)
        ...{
            tinyMCE.getInstanceById(editorId).getBody().innerHTML=content;
        }
    //-->
</script>
2.我们再来看看如何获取TinyMce编辑器的内容
    （1）在页面提交（即执行Submit()）之后，TinyMce会自动将内容写入到控件中。
    （2）在客户端还可以用下面的函数来随时获取编辑器的内容

<script language="javascript" type="text/javascript">
    <!--
        //功能：获取TinyMce编辑器的内容
        //参数：editorId——编辑器的id
        //返回：内容字符串；如果失败，返回空字符串
        function GetTinyMceContent(editorId)
        ...{
            return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
        }
    //-->
</script>
3.下面是一个完整的asp.net例子：
为了使用该示例，您必须下载有TinyMce，并放置在目录“tiny_mce”中。

<%@ Page Language="C#" CodeFile="TinyMceTest.aspx.cs" Inherits="TinyMceTest" validateRequest=false %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <!-- tinyMCE -->
    <script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript">
        // Notice: The simple theme does not use all options some of them are limited to the advanced theme
        tinyMCE.init({
            mode : "textareas",
            theme : "advanced",
            plugins : "devkit,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            theme_advanced_buttons1_add_before : "save,newdocument,separator",
            theme_advanced_buttons1_add : "fontselect,fontsizeselect",
            theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
            theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
            theme_advanced_buttons3_add_before : "tablecontrols,separator",
            theme_advanced_buttons3_add : "emotions,iespell,media,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,|,code",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_path_location : "bottom",
            content_css : "example_full.css",
            plugin_insertdate_dateFormat : "%Y-%m-%d",
            plugin_insertdate_timeFormat : "%H:%M:%S",
            extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
            external_link_list_url : "example_link_list.js",
            external_image_list_url : "example_image_list.js",
            flash_external_list_url : "example_flash_list.js",
            media_external_list_url : "example_media_list.js",
            template_external_list_url : "example_template_list.js",
            file_browser_callback : "fileBrowserCallBack",
            theme_advanced_resize_horizontal : false,
            theme_advanced_resizing : true,
            nonbreaking_force_tab : true,
            apply_source_formatting : true,
            template_replace_values : {
                username : "Jack Black",
                staffid : "991234"
            }
        });
    </script>
    <!-- /tinyMCE -->
</head>
<body>
    <form id="form1" runat="server">
    <div>
        TinyMce测试页面<br />
        <textarea id="edt1" rows="6" cols="20">这是第一个编辑框</textarea><br />
        <asp:TextBox ID="edt2" TextMode="MultiLine" Text="这是第2个编辑框" runat="server" Height="79px"></asp:TextBox>
        <br />
        <input type="button" id="btnGetContent" value="Get Content" onclick="alert(GetTinyMceContent('edt1'))" />
        <input type="button" id="btnSetContent" value="Set Content" onclick="var cnt='这是测试<b>内</b>容设置';alert(cnt);SetTinyMceContent('edt2',cnt);" />
        <asp:Button ID="btnSubmit" runat="server" Text="Button" OnClick="btnSubmit_Click" />
    </div>
    </form>
    <script language="javascript" type="text/javascript">
    <!--
        //功能：获取TinyMce编辑器的内容
        //参数：editorId——编辑器的id
        //返回：内容字符串；如果失败，返回空字符串
        function GetTinyMceContent(editorId)
        {
            return tinyMCE.getInstanceById(editorId).getBody().innerHTML;
        }
       
        //功能：设置TinyMce编辑器的内容
        //参数：editorId——编辑器的id
        //        content——内容
        //返回：（无）
        function SetTinyMceContent(editorId,content)
        {
            tinyMCE.getInstanceById(editorId).getBody().innerHTML=content;
        }
    //-->
    </script>
</body>
</html>