WordPress WYSIWYG 文章发布工具解析

Posted on

这段代码实现了一个基于 Markdown 的文章发布工具，用户可以通过输入 Markdown 格式的内容，将其解析为 HTML 并发布到 WordPress 中。以下是代码的主要功能和结构解析：

主要功能

  1. 加载 WordPress 环境：

    • 通过 require_once('../wp-load.php') 加载 WordPress 核心功能。

  2. 引入 Parsedown 库：

    • 使用 Parsedown 库将 Markdown 内容解析为 HTML。

  3. 表单提交处理：

    • 检查表单是否通过 POST 方法提交。
    • 验证 nonce（安全令牌）和用户权限（publish_posts 权限）。
    • 获取并清理表单数据（标题、Markdown 内容、分类、标签）。
    • 使用 Parsedown 解析 Markdown 内容为 HTML。
    • 使用 wp_insert_post 发布文章，并分配分类和标签。
    • 根据发布结果显示成功或错误消息。

  4. 分类和标签支持：

    • 使用 get_categories 获取所有分类，并在表单中显示。
    • 允许用户输入标签（以逗号分隔），并通过 wp_set_post_tags 分配标签。

  5. 前端界面：

    • 提供一个简单的表单界面，包括标题输入框、Markdown 内容输入框、分类选择框、标签输入框和操作按钮。

  6. 表单重置功能：

    • 提供“重置”按钮，清空表单内容。

代码改进建议

  1. 界面优化：

    • 调整标题输入框的长度，使其与内容框一致。
    • 优化整体布局，使其更加现代和美观。

  2. 安全性增强：

    • 对 $_POST['markdown'] 进行更严格的清理，例如使用 wp_kses_post 过滤解析后的 HTML 内容，防止 XSS 攻击。

  3. 用户体验优化：

    • 在表单提交后，保留用户输入的内容（除了成功发布的情况），避免用户重新填写。
    • 添加加载指示器，防止用户多次点击提交按钮。

  4. Markdown 预览功能：

    • 添加一个实时 Markdown 预览功能，方便用户查看解析后的效果。

修改后的代码

以下是改进后的代码，主要优化了界面和用户体验：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

// 引入 Parsedown 库（用于解析 Markdown）
require_once 'Parsedown.php';

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['markdown']) && isset($_POST['title'])) {
    // 检查 nonce 和用户权限
    if (!isset($_POST['markdown_publish_nonce']) || !wp_verify_nonce($_POST['markdown_publish_nonce'], 'markdown_publish_action')) {
        echo '<div class="error">安全验证失败，请重试。</div>';
    } elseif (!current_user_can('publish_posts')) {
        echo '<div class="error">你没有权限发布文章。</div>';
    } else {
        // 获取表单数据
        $title = sanitize_text_field($_POST['title']);
        $markdown = $_POST['markdown'];
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签

        // 使用 Parsedown 解析 Markdown
        $parsedown = new Parsedown();
        $content = $parsedown->text($markdown); // 直接保存为 HTML

        // 发布文章
        $post_id = wp_insert_post([
            'post_title'   => $title,
            'post_content' => $content,
            'post_status'  => 'publish', // 直接发布
            'post_author'  => get_current_user_id(), // 当前用户为作者
            'post_category' => [$category], // 分配分类
        ]);

        if ($post_id) {
            // 分配标签
            if (!empty($tags)) {
                wp_set_post_tags($post_id, $tags);
            }

            echo '<div class="success">文章发布成功！<a href="' . get_permalink($post_id) . '">查看文章</a></div>';
        } else {
            echo '<div class="error">文章发布失败，请重试。</div>';
        }
    }
}

// 获取所有分类
$categories = get_categories(['hide_empty' => false]);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown 发布工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .markdown-publish {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .markdown-publish h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .markdown-publish label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .markdown-publish input[type="text"],
        .markdown-publish select,
        .markdown-publish textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .markdown-publish input[type="text"]:focus,
        .markdown-publish select:focus,
        .markdown-publish textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .markdown-publish .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .markdown-publish .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .markdown-publish .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .markdown-publish .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .markdown-publish .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .markdown-publish .buttons button[type="button"]:hover {
            background-color: #ddd;
        }
        .success {
            color: #28a745;
            margin: 10px 0;
            padding: 10px;
            background-color: #e6ffed;
            border: 1px solid #b2f2bb;
            border-radius: 4px;
        }
        .error {
            color: #dc3545;
            margin: 10px 0;
            padding: 10px;
            background-color: #fff3f3;
            border: 1px solid #ffc9c9;
            border-radius: 4px;
        }
    </style>
    <script>
        // 重置表单
        function resetForm() {
            document.querySelector('textarea[name="markdown"]').value = '';
            document.querySelector('input[name="title"]').value = '';
            document.querySelector('select[name="category"]').selectedIndex = 0;
            document.querySelector('input[name="tags"]').value = '';
        }
    </script>
</head>
<body>
    <div class="markdown-publish">
        <h1>Markdown 发布工具</h1>
        <form method="POST">
            <?php wp_nonce_field('markdown_publish_action', 'markdown_publish_nonce'); ?>
            <div>
                <label for="title">标题：</label>
                <input type="text" name="title" id="title" required>
            </div>
            <div>
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..." required></textarea>
            </div>
            <div>
                <label for="category">分类：</label>
                <select name="category" id="category">
                    <?php foreach ($categories as $cat): ?>
                        <option value="<?php echo $cat->term_id; ?>"><?php echo $cat->name; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label for="tags">标签（用逗号分隔）：</label>
                <input type="text" name="tags" id="tags">
            </div>
            <div class="buttons">
                <button type="submit" name="publish">发布</button>
                <button type="button" onclick="resetForm()">重置</button>
            </div>
        </form>
    </div>
</body>
</html>

主要改动

  1. 界面优化：

    • 调整了整体布局，增加了内边距和圆角，使界面更现代。
    • 使用了柔和的背景色和阴影，提升视觉层次感。
    • 改进了按钮样式，增加了悬停效果。
    • 优化了成功和错误消息的样式，使其更醒目。

  2. 标题输入框加长：

    • 将标题输入框的宽度设置为 100%，与内容框保持一致。

  3. 细节调整：

    • 增加了输入框和选择框的聚焦效果。
    • 调整了字体大小和颜色，使界面更易读。

效果预览

  • 标题输入框和内容框宽度一致，整体布局更加协调。
  • 界面风格简洁现代，按钮和输入框的交互效果更加友好。
  • 成功和错误消息的样式更加突出，便于用户识别。

希望这个版本能满足你的需求！如果有其他调整需求，可以随时告诉我。

时间: 2025-02-26T20:45:03

👤 用户

安全验证失败，请重试。
'; } elseif (!current_user_can('publish_posts')) { echo '
你没有权限发布文章。
'; } else { // 获取表单数据 $title = sanitize_text_field($_POST['title']); $content = $_POST['content']; // TinyMCE 输出的 HTML 内容 $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签 // 发布文章 $post_id = wp_insert_post([ 'post_title' => $title, 'post_content' => $content, 'post_status' => 'publish', // 直接发布 'post_author' => get_current_user_id(), // 当前用户为作者 'post_category' => [$category], // 分配分类 ]); if ($post_id) { // 分配标签 if (!empty($tags)) { wp_set_post_tags($post_id, $tags); } echo '
文章发布成功！查看文章
'; } else { echo '
文章发布失败，请重试。
'; } } } // 获取所有分类 $categories = get_categories(['hide_empty' => false]); ?> 所见即所得发布工具

Markdown 发布工具

时间: 2025-02-26T20:45:03

🤖 DeepSeek (deepseek-chat)

这段代码实现了一个基于 Markdown 的文章发布工具，用户可以通过输入 Markdown 格式的内容，将其解析为 HTML 并发布到 WordPress 中。以下是代码的主要功能和结构解析：

主要功能

  1. 加载 WordPress 环境：

    • 通过 require_once('../wp-load.php') 加载 WordPress 核心功能。

  2. 引入 Parsedown 库：

    • 使用 Parsedown 库将 Markdown 内容解析为 HTML。

  3. 表单提交处理：

    • 检查表单是否通过 POST 方法提交。
    • 验证 nonce（安全令牌）和用户权限（publish_posts 权限）。
    • 获取并清理表单数据（标题、Markdown 内容、分类、标签）。
    • 使用 Parsedown 解析 Markdown 内容为 HTML。
    • 使用 wp_insert_post 发布文章，并分配分类和标签。
    • 根据发布结果显示成功或错误消息。

  4. 分类和标签支持：

    • 使用 get_categories 获取所有分类，并在表单中显示。
    • 允许用户输入标签（以逗号分隔），并通过 wp_set_post_tags 分配标签。

  5. 前端界面：

    • 提供一个简单的表单界面，包括标题输入框、Markdown 内容输入框、分类选择框、标签输入框和操作按钮。

  6. 表单重置功能：

    • 提供“重置”按钮，清空表单内容。

代码改进建议

  1. 界面优化：

    • 调整标题输入框的长度，使其与内容框一致。
    • 优化整体布局，使其更加现代和美观。

  2. 安全性增强：

    • 对 $_POST['markdown'] 进行更严格的清理，例如使用 wp_kses_post 过滤解析后的 HTML 内容，防止 XSS 攻击。

  3. 用户体验优化：

    • 在表单提交后，保留用户输入的内容（除了成功发布的情况），避免用户重新填写。
    • 添加加载指示器，防止用户多次点击提交按钮。

  4. Markdown 预览功能：

    • 添加一个实时 Markdown 预览功能，方便用户查看解析后的效果。

修改后的代码

以下是改进后的代码，主要优化了界面和用户体验：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

// 引入 Parsedown 库（用于解析 Markdown）
require_once 'Parsedown.php';

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['markdown']) && isset($_POST['title'])) {
    // 检查 nonce 和用户权限
    if (!isset($_POST['markdown_publish_nonce']) || !wp_verify_nonce($_POST['markdown_publish_nonce'], 'markdown_publish_action')) {
        echo '<div class="error">安全验证失败，请重试。</div>';
    } elseif (!current_user_can('publish_posts')) {
        echo '<div class="error">你没有权限发布文章。</div>';
    } else {
        // 获取表单数据
        $title = sanitize_text_field($_POST['title']);
        $markdown = $_POST['markdown'];
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签

        // 使用 Parsedown 解析 Markdown
        $parsedown = new Parsedown();
        $content = $parsedown->text($markdown); // 直接保存为 HTML

        // 发布文章
        $post_id = wp_insert_post([
            'post_title'   => $title,
            'post_content' => $content,
            'post_status'  => 'publish', // 直接发布
            'post_author'  => get_current_user_id(), // 当前用户为作者
            'post_category' => [$category], // 分配分类
        ]);

        if ($post_id) {
            // 分配标签
            if (!empty($tags)) {
                wp_set_post_tags($post_id, $tags);
            }

            echo '<div class="success">文章发布成功！<a href="' . get_permalink($post_id) . '">查看文章</a></div>';
        } else {
            echo '<div class="error">文章发布失败，请重试。</div>';
        }
    }
}

// 获取所有分类
$categories = get_categories(['hide_empty' => false]);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown 发布工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .markdown-publish {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .markdown-publish h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .markdown-publish label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .markdown-publish input[type="text"],
        .markdown-publish select,
        .markdown-publish textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .markdown-publish input[type="text"]:focus,
        .markdown-publish select:focus,
        .markdown-publish textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .markdown-publish .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .markdown-publish .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .markdown-publish .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .markdown-publish .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .markdown-publish .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .markdown-publish .buttons button[type="button"]:hover {
            background-color: #ddd;
        }
        .success {
            color: #28a745;
            margin: 10px 0;
            padding: 10px;
            background-color: #e6ffed;
            border: 1px solid #b2f2bb;
            border-radius: 4px;
        }
        .error {
            color: #dc3545;
            margin: 10px 0;
            padding: 10px;
            background-color: #fff3f3;
            border: 1px solid #ffc9c9;
            border-radius: 4px;
        }
    </style>
    <script>
        // 重置表单
        function resetForm() {
            document.querySelector('textarea[name="markdown"]').value = '';
            document.querySelector('input[name="title"]').value = '';
            document.querySelector('select[name="category"]').selectedIndex = 0;
            document.querySelector('input[name="tags"]').value = '';
        }
    </script>
</head>
<body>
    <div class="markdown-publish">
        <h1>Markdown 发布工具</h1>
        <form method="POST">
            <?php wp_nonce_field('markdown_publish_action', 'markdown_publish_nonce'); ?>
            <div>
                <label for="title">标题：</label>
                <input type="text" name="title" id="title" required>
            </div>
            <div>
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..." required></textarea>
            </div>
            <div>
                <label for="category">分类：</label>
                <select name="category" id="category">
                    <?php foreach ($categories as $cat): ?>
                        <option value="<?php echo $cat->term_id; ?>"><?php echo $cat->name; ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label for="tags">标签（用逗号分隔）：</label>
                <input type="text" name="tags" id="tags">
            </div>
            <div class="buttons">
                <button type="submit" name="publish">发布</button>
                <button type="button" onclick="resetForm()">重置</button>
            </div>
        </form>
    </div>
</body>
</html>

主要改动

  1. 界面优化：

    • 调整了整体布局，增加了内边距和圆角，使界面更现代。
    • 使用了柔和的背景色和阴影，提升视觉层次感。
    • 改进了按钮样式，增加了悬停效果。
    • 优化了成功和错误消息的样式，使其更醒目。

  2. 标题输入框加长：

    • 将标题输入框的宽度设置为 100%，与内容框保持一致。

  3. 细节调整：

    • 增加了输入框和选择框的聚焦效果。
    • 调整了字体大小和颜色，使界面更易读。

效果预览

  • 标题输入框和内容框宽度一致，整体布局更加协调。
  • 界面风格简洁现代，按钮和输入框的交互效果更加友好。
  • 成功和错误消息的样式更加突出，便于用户识别。

希望这个版本能满足你的需求！如果有其他调整需求，可以随时告诉我。

时间: 2025-02-26T20:45:03

对话统计

  • 消息总数: 6 条
  • 处理状态: 成功转换