UEditor | 百度富文本使用

最新推荐文章于 2024-06-25 09:02:21 发布

无盐海

最新推荐文章于 2024-06-25 09:02:21 发布

阅读量2.1k

点赞数

分类专栏： JQuery EasyUI

本文链接：https://blog.csdn.net/Fanbin168/article/details/45169649

版权

JQuery 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

EasyUI

11 篇文章 0 订阅

订阅专栏

《1》

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

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

下载下来的文件名叫 ueditor1_4_3-utf8-net.zip 我们给它解压后再将解压后的文件夹的名字修改为 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文件效果就出来了。如下图：

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

经过查阅资料：这时候只要在项目下面的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>