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

小鱼儿 2022-10-01 03:54 186阅读 0赞

**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][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**，分别加载多行完全、迷你和简单工具栏。后面大括号用来定义更多的初始化参数，可以省略。

![0_13111616510GJB.gif][]

**相关代码**

**Site.master**

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

<script src="/Jquery/xhEditor/xheditor-zh-cn.min.js" type="text/javascript"></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页面配置

</script>

[http_xheditor.com_download]: http://xheditor.com/download
[0_13111616510GJB.gif]: /images/20220705/a9a039c31b09493190cc010858771336.png