UEditor | 百度富文本使用

《1》

首先我们需要来认识下UEditor，它是由百度web前端研发部开发所见即所得富文本web编辑器，并且是基于BSD协议的开源产品，允许*使用和修改，这也是小编最看中它的地方，开源就意味着可以自己来定制这个编辑器。

接着我们来下载这个编辑器，打开UEditor的官方主页点击下载因为我们是基于ASP.NET进行开发，所以选择 [1.4.3 .Net 版本] UTF-8版就可以了

下载下来的文件名叫 ueditor1_4_3-utf8-net.zip 我们给它解压后再将解压后的文件夹的名字修改为 ueditor 然后给它复制到我的项目的根目录下。如下图：

UEditor | 百度富文本使用

接着，我们将ueditor.config.js 和ueditor.all.js文件引入到项目中的UEditorTest.html文件中

然后再将项目里添加一个引用，引用文件是 ueditor/net/Bin/Newtonsoft.Json.dll ，将这个Newtonsoft.Json.dll文件添加为引用。

那现在就开始使用吧

HTML页客户端代码

<pre name="code" class="html"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="ueditor/ueditor.config.js"></script>
    <script src="ueditor/ueditor.all.js"></script>
</head>
<body>
    <form action="UEditorHandler.ashx" method="post">
        <script id="container" name="myContent" type="text/plain">
        </script>
        <input type="submit" id="submit" value="提交" />
    </form>
</body>
</html>

<pre name="code" class="javascript"><script type="text/javascript">    var ue = UE.getEditor('container', {        initialFrameWidth: 800, //设置富文本的宽度为600px        initialFrameHeight: 200, //设置富文本的高度为200px        initialContent: "Hi 我是百度富文本",    });</script>

一般处理程序UEditorHandler.ashx 服务端代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JqueryUI
{
    /// <summary>
    /// UEditorHandler 的摘要说明
    /// </summary>
    public class UEditorHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");

            string strData = context.Request.Form["myContent"]; //获取提交过来的编辑器中的富文本内容。

            //...........后续代码
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

此时我们点击一下Visual studio2013菜单栏的”生成“ 生成解决方案，然后再运行UEditorTest.html文件效果就出来了。如下图： UEditor | 百度富文本使用

当我们点击提交的时候，却发现抛异常了：其他信息: 从客户端(myContent="<p>Hi 我是百度富文本</p>")中检测到有潜在危险的 Request.Form 值。

UEditor | 百度富文本使用

经过查阅资料：这时候只要在项目下面的web.config文件中<system.web>下面的 <httpRuntime>里面添加一句requestValidationMode="2.0" 就可以了；如下代码：

<?xml version="1.0"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5"/>

    <httpRuntime requestValidationMode="2.0" />
    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"/>

  </system.web> 
</configuration>