asp.net ueditor怎么用？配置与集成步骤详解-建站教程-锦华智联科技

ASP.NET 集成 UEditor 详细教程

UEditor 是由百度开源的一款功能强大、所见即所得的开源富文本编辑器，在 ASP.NET 项目中使用它，主要分为以下几个步骤：

（图片来源网络，侵删）

下载 UEditor
部署 UEditor 到项目
配置 UEditor (关键步骤)
在前端页面调用 UEditor
在后端处理上传和请求
完整示例代码

第一步：下载 UEditor

访问 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
我们需要的是 .NET 版本 的 UEditor，在 GitHub 的 Releases 页面或 net 分支下可以找到。
- 推荐下载地址 (来自社区维护的 .NET 版本): https://github.com/NightStars/ueditor-net
- 这个版本是对原版 UEditor 的 .NET 移植和优化，更适合 ASP.NET 项目。

下载最新的 zip 包并解压，解压后你会看到一个类似如下的目录结构：

ueditor-net/
├── net/
│   ├── UeditorHandler/         // 后端处理程序
│   │   ├── config.ashx         // 配置文件处理器
│   │   ├── controller.ashx      // 通用控制器
│   │   └── ...                 // 其他上传、抓取等处理器
│   └── UeditorResource/         // UEditor 静态资源
│       ├── dialogs/             // 弹出窗口
│       ├── lang/                // 语言包
│       ├── themes/              // 主题
│       ├── ueditor.config.js    // **核心配置文件**
│       ├── ueditor.all.js       // 编辑器核心脚本
│       └── ...
└── ...

第二步：部署 UEditor 到项目

在你的 ASP.NET Web 项目（WebApplication1）中，创建一个文件夹来存放 UEditor 的文件，例如命名为 ueditor。
将上一步解压的 net/UeditorResource 目录下的所有内容复制到你项目中的 ueditor 文件夹里。
- 这意味着你的项目现在有 ~/ueditor/ueditor.config.js、~/ueditor/ueditor.all.min.js 等文件。
将 net/UeditorHandler 目录下的所有 .ashx 文件复制到你的项目的根目录，或者一个专门处理程序的地方（Handlers 文件夹）。
- 为了方便,我们直接放在根目录，这样它们的路径就是 ~/config.ashx、~/controller.ashx 等。

项目结构示意：

（图片来源网络，侵删）

WebApplication1/
├── App_Data/
├── bin/
├── Handlers/                  <-- (可选) 将 .ashx 文件放这里
│   ├── config.ashx
│   ├── controller.ashx
│   └── ...
├── ueditor/                   <-- UEditor 静态资源
│   ├── ueditor.config.js
│   ├── ueditor.all.min.js
│   ├── themes/
│   └── ...
├── Default.aspx               <-- 我们将要放置编辑器的页面
├── Web.config
└── ...

第三步：配置 UEditor (最关键的一步)

UEditor 的所有行为都由 ueditor.config.js 文件控制，你需要修改这个文件以适配你的项目。

打开 ~/ueditor/ueditor.config.js 文件。
找到并修改 serverUrl 配置项，这个配置项告诉前端，当需要上传图片、文件或获取配置时，应该向哪个地址发送请求。
```
// ueditor.config.js
window.UEDITOR_CONFIG = {
    // ... 其他配置 ...
    /* 服务器配置项 */
    serverUrl: "/Handlers/controller.ashx", // !!! 修改这里
    // ... 其他配置 ...
};
```
- 路径解释: /Handlers/controller.ashx 是我们第二步中部署的 UEditor 后端处理程序的入口，这个路径是相对于你的网站根目录的。
- 如果你把 .ashx 文件放在了根目录，那么路径就是 /controller.ashx。
- 如果你放在了 Handlers 文件夹下，那么路径就是 /Handlers/controller.ashx。
(可选) 修改上传路径：
（图片来源网络，侵删）
- 默认情况下,上传的图片和文件会保存在服务器的一个临时目录，这个目录是在 controller.ashx 代码中硬编码的。
- 为了更灵活地控制,建议你修改 controller.ashx 的代码，我们会在第五步详细说明。

第四步：在前端页面调用 UEditor

我们创建一个 ASPX 页面来展示编辑器。

在项目中创建一个 Default.aspx 页面。
切换到 Default.aspx 的源代码视图 (Default.aspx)。

在 <head> 标签中引入 UEditor 的 CSS 和 JS 文件。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>UEditor in ASP.NET</title>
    <!-- 引入 UEditor 的 CSS -->
    <link href="ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet" />
    <!-- 引入 jQuery (UEditor 依赖 jQuery) -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 UEditor 的核心 JS -->
    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>使用 UEditor</h1>
            <!-- 实例化编辑器 -->
            <script type="text/javascript">
                $(function () {
                    // 实例化编辑器
                    // UE.getEditor('editor') 中的 'editor' 是下面 textarea 的 id
                    var editor = UE.getEditor('editor');
                });
            </script>
            <!-- 编辑器容器 -->
            <textarea id="editor" name="editor" style="width:800px;height:400px;"></textarea>
            <asp:Button ID="btnSubmit" runat="server" Text="提交内容" OnClick="btnSubmit_Click" />
        </div>
    </form>
</body>
</html>

代码解释:

我们引入了 ueditor.config.js 和 ueditor.all.min.js。
在页面加载完成后 ($(function () { ... }))，使用 UE.getEditor('editor') 来初始化 ID 为 editor 的 textarea，UEditor 会自动将这个 textarea 替换成一个功能完整的富文本编辑器。

第五步：在后端处理上传和请求

这是整个集成过程中最复杂的部分,因为需要修改后端的 .ashx 文件来处理来自 UEditor 的请求（主要是上传和配置）。

修改 controller.ashx:

打开 ~/Handlers/controller.ashx 文件。
找到 UploadConfig 和 PathFormat 的设置。PathFormat 定义了文件上传后的保存路径。

// controller.ashx.cs (C# 代码文件)
public class controller : System.Web.UI.Page, IHttpHandler
{
    // ... 其他代码 ...
    private UploadConfig GetUploadConfig()
    {
        UploadConfig config = new UploadConfig();
        config.PathFormat = "/UploadFiles/{yyyy}{mm}{dd}/{time}{rand:6}"; // !!! 修改这里
        config.允许的文件后缀 = ".jpg,.jpeg,.png,.gif,.bmp,.pdf,.doc,.docx,.xls,.xlsx,.txt";
        // ... 其他配置 ...
        return config;
    }
    private State GetState(string filed)
    {
        // ... 其他代码 ...
    }
    // ... 其他代码 ...
}