csdn上的blog 编辑器-xhEditor编辑器

xhEditor编辑器
http://xheditor.com/

xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化XHTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
xhEditor完全基于Javascript开发，您可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。
xhEditor可以在您的CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。
自2009年4月首个版本发布以来，凭借我们人性化的用户体验和不断持续完善的态度，越来越多的网站选择了使用xhEditor。
我们不是最好的，但是我们会努力做的更好，我们愿意倾听和接受所有用户的心声，长期坚持的开发和完善下去。

配置方法

1. 下载最新版本xhEditor：http://xheditor.com/download
2. 将下载的压缩文件解压缩，上传其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹到网站相应文件夹中
3. 在需要调用xhEditor编辑器的页面 head 标签结束之前添加以下代码：

   <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script> 
   <script type="text/javascript" src="/js/xheditor-zh-cn.min.js"></script>

   注：jQuery和xhEditor的js文件路径请根据你网站具体路径情况相应修改
4. 在需要实现可视化的文本框textarea属性中添加：

    class="xheditor {skin:'default'}"

   注：前面主参数也可以是 xheditor-mfull、xheditor-mini 或 xheditor-simple，分别加载多行完全、迷你和简单工具栏。后面大括号用来定义更多的初始化参数，可以省略。

相关代码

Site.master

    <!-- Jquery -->
    <script type='text/javascript' src="/Scripts/jquery-1.4.1.min.js"></script>

    <!-- xhEditor -->
    <script src="/Jquery/xhEditor/xheditor-zh-cn.min.js" type="text/javascript"></script>
    <!--
    <script type="text/javascript">
        $(document).ready(function () {
            $('#content').xheditor(true, { tools: 'full',
                upLinkUrl: "Home/Index", upLinkExt: "zip,rar,txt",
                upImgUrl: "Home/Upload", upImgExt: "jpg,jpeg,gif,png",
                upFlashUrl: "upload.php", upFlashExt: "swf",
                upMediaUrl: "upload.php", upMediaExt: "avi"
            });
        });
    </script>
    -->

Page.aspx

    <!-- 客户端验证 -->
    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <% Html.EnableClientValidation(); %>

    <h2>Create</h2>

    <% using (Html.BeginForm()) {%>

        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.address) %>
            </div>
            <div class="editor-field">
                <%:Html.TextAreaFor(model => model.address, new { @class = "xheditor {skin:'default'}", rows = "12"})%>
                <%: Html.ValidationMessageFor(model => model.address) %>
            </div>
           
            <p>
                <input type="submit" value="Create" />
            </p>

        </fieldset>

    <% } %>

 xhEditor上传配置

1、修改上传文件路径和配置：demos/upload.aspx → xhEditor/upload.aspx

string attachdir = "../upload";     // 上传文件保存路径，结尾不要带/

2、修改aspx页面配置

<textarea id="txtContent" clientidmode="Static" runat="server" rows="10" cols="80" style="width:100%" />

<script src='<%=ResolveUrl("~/xhEditor/xheditor-zh-cn.min.js") %>' type="text/javascript"></script>

<script type="text/javascript">
        $(pageInit);
        function pageInit() {
            $('#txtContent').xheditor({
                upLinkUrl: "../xhEditor/upload.aspx?immediate=1",
                upLinkExt: "zip,rar,txt",
                upImgUrl: "../xhEditor/upload.aspx?immediate=1",
                upImgExt: "jpg,jpeg,gif,png",
                upFlashUrl: "../xhEditor/upload.aspx?immediate=1",
                upFlashExt: "swf",
                upMediaUrl: "../xhEditor/upload.aspx?immediate=1",
                upMediaExt: "wmv,avi,wma,mp3,mid",
                });
        }

</script>