根据错误提示，问题出在 <textarea> 元素上。具体原因是：
-
<textarea> 被隐藏：
- TinyMCE 初始化后，会将原始的
<textarea> 隐藏（设置为 display: none 或 visibility: hidden）。
- 由于
<textarea> 被隐藏，浏览器无法对其进行验证（即使设置了 required 属性）。
-
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>
测试步骤
- 打开页面，确保 TinyMCE 编辑器正常加载。
- 输入标题和内容，选择分类和标签。
- 点击“发布”按钮，检查是否有成功或失败的提示信息。
- 如果内容为空，会弹出提示“内容不能为空！”并阻止表单提交。
如果还有其他问题，欢迎继续提问！
