ueditor1.4 asp教程怎么用？-建站教程-锦华智联科技

UEditor 1.4 版本虽然较老，但因其稳定和简单，仍被一些老项目使用，本教程将带您一步步完成配置，使其在您的 ASP 网站中正常工作。

（图片来源网络，侵删）

教程目录

第一步：准备工作 - 下载和文件准备
第二步：配置 UEditor - 修改核心文件
第三步：在 ASP 页面中引入 UEditor
第四步：后端配置 - 处理图片和文件上传
第五步：完整示例代码
常见问题与解决方案

第一步：准备工作 - 下载和文件准备

下载 UEditor
- 访问 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
- 在 Releases 页面找到 4.3.3 版本（这是 1.4 系列中最新的稳定版）并下载。
- 下载后解压，你会得到一个名为 ueditor1_4_3_3-utf8-php 的文件夹（名称可能略有不同，但内容结构一致）。

文件结构说明 解压后的文件夹结构大致如下，我们需要重点关注 php 和 utf8-php 目录：

ueditor1_4_3_3-utf8-php/
├── _examples/          // 示例文件
├── _test/              // 测试文件
├── dialogs/            // 弹出对话框（如插入图片、链接等）
├── lang/               // 语言包
├── themes/             // 主题样式
├── third-party/        // 第三方依赖库
├── ueditor.config.js   // **核心配置文件**
├── ueditor.all.min.js  // **编辑器核心代码（包含所有功能）**
├── ueditor.parse.min.js // 内容解析显示用
├── ...
├── php/                // **PHP 后端处理文件夹**
└── utf8-php/           // **PHP 后端处理文件夹（UTF-8编码）**

注意：虽然我们用的是 ASP，但 UEditor 的后端交互（如上传图片、获取文件列表）需要服务器端脚本，官方提供了 PHP 版本，我们将模仿它的逻辑，用 ASP 来实现。

创建项目文件夹 在您的 ASP 网站根目录下，创建一个名为 ueditor 的文件夹，将下载的 UEditor 文件夹中的内容 全部复制 到您网站的这个 ueditor 文件夹中。

（图片来源网络，侵删）

您的项目结构现在应该是：

/your-asp-site/
├── index.asp            // 我们将要创建的编辑器页面
├──ueditor/              // UEditor 文件夹
│   ├── ueditor.config.js
│   ├── ueditor.all.min.js
│   ├── ...
│   └── php/              // 暂时保留，用于参考
└── ...

第二步：配置 UEditor - 修改核心文件

我们需要修改 UEditor 的前端配置文件，告诉它后端接口用 ASP 来处理。

打开配置文件 用编辑器打开 /ueditor/ueditor.config.js 文件。

修改服务器接口路径 找到 window.UEDITOR_CONFIG = { ... } 中的 serverUrl 配项，将其值指向一个我们将要创建的 ASP 文件。

// ueditor.config.js
window.UEDITOR_CONFIG = {
    // ... 其他配置 ...
    /**
     * 服务器统一请求接口路径
     * @type {String}
     */
    // serverUrl: URL + "php/controller.php", // 默认的 PHP 路径
    serverUrl: "ueditor/asp/controller.asp", // 修改为我们的 ASP 路径
    // ... 其他配置 ...
};

解释：这个 controller.asp 文件将是我们 ASP 后端的总入口，负责处理所有来自 UEditor 的请求（上传、配置获取等）。

第三步：在 ASP 页面中引入 UEditor

我们来创建一个包含 UEditor 的 ASP 页面，index.asp。

<!-- index.asp -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">UEditor ASP 示例</title>
    <!-- 引入 UEditor 样式 -->
    <link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css">
    <style type="text/css">
        /* 给编辑器一个合适的高度 */
        #editor {
            width: 1024px;
            height: 500px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">UEditor 1.4 ASP 集成示例</h1>
    <!-- 实例化编辑器 -->
    <script id="editor" type="text/plain"></script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('editor');
    </script>
    <!-- 一个简单的表单，用于提交编辑器内容 -->
    <form action="save_content.asp" method="post" style="text-align: center; margin-top: 20px;">
        <input type="hidden" name="content" id="content">
        <button type="submit">保存内容</button>
    </form>
    <script>
        // 在表单提交前，将编辑器内容同步到隐藏的 input 中
        document.querySelector("form").onsubmit = function() {
            document.getElementById("content").value = ue.getContent();
        };
    </script>
</body>
</html>

打开 index.asp，你应该能看到一个功能完整的富文本编辑器了，当你尝试上传图片或文件时，会失败,因为我们还没有创建后端处理程序。

第四步：后端配置 - 处理图片和文件上传

这是最关键的一步，我们需要创建一个 controller.asp 文件来模仿 PHP 版本的功能。

创建 controller.asp 文件 在 /ueditor/ 目录下创建一个名为 asp 的文件夹，然后在里面新建一个 controller.asp 文件。

编写 controller.asp 代码 controller.asp 需要根据前端传来的 action 参数，执行不同的操作（如 config, uploadimage, listfile 等），我们将使用 Select Case 语句来实现。

' /ueditor/asp/controller.asp
' 设置响应头为 JSON，这是 UEditor 期望的格式
Response.ContentType = "text/html"
' Response.Charset = "UTF-8" ' 确保你的 ASP 页面编码也是 UTF-8
' 获取前端传来的 action 参数
action = Request("action")
' 使用 Select Case 来处理不同的请求
Select Case action
    Case "config"
        ' 返回配置信息
        get_config()
    Case "uploadimage"
        ' 处理图片上传
        upload_image()
    Case "uploadfile"
        ' 处理文件上传
        upload_file()
    Case "listimage"
        ' 返回已上传的图片列表
        list_image()
    Case "listfile"
        ' 返回已上传的文件列表
        list_file()
    Case Else
        ' 未知操作
        echo "{state: '请求地址出错'}"
End Select
' *****************************************************************************
'                       以下是各个功能的具体实现函数
' *****************************************************************************
' 返回配置信息
Sub get_config()
    ' 直接读取 ueditor.config.js 中的配置是不行的，需要将配置对象转为 JSON 字符串返回
    ' 这里为了简化，我们直接返回一个硬编码的 JSON 对象
    ' 实际项目中，你应该将 ueditor.config.js 中的配置项提取出来，在这里动态生成
    configJson = "{"
    configJson = configJson & """imageUrl"":""/ueditor/asp/uploadimage.asp"",""imagePath"":""{}/""" & ","  ' 图片上传接口和访问路径
    configJson = configJson & """filePath"":""/ueditor/asp/uploadfile.asp"",""fileUrl"":""{}/""" & ","      ' 文件上传接口和访问路径
    configJson = configJson & """imageManagerActionName"":""listimage"",""imageManagerListPath"":""/ueditor/asp/upload/""" & ","
    configJson = configJson & """fileManagerActionName"":""listfile"",""fileManagerListPath"":""/ueditor/asp/upload/""" & ","
    ' ... 其他配置项 ...
    configJson = configJson & """imageMaxSize"":2048000,""imageAllowFiles"":["".png"","".jpg"","".jpeg"","".gif"","".bmp""]"
    configJson = configJson & "}"
    Response.Write configJson
End Sub
' 上传图片
Sub upload_image()
    ' 1. 创建上传对象
    Set upload = Server.CreateObject("Persits.Upload")
    ' 2. 限制文件大小 (2MB)
    upload.MaxFileSize = 2 * 1024 * 1024
    ' 3. 保存文件
    ' 确保你的网站有 /ueditor/asp/upload/ 目录，IIS 用户有写入权限
    upload.Save Server.MapPath("/ueditor/asp/upload/")
    ' 4. 获取第一个上传的文件
    Set file = upload.Files(1)
    ' 5. 返回成功信息
    ' 注意：URL 路径必须是网站可以访问的路径
    imageUrl = "/ueditor/asp/upload/" & file.FileName
    resultJson = "{"
    resultJson = resultJson & """state"":""SUCCESS"",""url"":""" & imageUrl & """,""title"":""" & file.FileName & """,""original"":""" & file.FileName & """"
    resultJson = resultJson & "}"
    Response.Write resultJson
End Sub
' 上传文件
Sub upload_file()
    ' 逻辑与 upload_image 完全相同
    Set upload = Server.CreateObject("Persits.Upload")
    upload.MaxFileSize = 2 * 1024 * 1024
    upload.Save Server.MapPath("/ueditor/asp/upload/")
    Set file = upload.Files(1)
    fileUrl = "/ueditor/asp/upload/" & file.FileName
    resultJson = "{""state"":""SUCCESS"",""url"":""" & fileUrl & """,""title"":""" & file.FileName & """,""original"":""" & file.FileName & """}"
    Response.Write resultJson
End Sub
' 获取图片列表
Sub list_image()
    ' 1. 定义目录
    dirPath = Server.MapPath("/ueditor/asp/upload/")
    ' 2. 创建文件系统对象
    Set fso = CreateObject("Scripting.FileSystemObject")
    ' 3. 检查目录是否存在
    If fso.FolderExists(dirPath) Then
        Set folder = fso.GetFolder(dirPath)
        Set files = folder.Files
        ' 4. 构建返回的 JSON 数组
        ' UEditor 期望的格式是: {"state":"SUCCESS", "list": [{"url": "..."}, ...], "start": 0, "total": 总数}
        listJson = "{""state"":""SUCCESS"",""list"":["
        For Each fileItem in files
            ' 只列出图片文件
            If LCase(Right(fileItem.Name, 4)) = ".jpg" Or LCase(Right(fileItem.Name, 4)) = ".png" Or LCase(Right(fileItem.Name, 5)) = ".jpeg" Then
                listJson = listJson & "{""url"":""/ueditor/asp/upload/" & fileItem.Name & """},"
            End If
        Next
        ' 移除最后一个逗号
        If Right(listJson, 1) = "," Then
            listJson = Left(listJson, Len(listJson) - 1)
        End If
        listJson = listJson & "],""start"":0,""total" & files.Count & "}"
        Response.Write listJson
    Else
        Response.Write "{""state"":""目录不存在""}"
    End If
End Sub
' 获取文件列表
Sub list_file()
    ' 逻辑与 list_image 类似，但不过滤文件类型
    dirPath = Server.MapPath("/ueditor/asp/upload/")
    Set fso = CreateObject("Scripting.FileSystemObject")
    If fso.FolderExists(dirPath) Then
        Set folder = fso.GetFolder(dirPath)
        Set files = folder.Files
        listJson = "{""state"":""SUCCESS"",""list"":["
        For Each fileItem in files
            listJson = listJson & "{""url"":""/ueditor/asp/upload/" & fileItem.Name & """},"
        Next
        If Right(listJson, 1) = "," Then listJson = Left(listJson, Len(listJson) - 1)
        listJson = listJson & "],""start"":0,""total" & files.Count & "}"
        Response.Write listJson
    Else
        Response.Write "{""state"":""目录不存在""}"
    End If
End Sub
' 输出内容的辅助函数
Sub echo(str)
    Response.Write str
End Sub

创建上传目录和权限
- 在 /ueditor/asp/ 目录下创建一个名为 upload 的文件夹。
- 非常重要：确保 upload 文件夹有写入权限，在 Windows 服务器上，需要给 IIS_IUSRS 或 NETWORK SERVICE 用户添加“修改”权限。
安装上传组件
- controller.asp 中使用了 Persits.Upload 组件，这是 ASP 中一个非常流行的免费上传组件。
- 你需要从网上下载 aspupload.dll，然后在服务器上注册它（通常在命令行下运行 regsvr32 aspupload.dll），如果你的服务器没有这个组件，你需要寻找替代方案或使用其他方法（如 Request.BinaryRead）来实现上传,但这会复杂很多。

第五步：完整示例代码

为了方便你测试，这里提供一个简化版的 controller.asp，它只处理了图片上传和配置获取，并假设你使用的是 Persits.Upload 组件。

/ueditor/asp/controller.asp (简化版)

<%@ Language=VBScript %>
<%
    ' 设置响应头
    Response.Charset = "UTF-8"
    Response.ContentType = "text/html"
    ' 获取 action
    action = Trim(Request("action"))
    Select Case action
        Case "config"
            ' 返回配置信息
            Response.Write "{"
            Response.Write """imageUrl"":""/ueditor/asp/uploadimage.asp"",""imagePath"":""{}/"","
            Response.Write """imageMaxSize"":2048000,"
            Response.Write """imageAllowFiles"":["".png"","".jpg"","".jpeg"","".gif"","".bmp""]"
            Response.Write "}"
        Case "uploadimage"
            ' 处理图片上传
            On Error Resume Next
            Set upload = Server.CreateObject("Persits.Upload")
            upload.MaxFileSize = 2 * 1024 * 1024 ' 2MB
            upload.Save Server.MapPath("/ueditor/asp/upload/")
            If Err.Number <> 0 Then
                Response.Write "{""state"":""文件大小超出限制!""}"
                Err.Clear
                Response.End
            End If
            If upload.Files.Count > 0 Then
                Set file = upload.Files(1)
                ' 检查文件扩展名
                ext = LCase(Mid(file.FileName, InStrRev(file.FileName, ".")))
                allowedExts = Array(".png", ".jpg", ".jpeg", ".gif", ".bmp")
                isValid = False
                For Each aExt In allowedExts
                    If ext = aExt Then isValid = True : Exit For
                Next
                If isValid Then
                    imageUrl = "/ueditor/asp/upload/" & file.FileName
                    Response.Write "{""state"":""SUCCESS"",""url"":""" & imageUrl & """,""title"":""" & file.FileName & """,""original"":""" & file.FileName & """}"
                Else
                    Response.Write "{""state"":""不允许的文件类型!""}"
                End If
            Else
                Response.Write "{""state"":""请选择要上传的文件!""}"
            End If
        Case "listimage"
            ' 简单列出图片
            Response.Write "{""state"":""SUCCESS"",""list"":["
            Set fso = CreateObject("Scripting.FileSystemObject")
            uploadPath = Server.MapPath("/ueditor/asp/upload/")
            If fso.FolderExists(uploadPath) Then
                Set folder = fso.GetFolder(uploadPath)
                For Each file In folder.Files
                    If InStr(".jpg.png.jpeg.gif.bmp", LCase(Mid(file.Name, InStrRev(file.Name, ".")))) > 0 Then
                        Response.Write "{""url"":""/ueditor/asp/upload/" & file.Name & """},"
                    End If
                Next
            End If
            ' 移除最后一个逗号
            If Right(Response.Buffer, 1) = "," Then
                Response.Write Left(Response.Buffer, Len(Response.Buffer) - 1)
            End If
            Response.Write "],""start"":0,""total"":0}"
        Case Else
            Response.Write "{""state"":""Invalid action""}"
    End Select
%>

第六步：常见问题与解决方案

问题：点击上传图片没反应，或控制台报错。
- 原因：最常见的原因是后端接口无法访问或返回格式错误。
- 解决方案：
  - 检查 ueditor.config.js 中的 serverUrl 路径是否正确。
  - 直接在浏览器地址栏访问 http://your-site/ueditor/asp/controller.asp?action=config，看看是否能返回正确的 JSON 字符串，如果返回 500 错误或空白，说明 controller.asp 有语法错误或组件问题。
  - 检查 Persits.Upload 组件是否已正确安装和注册。
问题：上传成功，但图片无法显示，图片路径是错的。
- 原因：controller.asp 中返回的 url 字段不正确。
- 解决方案：确保返回的 url 是相对于网站根目录的、可公开访问的路径，"/ueditor/asp/upload/myimage.jpg"，而不是服务器上的物理路径 "C:\...\upload\myimage.jpg"。
问题：上传文件夹没有写入权限。
- 原因：IIS 进程（如 NETWORK SERVICE）没有对 upload 文件夹的写入权限。
- 解决方案：右键点击 upload 文件夹 -> 属性 -> 安全 -> 编辑 -> 添加 NETWORK SERVICE 或 IIS_IUSRS，给予“修改”权限。
问题：编辑器内容无法保存到数据库。
- 原因：index.asp 中的表单提交逻辑。
- 解决方案：确保在表单的 onsubmit 事件中调用了 ue.getContent()，并且有一个 <input type="hidden"> 来接收这个值，提交后，在 save_content.asp 中通过 Request.Form("content") 即可获取到完整的 HTML 内容。

' save_content.asp
<%
    content = Request.Form("content")
    ' 这里将 content 保存到你的数据库中
    '  conn.execute("UPDATE articles SET content = '" & Replace(content, "'", "''") & "' WHERE id = 1")
    Response.Write "内容已保存！"
    Response.Write "<br>保存的内容是：<br><hr>" & content
%>

这份教程应该能帮助你成功地在 ASP 经典环境中集成 UEditor 1.4，虽然过程比现代框架要繁琐一些，但理解了这个流程,你就能更好地处理类似的老旧项目。