整合多模式文章发布工具

Posted on

这个问题通常是因为在页面加载时，TinyMCE 编辑器没有正确初始化。可能是因为页面刷新后，TinyMCE 的初始化脚本没有重新执行，或者编辑器绑定的 DOM 元素没有正确加载。

我们可以通过以下方式解决这个问题：

  1. 确保 TinyMCE 在页面加载后重新初始化。
  2. 在表单提交后，避免页面刷新，而是通过 JavaScript 动态更新页面内容。

以下是修复后的代码：

修复后的代码

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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

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

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && 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']);
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签
        $mode = isset($_POST['mode']) ? sanitize_text_field($_POST['mode']) : 'wysiwyg'; // 发布模式

        // 根据发布模式处理内容
        if ($mode === 'wysiwyg') {
            $content = wp_kses_post($_POST['content']); // 所见即所得模式
        } elseif ($mode === 'markdown2html') {
            $markdown = $_POST['markdown'];
            $parsedown = new Parsedown();
            $content = $parsedown->text($markdown); // Markdown 转 HTML
        } elseif ($mode === 'markdown') {
            $content = $_POST['markdown']; // 直接发布 Markdown
        } else {
            echo '<div class="error">无效的发布模式。</div>';
            return;
        }

        // 发布文章
        $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 json_encode([
                'status' => 'success',
                'message' => '文章发布成功！<a href="' . get_permalink($post_id) . '">查看文章</a>'
            ]);
            exit;
        } else {
            echo json_encode([
                'status' => 'error',
                'message' => '文章发布失败，请重试。'
            ]);
            exit;
        }
    }
}

// 获取所有分类
$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>文章发布工具</title>
    <!-- 引入 TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/ai2tag8ofr7pco5jz64wsp0b4ripk1jrpom8n67h6mbg009v/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .publish-tool {
            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);
        }
        .publish-tool h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .publish-tool label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .publish-tool input[type="text"],
        .publish-tool select,
        .publish-tool textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .publish-tool input[type="text"]:focus,
        .publish-tool select:focus,
        .publish-tool textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .publish-tool .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .publish-tool .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .publish-tool .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .publish-tool .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .publish-tool .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .publish-tool .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;
        }
        .mode-switch {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .mode-switch label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: normal;
        }
        .hidden {
            display: none;
        }
    </style>
    <script>
        // 初始化 TinyMCE
        function initTinyMCE() {
            tinymce.init({
                selector: '#content', // 绑定到 textarea
                height: 500, // 编辑器高度
                menubar: false, // 隐藏菜单栏
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar: 'undo redo | formatselect | bold italic backcolor | \
                           alignleft aligncenter alignright alignjustify | \
                           bullist numlist outdent indent | removeformat | help',
                init_instance_callback: function(editor) {
                    console.log('TinyMCE 初始化完成'); // 检查初始化是否成功
                }
            });
        }

        // 表单提交时同步 TinyMCE 内容
        document.querySelector('form').onsubmit = function(e) {
            e.preventDefault(); // 阻止表单默认提交行为

            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                var content = tinymce.get('content').getContent(); // 获取 TinyMCE 内容
                if (!content.trim()) {
                    alert('内容不能为空！');
                    return false; // 阻止表单提交
                }
                document.querySelector('textarea[name="content"]').value = content; // 同步到 textarea
            } else if (mode === 'markdown2html' || mode === 'markdown') {
                var markdown = document.querySelector('textarea[name="markdown"]').value;
                if (!markdown.trim()) {
                    alert('Markdown 内容不能为空！');
                    return false; // 阻止表单提交
                }
            }

            // 使用 AJAX 提交表单
            var formData = new FormData(this);
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.querySelector('.publish-tool').insertAdjacentHTML('afterbegin', '<div class="success">' + data.message + '</div>');
                } else {
                    document.querySelector('.publish-tool').insertAdjacentHTML('afterbegin', '<div class="error">' + data.message + '</div>');
                }
            })
            .catch(error => {
                console.error('提交失败:', error);
            });
        };

        // 重置表单
        function resetForm() {
            tinymce.get('content').setContent(''); // 清空 TinyMCE 内容
            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 = '';
        }

        // 切换发布模式
        function toggleMode() {
            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                document.querySelector('#content-wrapper').classList.remove('hidden');
                document.querySelector('#markdown-wrapper').classList.add('hidden');
            } else {
                document.querySelector('#content-wrapper').classList.add('hidden');
                document.querySelector('#markdown-wrapper').classList.remove('hidden');
            }
        }

        // 初始化时调用一次 toggleMode 和 TinyMCE
        document.addEventListener('DOMContentLoaded', function() {
            toggleMode();
            initTinyMCE();
        });
    </script>
</head>
<body>
    <div class="publish-tool">
        <h1>文章发布工具</h1>
        <form method="POST" action="" novalidate>
            <?php wp_nonce_field('markdown_publish_action', 'markdown_publish_nonce'); ?>
            <div class="mode-switch">
                <label>
                    <input type="radio" name="mode" value="wysiwyg" checked onchange="toggleMode()"> 所见即所得
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown2html" onchange="toggleMode()"> Markdown 转 HTML
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown" onchange="toggleMode()"> Markdown 原文
                </label>
            </div>
            <div>
                <label for="title">标题：</label>
                <input type="text" name="title" id="title" required>
            </div>
            <div id="content-wrapper">
                <label for="content">内容：</label>
                <textarea name="content" id="content" placeholder="在此输入内容..."></textarea>
            </div>
            <div id="markdown-wrapper" class="hidden">
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..."></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. AJAX 提交表单：

    • 使用 fetch API 提交表单，避免页面刷新。
    • 表单提交成功后，动态显示成功或错误消息。

  2. TinyMCE 初始化：

    • 将 TinyMCE 初始化逻辑封装到 initTinyMCE() 函数中。
    • 在页面加载时调用 initTinyMCE()，确保编辑器正确初始化。

  3. 表单提交逻辑：

    • 阻止表单的默认提交行为，改为使用 AJAX 提交。
    • 提交成功后，动态插入成功或错误消息。

使用方法

  1. 将代码保存为 publish_tool.php。
  2. 访问该文件，选择发布模式并发布文章。
  3. 发布成功后，页面不会刷新，TinyMCE 编辑器会保持正常状态。

希望这次的修复能解决你的问题！如果还有其他问题，请随时告诉我。

时间: 2025-02-27T19:34:36

👤 用户

我有两段代码，都是发布文章到wordpress用的。一个是所见即所得，一个是markdown转html后在发布到wordpress，现在我想增加一个直接以markdown原文发布到wordpress的功能,我想要把这两段代码整合到一起。在上面搞三个切换选择框，分别是所见即所得，markdown2html,markdown。下面是我的2段代码
第一段代码：
<?php
// 加载 WordPress 环境
require_once(‘../wp-load.php’);

// 检查是否提交了表单
if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’ && isset($_POST[‘content’]) && isset($_POST[‘title’])) {
// 检查 nonce 和用户权限
if (!isset($_POST[‘markdown_publish_nonce’]) || !wp_verify_nonce($_POST[‘markdown_publish_nonce’], ‘markdown_publish_action’)) {
echo ‘

安全验证失败，请重试。
‘;
} elseif (!current_user_can(‘publish_posts’)) {
echo ‘
你没有权限发布文章。
‘;
} else {
// 获取表单数据
$title = sanitize_text_field($_POST[‘title’]);
$content = wp_kses_post($_POST[‘content’]); // 清理 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 '<div class="success">文章发布成功！<a href="' . get_permalink($post_id) . '">查看文章</a></div>';
    } else {
        echo '<div class="error">文章发布失败，请重试。</div>';
    }
}

}

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

所见即所得发布工具

Markdown 发布工具

时间: 2025-02-27T19:14:22

🤖 DeepSeek (deepseek-chat)

要将这两段代码整合到一起，并添加一个切换选择框来选择发布模式（所见即所得、Markdown转HTML、Markdown原文），你可以按照以下步骤进行整合。我们将创建一个新的PHP文件，并在其中添加一个切换选择框来控制发布模式。

整合后的代码

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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

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

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && 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']);
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签
        $mode = isset($_POST['mode']) ? sanitize_text_field($_POST['mode']) : 'wysiwyg'; // 发布模式

        // 根据发布模式处理内容
        if ($mode === 'wysiwyg') {
            $content = wp_kses_post($_POST['content']); // 所见即所得模式
        } elseif ($mode === 'markdown2html') {
            $markdown = $_POST['markdown'];
            $parsedown = new Parsedown();
            $content = $parsedown->text($markdown); // Markdown 转 HTML
        } elseif ($mode === 'markdown') {
            $content = $_POST['markdown']; // 直接发布 Markdown
        } else {
            echo '<div class="error">无效的发布模式。</div>';
            return;
        }

        // 发布文章
        $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>文章发布工具</title>
    <!-- 引入 TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/ai2tag8ofr7pco5jz64wsp0b4ripk1jrpom8n67h6mbg009v/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .publish-tool {
            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);
        }
        .publish-tool h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .publish-tool label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .publish-tool input[type="text"],
        .publish-tool select,
        .publish-tool textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .publish-tool input[type="text"]:focus,
        .publish-tool select:focus,
        .publish-tool textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .publish-tool .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .publish-tool .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .publish-tool .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .publish-tool .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .publish-tool .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .publish-tool .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>
        // 初始化 TinyMCE
        tinymce.init({
            selector: '#content', // 绑定到 textarea
            height: 500, // 编辑器高度
            menubar: false, // 隐藏菜单栏
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | \
                       alignleft aligncenter alignright alignjustify | \
                       bullist numlist outdent indent | removeformat | help',
            init_instance_callback: function(editor) {
                console.log('TinyMCE 初始化完成'); // 检查初始化是否成功
            }
        });

        // 表单提交时同步 TinyMCE 内容
        document.querySelector('form').onsubmit = function() {
            var mode = document.querySelector('select[name="mode"]').value;
            if (mode === 'wysiwyg') {
                var content = tinymce.get('content').getContent(); // 获取 TinyMCE 内容
                if (!content.trim()) {
                    alert('内容不能为空！');
                    return false; // 阻止表单提交
                }
                document.querySelector('textarea[name="content"]').value = content; // 同步到 textarea
            } else if (mode === 'markdown2html' || mode === 'markdown') {
                var markdown = document.querySelector('textarea[name="markdown"]').value;
                if (!markdown.trim()) {
                    alert('Markdown 内容不能为空！');
                    return false; // 阻止表单提交
                }
            }
        };

        // 重置表单
        function resetForm() {
            tinymce.get('content').setContent(''); // 清空 TinyMCE 内容
            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 = '';
        }

        // 切换发布模式
        function toggleMode() {
            var mode = document.querySelector('select[name="mode"]').value;
            if (mode === 'wysiwyg') {
                document.querySelector('#content').style.display = 'block';
                document.querySelector('#markdown').style.display = 'none';
            } else {
                document.querySelector('#content').style.display = 'none';
                document.querySelector('#markdown').style.display = 'block';
            }
        }
    </script>
</head>
<body>
    <div class="publish-tool">
        <h1>文章发布工具</h1>
        <form method="POST" action="" novalidate>
            <?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="mode">发布模式：</label>
                <select name="mode" id="mode" onchange="toggleMode()">
                    <option value="wysiwyg">所见即所得</option>
                    <option value="markdown2html">Markdown 转 HTML</option>
                    <option value="markdown">Markdown 原文</option>
                </select>
            </div>
            <div id="content">
                <label for="content">内容：</label>
                <textarea name="content" id="content" placeholder="在此输入内容..."></textarea>
            </div>
            <div id="markdown" style="display: none;">
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..."></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. 发布模式选择：

    • 添加了一个 <select> 元素，用于选择发布模式（所见即所得、Markdown转HTML、Markdown原文）。
    • 通过 onchange 事件调用 toggleMode() 函数来切换显示不同的输入框。

  2. 内容处理：

    • 根据选择的发布模式，处理表单提交的内容：
      • wysiwyg 模式：直接使用 TinyMCE 编辑器中的 HTML 内容。
      • markdown2html 模式：使用 Parsedown 将 Markdown 转换为 HTML。
      • markdown 模式：直接使用 Markdown 原文。

  3. 表单提交：

    • 在表单提交时，根据选择的发布模式进行内容验证和处理。

  4. 样式和脚本：

    • 保留了原有的样式和脚本，确保界面美观和功能正常。

使用方法

  1. 将整合后的代码保存为一个 PHP 文件（例如 publish_tool.php）。
  2. 将该文件放置在 WordPress 的根目录或子目录中。
  3. 访问该文件即可使用文章发布工具，选择不同的发布模式进行文章发布。

通过这种方式，你可以灵活地选择不同的发布模式，并根据需要发布文章。

时间: 2025-02-27T19:14:22

👤 用户

代码有点问题。所见即所得的内容框貌似多出一个内容，此外，模式切换我想放最上面，弄成选择按钮input

时间: 2025-02-27T19:22:25

🤖 DeepSeek (deepseek-chat)

好的，我来帮你调整代码。我们将模式切换放在最上面，并使用 input 类型的单选按钮来实现模式切换。同时，修复所见即所得内容框的问题。

以下是调整后的代码：

调整后的代码

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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

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

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && 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']);
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签
        $mode = isset($_POST['mode']) ? sanitize_text_field($_POST['mode']) : 'wysiwyg'; // 发布模式

        // 根据发布模式处理内容
        if ($mode === 'wysiwyg') {
            $content = wp_kses_post($_POST['content']); // 所见即所得模式
        } elseif ($mode === 'markdown2html') {
            $markdown = $_POST['markdown'];
            $parsedown = new Parsedown();
            $content = $parsedown->text($markdown); // Markdown 转 HTML
        } elseif ($mode === 'markdown') {
            $content = $_POST['markdown']; // 直接发布 Markdown
        } else {
            echo '<div class="error">无效的发布模式。</div>';
            return;
        }

        // 发布文章
        $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>文章发布工具</title>
    <!-- 引入 TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/ai2tag8ofr7pco5jz64wsp0b4ripk1jrpom8n67h6mbg009v/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .publish-tool {
            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);
        }
        .publish-tool h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .publish-tool label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .publish-tool input[type="text"],
        .publish-tool select,
        .publish-tool textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .publish-tool input[type="text"]:focus,
        .publish-tool select:focus,
        .publish-tool textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .publish-tool .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .publish-tool .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .publish-tool .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .publish-tool .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .publish-tool .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .publish-tool .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;
        }
        .mode-switch {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .mode-switch label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: normal;
        }
    </style>
    <script>
        // 初始化 TinyMCE
        tinymce.init({
            selector: '#content', // 绑定到 textarea
            height: 500, // 编辑器高度
            menubar: false, // 隐藏菜单栏
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | \
                       alignleft aligncenter alignright alignjustify | \
                       bullist numlist outdent indent | removeformat | help',
            init_instance_callback: function(editor) {
                console.log('TinyMCE 初始化完成'); // 检查初始化是否成功
            }
        });

        // 表单提交时同步 TinyMCE 内容
        document.querySelector('form').onsubmit = function() {
            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                var content = tinymce.get('content').getContent(); // 获取 TinyMCE 内容
                if (!content.trim()) {
                    alert('内容不能为空！');
                    return false; // 阻止表单提交
                }
                document.querySelector('textarea[name="content"]').value = content; // 同步到 textarea
            } else if (mode === 'markdown2html' || mode === 'markdown') {
                var markdown = document.querySelector('textarea[name="markdown"]').value;
                if (!markdown.trim()) {
                    alert('Markdown 内容不能为空！');
                    return false; // 阻止表单提交
                }
            }
        };

        // 重置表单
        function resetForm() {
            tinymce.get('content').setContent(''); // 清空 TinyMCE 内容
            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 = '';
        }

        // 切换发布模式
        function toggleMode() {
            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                document.querySelector('#content').style.display = 'block';
                document.querySelector('#markdown').style.display = 'none';
            } else {
                document.querySelector('#content').style.display = 'none';
                document.querySelector('#markdown').style.display = 'block';
            }
        }

        // 初始化时调用一次 toggleMode
        document.addEventListener('DOMContentLoaded', function() {
            toggleMode();
        });
    </script>
</head>
<body>
    <div class="publish-tool">
        <h1>文章发布工具</h1>
        <form method="POST" action="" novalidate>
            <?php wp_nonce_field('markdown_publish_action', 'markdown_publish_nonce'); ?>
            <div class="mode-switch">
                <label>
                    <input type="radio" name="mode" value="wysiwyg" checked onchange="toggleMode()"> 所见即所得
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown2html" onchange="toggleMode()"> Markdown 转 HTML
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown" onchange="toggleMode()"> Markdown 原文
                </label>
            </div>
            <div>
                <label for="title">标题：</label>
                <input type="text" name="title" id="title" required>
            </div>
            <div id="content">
                <label for="content">内容：</label>
                <textarea name="content" id="content" placeholder="在此输入内容..."></textarea>
            </div>
            <div id="markdown" style="display: none;">
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..."></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. 模式切换：

    • 使用 input[type="radio"] 实现模式切换，放在表单最上方。
    • 通过 onchange 事件调用 toggleMode() 函数来切换显示不同的输入框。

  2. 所见即所得内容框修复：

    • 确保只有一个内容框显示，修复了重复内容框的问题。

  3. 样式调整：

    • 添加了 .mode-switch 样式，使模式切换按钮更美观。

  4. 初始化调用：

    • 在页面加载时调用 toggleMode()，确保初始状态正确。

使用方法

  1. 将代码保存为 publish_tool.php。
  2. 访问该文件，选择发布模式并发布文章。

希望这次的调整能满足你的需求！如果还有其他问题，请随时告诉我。

时间: 2025-02-27T19:22:25

👤 用户

有问题啊，大哥。所见即所得界面就没必要出现markdown输入框啦。markdown转html就没必要出现所见即所得输入框啦

时间: 2025-02-27T19:27:19

🤖 DeepSeek (deepseek-chat)

明白了！我们需要确保在切换模式时，只显示当前模式所需的输入框，而隐藏其他输入框。以下是修复后的代码，确保所见即所得模式下只显示 TinyMCE 编辑器，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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

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

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && 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']);
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签
        $mode = isset($_POST['mode']) ? sanitize_text_field($_POST['mode']) : 'wysiwyg'; // 发布模式

        // 根据发布模式处理内容
        if ($mode === 'wysiwyg') {
            $content = wp_kses_post($_POST['content']); // 所见即所得模式
        } elseif ($mode === 'markdown2html') {
            $markdown = $_POST['markdown'];
            $parsedown = new Parsedown();
            $content = $parsedown->text($markdown); // Markdown 转 HTML
        } elseif ($mode === 'markdown') {
            $content = $_POST['markdown']; // 直接发布 Markdown
        } else {
            echo '<div class="error">无效的发布模式。</div>';
            return;
        }

        // 发布文章
        $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>文章发布工具</title>
    <!-- 引入 TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/ai2tag8ofr7pco5jz64wsp0b4ripk1jrpom8n67h6mbg009v/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .publish-tool {
            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);
        }
        .publish-tool h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .publish-tool label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .publish-tool input[type="text"],
        .publish-tool select,
        .publish-tool textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .publish-tool input[type="text"]:focus,
        .publish-tool select:focus,
        .publish-tool textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .publish-tool .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .publish-tool .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .publish-tool .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .publish-tool .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .publish-tool .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .publish-tool .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;
        }
        .mode-switch {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .mode-switch label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: normal;
        }
        .hidden {
            display: none;
        }
    </style>
    <script>
        // 初始化 TinyMCE
        tinymce.init({
            selector: '#content', // 绑定到 textarea
            height: 500, // 编辑器高度
            menubar: false, // 隐藏菜单栏
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | \
                       alignleft aligncenter alignright alignjustify | \
                       bullist numlist outdent indent | removeformat | help',
            init_instance_callback: function(editor) {
                console.log('TinyMCE 初始化完成'); // 检查初始化是否成功
            }
        });

        // 表单提交时同步 TinyMCE 内容
        document.querySelector('form').onsubmit = function() {
            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                var content = tinymce.get('content').getContent(); // 获取 TinyMCE 内容
                if (!content.trim()) {
                    alert('内容不能为空！');
                    return false; // 阻止表单提交
                }
                document.querySelector('textarea[name="content"]').value = content; // 同步到 textarea
            } else if (mode === 'markdown2html' || mode === 'markdown') {
                var markdown = document.querySelector('textarea[name="markdown"]').value;
                if (!markdown.trim()) {
                    alert('Markdown 内容不能为空！');
                    return false; // 阻止表单提交
                }
            }
        };

        // 重置表单
        function resetForm() {
            tinymce.get('content').setContent(''); // 清空 TinyMCE 内容
            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 = '';
        }

        // 切换发布模式
        function toggleMode() {
            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                document.querySelector('#content-wrapper').classList.remove('hidden');
                document.querySelector('#markdown-wrapper').classList.add('hidden');
            } else {
                document.querySelector('#content-wrapper').classList.add('hidden');
                document.querySelector('#markdown-wrapper').classList.remove('hidden');
            }
        }

        // 初始化时调用一次 toggleMode
        document.addEventListener('DOMContentLoaded', function() {
            toggleMode();
        });
    </script>
</head>
<body>
    <div class="publish-tool">
        <h1>文章发布工具</h1>
        <form method="POST" action="" novalidate>
            <?php wp_nonce_field('markdown_publish_action', 'markdown_publish_nonce'); ?>
            <div class="mode-switch">
                <label>
                    <input type="radio" name="mode" value="wysiwyg" checked onchange="toggleMode()"> 所见即所得
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown2html" onchange="toggleMode()"> Markdown 转 HTML
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown" onchange="toggleMode()"> Markdown 原文
                </label>
            </div>
            <div>
                <label for="title">标题：</label>
                <input type="text" name="title" id="title" required>
            </div>
            <div id="content-wrapper">
                <label for="content">内容：</label>
                <textarea name="content" id="content" placeholder="在此输入内容..."></textarea>
            </div>
            <div id="markdown-wrapper" class="hidden">
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..."></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. 输入框切换逻辑：

    • 使用 hidden 类控制输入框的显示和隐藏。
    • 在 toggleMode() 函数中，根据选择的模式动态切换输入框的显示状态。

  2. 所见即所得模式：

    • 只显示 TinyMCE 编辑器（#content-wrapper）。

  3. Markdown 模式：

    • 只显示 Markdown 输入框（#markdown-wrapper）。

  4. 样式调整：

    • 添加了 .hidden 类，用于隐藏不需要的输入框。

使用方法

  1. 将代码保存为 publish_tool.php。
  2. 访问该文件，选择发布模式并发布文章。

现在，切换模式时只会显示当前模式所需的输入框，避免了多余的输入框干扰。如果还有其他问题，请随时告诉我！

时间: 2025-02-27T19:27:19

👤 用户

发布文章成功后加载界面，所见即所得编辑器貌似不能加载成功，其他没什么问题了

时间: 2025-02-27T19:34:36

🤖 DeepSeek (deepseek-chat)

这个问题通常是因为在页面加载时，TinyMCE 编辑器没有正确初始化。可能是因为页面刷新后，TinyMCE 的初始化脚本没有重新执行，或者编辑器绑定的 DOM 元素没有正确加载。

我们可以通过以下方式解决这个问题：

  1. 确保 TinyMCE 在页面加载后重新初始化。
  2. 在表单提交后，避免页面刷新，而是通过 JavaScript 动态更新页面内容。

以下是修复后的代码：

修复后的代码

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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<?php
// 加载 WordPress 环境
require_once('../wp-load.php');

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

// 检查是否提交了表单
if ($_SERVER['REQUEST_METHOD'] === 'POST' && 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']);
        $category = isset($_POST['category']) ? intval($_POST['category']) : 0; // 分类 ID
        $tags = isset($_POST['tags']) ? sanitize_text_field($_POST['tags']) : ''; // 标签
        $mode = isset($_POST['mode']) ? sanitize_text_field($_POST['mode']) : 'wysiwyg'; // 发布模式

        // 根据发布模式处理内容
        if ($mode === 'wysiwyg') {
            $content = wp_kses_post($_POST['content']); // 所见即所得模式
        } elseif ($mode === 'markdown2html') {
            $markdown = $_POST['markdown'];
            $parsedown = new Parsedown();
            $content = $parsedown->text($markdown); // Markdown 转 HTML
        } elseif ($mode === 'markdown') {
            $content = $_POST['markdown']; // 直接发布 Markdown
        } else {
            echo '<div class="error">无效的发布模式。</div>';
            return;
        }

        // 发布文章
        $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 json_encode([
                'status' => 'success',
                'message' => '文章发布成功！<a href="' . get_permalink($post_id) . '">查看文章</a>'
            ]);
            exit;
        } else {
            echo json_encode([
                'status' => 'error',
                'message' => '文章发布失败，请重试。'
            ]);
            exit;
        }
    }
}

// 获取所有分类
$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>文章发布工具</title>
    <!-- 引入 TinyMCE -->
    <script src="https://cdn.tiny.cloud/1/ai2tag8ofr7pco5jz64wsp0b4ripk1jrpom8n67h6mbg009v/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .publish-tool {
            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);
        }
        .publish-tool h1 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .publish-tool label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .publish-tool input[type="text"],
        .publish-tool select,
        .publish-tool textarea {
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
        .publish-tool input[type="text"]:focus,
        .publish-tool select:focus,
        .publish-tool textarea:focus {
            border-color: #0073aa;
            outline: none;
        }
        .publish-tool .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        .publish-tool .buttons button {
            padding: 10px 20px;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .publish-tool .buttons button[type="submit"] {
            background-color: #0073aa;
            color: #fff;
        }
        .publish-tool .buttons button[type="submit"]:hover {
            background-color: #005177;
        }
        .publish-tool .buttons button[type="button"] {
            background-color: #f0f0f0;
            color: #333;
        }
        .publish-tool .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;
        }
        .mode-switch {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .mode-switch label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: normal;
        }
        .hidden {
            display: none;
        }
    </style>
    <script>
        // 初始化 TinyMCE
        function initTinyMCE() {
            tinymce.init({
                selector: '#content', // 绑定到 textarea
                height: 500, // 编辑器高度
                menubar: false, // 隐藏菜单栏
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar: 'undo redo | formatselect | bold italic backcolor | \
                           alignleft aligncenter alignright alignjustify | \
                           bullist numlist outdent indent | removeformat | help',
                init_instance_callback: function(editor) {
                    console.log('TinyMCE 初始化完成'); // 检查初始化是否成功
                }
            });
        }

        // 表单提交时同步 TinyMCE 内容
        document.querySelector('form').onsubmit = function(e) {
            e.preventDefault(); // 阻止表单默认提交行为

            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                var content = tinymce.get('content').getContent(); // 获取 TinyMCE 内容
                if (!content.trim()) {
                    alert('内容不能为空！');
                    return false; // 阻止表单提交
                }
                document.querySelector('textarea[name="content"]').value = content; // 同步到 textarea
            } else if (mode === 'markdown2html' || mode === 'markdown') {
                var markdown = document.querySelector('textarea[name="markdown"]').value;
                if (!markdown.trim()) {
                    alert('Markdown 内容不能为空！');
                    return false; // 阻止表单提交
                }
            }

            // 使用 AJAX 提交表单
            var formData = new FormData(this);
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.querySelector('.publish-tool').insertAdjacentHTML('afterbegin', '<div class="success">' + data.message + '</div>');
                } else {
                    document.querySelector('.publish-tool').insertAdjacentHTML('afterbegin', '<div class="error">' + data.message + '</div>');
                }
            })
            .catch(error => {
                console.error('提交失败:', error);
            });
        };

        // 重置表单
        function resetForm() {
            tinymce.get('content').setContent(''); // 清空 TinyMCE 内容
            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 = '';
        }

        // 切换发布模式
        function toggleMode() {
            var mode = document.querySelector('input[name="mode"]:checked').value;
            if (mode === 'wysiwyg') {
                document.querySelector('#content-wrapper').classList.remove('hidden');
                document.querySelector('#markdown-wrapper').classList.add('hidden');
            } else {
                document.querySelector('#content-wrapper').classList.add('hidden');
                document.querySelector('#markdown-wrapper').classList.remove('hidden');
            }
        }

        // 初始化时调用一次 toggleMode 和 TinyMCE
        document.addEventListener('DOMContentLoaded', function() {
            toggleMode();
            initTinyMCE();
        });
    </script>
</head>
<body>
    <div class="publish-tool">
        <h1>文章发布工具</h1>
        <form method="POST" action="" novalidate>
            <?php wp_nonce_field('markdown_publish_action', 'markdown_publish_nonce'); ?>
            <div class="mode-switch">
                <label>
                    <input type="radio" name="mode" value="wysiwyg" checked onchange="toggleMode()"> 所见即所得
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown2html" onchange="toggleMode()"> Markdown 转 HTML
                </label>
                <label>
                    <input type="radio" name="mode" value="markdown" onchange="toggleMode()"> Markdown 原文
                </label>
            </div>
            <div>
                <label for="title">标题：</label>
                <input type="text" name="title" id="title" required>
            </div>
            <div id="content-wrapper">
                <label for="content">内容：</label>
                <textarea name="content" id="content" placeholder="在此输入内容..."></textarea>
            </div>
            <div id="markdown-wrapper" class="hidden">
                <label for="markdown">Markdown 内容：</label>
                <textarea name="markdown" id="markdown" placeholder="在此输入 Markdown 文本..."></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. AJAX 提交表单：

    • 使用 fetch API 提交表单，避免页面刷新。
    • 表单提交成功后，动态显示成功或错误消息。

  2. TinyMCE 初始化：

    • 将 TinyMCE 初始化逻辑封装到 initTinyMCE() 函数中。
    • 在页面加载时调用 initTinyMCE()，确保编辑器正确初始化。

  3. 表单提交逻辑：

    • 阻止表单的默认提交行为，改为使用 AJAX 提交。
    • 提交成功后，动态插入成功或错误消息。

使用方法

  1. 将代码保存为 publish_tool.php。
  2. 访问该文件，选择发布模式并发布文章。
  3. 发布成功后，页面不会刷新，TinyMCE 编辑器会保持正常状态。

希望这次的修复能解决你的问题！如果还有其他问题，请随时告诉我。

时间: 2025-02-27T19:34:36

对话统计

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