WordPress如何集成Ueditor编辑器？-建站教程-锦华智联科技

UEditor 是由百度前端研发团队开发的开源在线富文本编辑器，功能强大、界面美观、可定制性高，虽然它现在由百度维护，但依然是一个非常受欢迎的选择。

（图片来源网络，侵删）

本教程将分为以下几个部分：

准备工作：为什么选择 UEditor？
使用插件（最简单，推荐新手）
手动集成（更灵活，适合有一定基础的用户）
UEditor 基本使用与配置
常见问题与解决方案

准备工作：为什么选择 UEditor？

在开始之前,了解一下 UEditor 的优缺点，看看它是否适合你。

优点：

功能强大：内置了图片/视频上传、表格、代码高亮、公式、地图、流程图等丰富功能。
界面美观：UI 设计现代，操作体验接近桌面软件。
高度可定制：可以非常方便地修改工具栏按钮、上传路径、配置项等。
开源免费：完全免费使用和修改。

缺点：

（图片来源网络，侵删）

官方无 WordPress 插件：百度官方没有提供直接的 WordPress 插件，需要通过第三方插件或手动集成。
文件较大：相比一些轻量级编辑器，UEditor 的体积稍大。
更新频率：相比一些活跃的开源项目，UEditor 的更新可能不那么频繁。

方法一：使用插件（最简单，推荐新手）

这是最简单、最安全的方法，适合不想接触代码的用户，我们可以使用一个名为 WordPress UEditor 的插件。

步骤：

搜索并安装插件
- 登录你的 WordPress 后台。
- 在左侧菜单栏中,点击 插件 -> 安装插件。
- 在搜索框中输入 WordPress UEditor 或 Baidu UEditor。
- 找到由 wp-rehub 或其他开发者提供的插件，点击 立即安装，然后激活。
配置插件
（图片来源网络，侵删）
- 激活后,在左侧菜单栏中找到 设置 -> UEditor。
- 在这里你可以进行各种配置,
  - 编辑器主题：默认是 default，你也可以选择 simple 简洁模式。
  - 工具栏按钮：你可以自定义显示哪些按钮，非常灵活。
  - 图片上传配置：设置图片上传的路径、最大大小等。（重要！） 默认是上传到 wp-content/uploads/ueditor/ 目录，请确保该目录有写入权限。
  - 代码高亮语言：设置代码块支持哪些语言。
开始使用

当你创建或编辑文章时,你会看到原来的经典编辑器被替换成了 UEditor。

优点：

一键安装,无需手动下载文件。
有管理界面,配置方便。
插件作者通常会处理版本更新和兼容性问题。

缺点：

插件可能不是最新版本的 UEditor。
定制性可能不如手动集成。

方法二：手动集成（更灵活，适合有一定基础的用户）

如果你希望使用最新版的 UEditor，或者需要对编辑器进行更深度的定制，可以选择手动集成。

步骤：

下载 UEditor
- 访问 UEditor 的官方 GitHub 仓库：https://github.com/fex-team/ueditor
- 在 releases 页面下载最新版本的源码包（ueditor1_4_3_3-utf8-php.zip）。
- 或者直接下载 UTF-8 PHP 版本 的开发包。
上传文件到服务器
- 将下载并解压后的文件夹重命名,ueditor。
- 使用 FTP 工具（如 FileZilla）或 WordPress 后台的 文件上传器，将这个 ueditor 文件夹上传到你的主题目录下，/wp-content/themes/你的主题名/ueditor/。
- 或者，你也可以上传到 wp-content/ 目录下，如 wp-content/ueditor/，这里我们以主题目录为例。
创建编辑器加载脚本
- 在你的主题文件夹中,找到 functions.php 文件。
- 在 functions.php 文件的末尾，添加以下 PHP 代码，这段代码的作用是：
  1. 在文章编辑页面加载必要的 JS 和 CSS 文件。
  2. 使用 wp_editor 函数替换默认的编辑器。

<?php
// 防止直接访问此文件
if (!defined('ABSPATH')) {
    exit;
}
/**
 * 在 WordPress 后台加载 UEditor
 */
function mytheme_load_ueditor() {
    // 只在文章和页面编辑页面加载
    global $pagenow;
    if (in_array($pagenow, array('post.php', 'post-new.php'))) {
        // 1. 加载 UEditor 的 CSS 和 JS 文件
        // 请根据你实际的文件路径修改
        wp_enqueue_style(
            'ueditor-css',
            get_template_directory_uri() . '/ueditor/themes/default/css/ueditor.min.css'
        );
        wp_enqueue_script(
            'ueditor-js',
            get_template_directory_uri() . '/ueditor/ueditor.config.js',
            array('jquery'), // 依赖 jQuery
            false, // 版本号
            true  // 在 footer 加载
        );
        wp_enqueue_script(
            'ueditor-all-js',
            get_template_directory_uri() . '/ueditor/ueditor.all.min.js',
            array('ueditor-js'), // 依赖 ueditor.config.js
            false,
            true
        );
        // 2. 替换默认编辑器
        // 在 'content_editor' 钩子之后执行，确保能替换掉默认编辑器
        add_action('edit_form_after_editor', 'mytheme_replace_editor_with_ueditor');
    }
}
add_action('admin_enqueue_scripts', 'mytheme_load_ueditor');
/**
 * 使用 JavaScript 动态替换 textarea 为 UEditor 实例
 */
function mytheme_replace_editor_with_ueditor() {
    // 获取当前文章的 ID
    $post_id = get_the_ID();
    // 为每个 textarea 创建一个唯一的编辑器实例
    // WordPress 默认编辑器的 textarea ID 是 'content'
    echo '<script>
        jQuery(document).ready(function($) {
            // 等待 tinyMCE 初始化完成
            setTimeout(function() {
                // 销毁默认的 TinyMCE 编辑器
                if (typeof tinyMCE !== "undefined") {
                    tinyMCE.get("content").remove();
                }
                // 销毁默认的 QuickTags 工具栏
                if (typeof QTags !== "undefined") {
                    QTags.closeAllTags("content");
                }
                // 使用 UEditor 替换 textarea
                var ue = UE.getEditor("content", {
                    // 在这里可以写 UEditor 的初始化配置
                    // UEditor 实例的根路径，非常重要！
                    UEDITOR_HOME_URL: "' . get_template_directory_uri() . '/ueditor/",
                    // 工具栏配置
                    toolbars: [
                        ["fullscreen", "source", "|", "undo", "redo", "|",
                         "bold", "italic", "underline", "fontborder", "strikethrough", "superscript", "subscript", "removeformat", "|",
                         "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist", "|",
                         "justifyleft", "justifycenter", "justifyright", "justifyjustify", "|",
                         "link", "unlink", "anchor", "|",
                         "imagenone", "imageleft", "imagecenter", "imageright", "|",
                         "simpleupload", "insertimage", "insertvideo", "insertcode", "map", "emotion", "attachment"]
                    ],
                    // 自动保存
                    enableAutoSave: false
                });
            }, 1000); // 延迟1秒，确保 TinyMCE 完全加载
        });
    </script>';
}

代码解释：

mytheme_load_ueditor(): 这个函数负责在后台加载 UEditor 的 CSS 和 JS 文件，请确保 get_template_directory_uri() . '/ueditor/' 这个路径是正确的。
mytheme_replace_editor_with_ueditor(): 这个函数在页面加载后，通过 JavaScript 找到默认编辑器的 <textarea id="content">，然后用 UEditor 去初始化它。
UEDITOR_HOME_URL: 这是手动集成最关键的一步！ 它告诉 UEditor 它的核心文件在哪里，必须指向你上传 ueditor 文件夹的 URL。
toolbars: 这里定义了工具栏上显示哪些按钮，你可以根据自己的