WordPress所见即所得发布方法总结

Posted on February 25, 2025 by admin

根据错误提示，问题出在 <textarea> 元素上。具体原因是：

  1. <textarea> 被隐藏：

    • TinyMCE 初始化后，会将原始的 <textarea> 隐藏（设置为 display: none 或 visibility: hidden）。
    • 由于 <textarea> 被隐藏，浏览器无法对其进行验证（即使设置了 required 属性）。

  2. required 属性冲突：

    • 你为 <textarea> 设置了 required 属性，但隐藏的表单控件无法通过浏览器的默认验证。

解决方法

方法 1：移除 required 属性

如果 TinyMCE 编辑器已经确保内容不为空，可以移除 <textarea> 的 required 属性。

<textarea name="content" id="content" placeholder="在此输入内容..."></textarea>

方法 2：手动验证内容

在表单提交时，手动检查 TinyMCE 的内容是否为空。

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

方法 3：隐藏 <textarea> 但不影响验证

将 <textarea> 设置为透明且不可见，但仍然占据空间，以便通过浏览器验证。

<textarea name="content" id="content" placeholder="在此输入内容..." required
          style="opacity: 0; height: 0; width: 0; position: absolute;"></textarea>

方法 4：禁用浏览器默认验证

在表单中添加 novalidate 属性，禁用浏览器的默认验证，完全依赖 JavaScript 验证。

<form method="POST" action="" novalidate>

修复后的完整代码

以下是结合 方法 2 和 方法 4 的修复代码：

<?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 '<div class="error">安全验证失败，请重试。</div>';
    } elseif (!current_user_can('publish_posts')) {
        echo '<div class="error">你没有权限发布文章。</div>';
    } 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 '<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/你的API Key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
        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 content = tinymce.get('content').getContent(); // 获取 TinyMCE 内容
            if (!content.trim()) {
                alert('内容不能为空！');
                return false; // 阻止表单提交
            }
            document.querySelector('textarea[name="content"]').value = content; // 同步到 textarea
        };
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .publish-tool {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        .publish-tool textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            font-size: 16px;
        }
        .publish-tool .buttons {
            margin-top: 10px;
        }
        .publish-tool .buttons button {
            padding: 10px 20px;
            font-size: 16px;
            margin-right: 10px;
            cursor: pointer;
        }
        .success {
            color: green;
            margin: 10px 0;
        }
        .error {
            color: red;
            margin: 10px 0;
        }
    </style>
    <script>
        // 重置表单
        function resetForm() {
            tinymce.get('content').setContent(''); // 清空 TinyMCE 内容
            document.querySelector('input[name="title"]').value = '';
            document.querySelector('select[name="category"]').selectedIndex = 0;
            document.querySelector('input[name="tags"]').value = '';
        }
    </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="content">内容：</label>
                <textarea name="content" id="content" placeholder="在此输入内容..."></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. 打开页面，确保 TinyMCE 编辑器正常加载。
  2. 输入标题和内容，选择分类和标签。
  3. 点击“发布”按钮，检查是否有成功或失败的提示信息。
  4. 如果内容为空，会弹出提示“内容不能为空！”并阻止表单提交。

如果还有其他问题，欢迎继续提问！

This entry was posted in 网络相关. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *