从MySQL获取记录并显示到TinyMCE编辑器的问题求助

你遇到的核心问题是PHP代码未被服务器执行，直接以字符串形式返回给前端JavaScript，导致console.log输出的是PHP代码文本而非数据库查询结果。

方案1：异步请求后端接口（推荐，适合大数据量/动态场景） #

通过AJAX请求后端接口获取指定noteid的内容，再赋值给TinyMCE编辑器。

步骤1：编写后端接口文件（如get_note_content.php） #

<?php
// 数据库连接信息替换为你的实际配置
$conn = mysqli_connect('localhost', 'db_user', 'db_pwd', 'db_name');
if (!$conn) {
    die(json_encode(['success' => false, 'msg' => '数据库连接失败']));
}

// 接收并验证noteid
$noteid = isset($_GET['noteid']) ? intval($_GET['noteid']) : 0;
if ($noteid <= 0) {
    die(json_encode(['success' => false, 'msg' => '无效的noteid']));
}

// 预处理查询，防止SQL注入
$sql = "SELECT content FROM notes WHERE noteid = ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, 'i', $noteid);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$note = mysqli_fetch_assoc($result);

// 返回JSON格式结果
echo json_encode([
    'success' => !empty($note),
    'content' => $note ? $note['content'] : '',
    'msg' => $note ? '' : '未找到对应记录'
]);

mysqli_close($conn);
?>

步骤2：前端点击Edit按钮时发起请求 #

假设Edit按钮通过data-noteid存储对应记录ID：

<button class="edit-btn" data-noteid="123">Edit</button>

对应的JavaScript逻辑：

// 绑定所有Edit按钮的点击事件
document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const noteid = this.dataset.noteid;
        
        // 发起AJAX请求
        fetch(`get_note_content.php?noteid=${noteid}`)
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    // 将内容设置到TinyMCE编辑器
                    tinymce.get('editNoteArea').setContent(data.content);
                    // 打开模态框（以Bootstrap模态框为例）
                    $('#editModal').modal('show');
                } else {
                    alert(data.msg);
                }
            })
            .catch(err => console.error('请求失败:', err));
    });
});

方案2：页面加载时预渲染内容（适合小数据量场景） #

如果笔记列表由后端渲染，可以直接将内容嵌入按钮的data属性中，前端直接读取：

后端渲染按钮时嵌入内容 #

<?php
// 假设这是遍历笔记列表的循环
while ($row = mysqli_fetch_assoc($notes_result)) {
    // 转义内容，避免HTML/JS语法冲突
    $safe_content = htmlspecialchars($row['content'], ENT_QUOTES);
    echo "<button class='edit-btn' data-noteid='{$row['noteid']}' data-content='{$safe_content}'>Edit</button>";
}
?>

前端直接读取数据并赋值 #

document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const content = this.dataset.content;
        tinymce.get('editNoteArea').setContent(content);
        $('#editModal').modal('show');
    });
});

• 检查PHP文件是否被服务器正确解析：直接访问PHP文件，若显示代码而非JSON，说明服务器未配置PHP环境或文件后缀错误。
• 禁止在独立JS文件中直接写<?php ?>：只有嵌入PHP文件的JS代码才会被服务器解析，独立JS文件中的PHP代码会被当作字符串处理。
• 必须转义特殊字符：数据库内容中的引号、HTML标签需用htmlspecialchars转义，避免JS语法报错。

内容的提问来源于stack exchange，提问作者Lan