Ueditor PHP教程怎么用？配置步骤有哪些？-建站教程-锦华智联科技

UEditor PHP 使用教程

UEditor 是由百度「前端研发部」开发的所见即所得的开源富文本编辑器，具有轻量，功能丰富，可定制等特点，本教程将指导你如何在 PHP 项目中集成和使用 UEditor。

（图片来源网络，侵删）

第一步：下载和准备

下载 UEditor
- 访问 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
- 在 releases 页面下载最新稳定版的 PHP 版本，或者直接克隆/下载 master 分支,但推荐使用稳定版。
- 下载后，你会得到一个压缩包，解压后，你会看到一个类似 ueditor-php-1.4.3.3 的文件夹。

文件结构分析 解压后的目录结构非常重要,你需要了解每个文件夹的作用：

ueditor-php-1.4.3.3/
├── index.html          # 一个简单的演示页面，你可以从这里开始测试
├── config.json         # 【核心配置文件】，用于配置编辑器功能和上传路径
├── PHP/                # 【核心PHP后端代码】
│   ├── Action.php      # 控制器，根据前端请求分发到不同操作
│   ├── Controller.php  # 控制器基类
│   └── Uploader.php    # 【文件上传核心类】
├── dialogs/            # 弹出对话框相关的JS和CSS
├── lang/               # 语言包
├── themes/             # 编辑器主题样式
├── third-party/        # 第三方依赖库
└── ueditor.config.js   # 【前端JS配置文件】，用于初始化编辑器

部署到你的项目
- 将整个 ueditor-php-1.4.3.3 文件夹（或你重命名的文件夹，ueditor）复制到你的 PHP 项目根目录下，或者任意一个可以访问的 Web 目录中。

第二步：配置（关键步骤）

UEditor 的配置分为前端配置和后端配置,两者需要配合使用。

（图片来源网络，侵删）

后端配置 (`config.json`)

这是最关键的一步，配置文件位于 ueditor/php/config.json，你需要使用一个 UTF-8 无 BOM 格式的文本编辑器（如 VS Code, Sublime Text, Notepad++）来修改它,否则可能会出现乱码。

主要需要修改的配置项：

{
    // ... 其他配置 ...
    "imageUrlPrefix": "", /* 图片访问路径前缀 */
    "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    // ... 其他配置 ...
}

imageUrlPrefix: 图片访问路径前缀。
- 如果你把 UEditor 放在网站根目录，http://yourdomain.com/ueditor/，那么这里可以留空，因为图片的完整路径就是 http://yourdomain.com/ueditor/php/upload/image/...。
- 如果你把 UEditor 放在子目录，http://yourdomain.com/myapp/ueditor/，这里也应该留空。
- 如果你希望图片通过 CDN 访问，就填写 CDN 的域名，"http://cdn.yourdomain.com"。
imagePathFormat: 图片（以及其他文件）的保存路径格式。
（图片来源网络，侵删）
- 路径问题：这里的路径是相对于你的 网站根目录 的，确保 php/upload/ 目录存在并且有 可写权限。
- 权限设置：在服务器上，你需要手动创建 ueditor/php/upload 目录，并给予 Web 服务器用户（如 www-data for Ngini/Apache, IIS_IUSRS for IIS）写入权限，在 Linux 上，可以使用 chmod -R 755 ueditor/php/upload 和 chown -R www-data:www-data ueditor/php/upload。
- 目录结构：{yyyy}{mm}{dd} 会自动按日期创建子目录,避免所有文件都堆在一个文件夹里。
- 文件名：{time}{rand:6} 会生成一个基于时间戳和6位随机数的文件名,确保文件名唯一。
imageAllowFiles: 允许上传的图片文件后缀，默认是 ["png", "jpg", "jpeg", "gif", "bmp"],你可以根据需要修改。
imageMaxSize: 单个图片文件的最大大小，单位是 KB，默认是 2048 (即 2MB)。
其他文件类型配置： scrawlPathFormat (涂鸦), snapscreenPathFormat (截图), catcherPathFormat (远程抓取), videoPathFormat (视频), filePathFormat (文件), configPathFormat (配置) 等都遵循相同的规则,请根据你的需求进行修改。

前端配置 (`ueditor.config.js`)

这个文件位于 UEditor 根目录下,主要用于前端初始化编辑器。

serverUrl: 这是连接前后端的关键！ 它指定了后端处理请求的入口文件路径，这个路径是相对于你放置 UEditor 的目录的。
```
// UEditor 官方示例中的路径
window.UEDITOR_CONFIG = {
    // ... 其他配置 ...
    serverUrl: "php/controller.php" 
    // ... 其他配置 ...
};
```
- 如果你的 UEditor 在网站根目录，http://yourdomain.com/ueditor/，serverUrl "php/controller.php"。
- 如果你的 UEditor 在子目录，http://yourdomain.com/myapp/ueditor/，serverUrl 仍然是 "php/controller.php"，因为浏览器请求的最终 URL 会是 http://yourdomain.com/myapp/ueditor/php/controller.php。

第三步：在页面中集成

你可以在你的 PHP 页面中引入并使用 UEditor 了。

创建一个 HTML 页面 (index.php)

引入必要的 JS 和 CSS 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>UEditor PHP 示例</title>
    <!-- 引入 UEditor 的 CSS 文件 -->
    <link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css">
    <!-- 引入 UEditor 的 JS 文件 -->
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <!-- 如果你需要使用语言包，请引入 -->
    <!-- <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> -->
</head>
<body>
    <!-- 实例化编辑器 -->
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    <script type="text/javascript">
        // 告诉 UEditor 实例化哪个 DOM 元素
        var ue = UE.getEditor('editor');
    </script>
</body>
</html>

获取编辑器内容

当你需要保存内容时（例如在表单提交时），可以使用以下 JavaScript 代码获取编辑器中的 HTML 内容。

<button onclick="getContent()">获取内容</button>
<script type="text/javascript">
    function getContent() {
        var content = ue.getContent(); // 获取 HTML 格式的内容
        // var content_txt = ue.getContentTxt(); // 获取纯文本内容
        // 这里可以将 content 通过 AJAX 提交到你的后端 PHP 脚本
        console.log(content);
        alert(content);
    }
</script>

在你的 PHP 后端接收数据：

<?php
// 假设你通过 POST 提交了数据
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $content = $_POST['content']; // 前端提交时，字段名要和 input 的 name 一致
    // TODO: 对 $content 进行处理，例如保存到数据库
    // file_put_contents('content.html', $content);
    echo "内容保存成功！";
    exit;
}
?>

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

Q1: 上传图片失败，提示 "后台配置项没有正常加载,上传插件不能正常工作！"

原因: 最常见的原因是 config.json 文件编码问题，不是 UTF-8 无 BOM 格式。
解决方案:
1. 用支持无 BOM 格式的编辑器（如 VS Code）重新打开并保存 config.json。
2. 检查 config.json 中的 JSON 语法是否正确,是否有逗号缺失或多余。
3. 确认 serverUrl 路径正确，并且后端 php/controller.php 文件能被正常访问。

Q2: 上传后图片无法显示，或者图片路径错误

原因:
1. imageUrlPrefix 配置错误。
2. imagePathFormat 配置的路径在服务器上不存在或没有写权限。
3. 图片上传成功，但返回给前端的 URL 是相对路径,而前端无法正确拼接成绝对路径。
解决方案:
1. 检查 config.json 中的 imageUrlPrefix 和 imagePathFormat。
2. 确认 upload 目录存在且有 755 权限，Web 服务器用户有写入权限。
3. 使用浏览器开发者工具（F12）的 "Network" 面板，查看上传请求的响应，后端返回的 url 字段应该是完整的、可访问的 URL，如果返回的是相对路径，问题可能出在后端 Uploader.php 的 getFileInfo() 方法中，但通常 UEditor 默认处理得很好,所以重点还是检查前两个原因。

Q3: 如何修改编辑器工具栏上的按钮？

方法: 修改 ueditor.config.js 文件中的 toolbars 配置项。

window.UEDITOR_CONFIG = {
    // ... 其他配置 ...
    toolbars: [
        ['fullscreen', 'source', '|', 'undo', 'redo', '|',
         'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
         'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
         'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
         'directionalityltr', 'directionalityrtl', 'indent', '|',
         'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
         'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
         'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', 'charts', '|',
         'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
         'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
         'print', 'preview', 'searchreplace', 'help', 'drafts']
    ]
    // ... 其他配置 ...
};

你可以自由地增删或重新排序这些按钮，更简单的方法是直接使用 UEditor 官网提供的 [配置生成器](http://ueditor.baidu.com website/online.html) 来生成你的 toolbars 配置。

下载部署: 将 UEditor PHP 版本放入你的项目目录。
后端配置: 重点修改 php/config.json，设置正确的上传路径、文件大小限制和访问前缀,并确保目录有写权限。
前端配置: 确认 ueditor.config.js 中的 serverUrl 路径正确。
页面集成: 在 HTML 页面中引入 JS/CSS，通过 UE.getEditor() 实例化编辑器。
: 使用 ue.getContent() 获取内容，并通过 AJAX 或表单提交到你的 PHP 后端进行保存。

遵循以上步骤，你应该就能顺利地在你的 PHP 项目中集成和使用 UEditor 了，如果在实际操作中遇到问题，请优先检查浏览器控制台的错误信息和网络请求的响应内容,这通常能帮你快速定位问题。

Ueditor PHP教程怎么用？配置步骤有哪些？