本教程旨在解決使用TinyMCE或CKEditor等富文本編輯器時(shí)，HTML標(biāo)簽內(nèi)容無(wú)法正確保存到數(shù)據(jù)庫(kù)的問(wèn)題。文章將詳細(xì)闡述如何通過(guò)JavaScript獲取編輯器的完整HTML內(nèi)容，并將其安全地發(fā)送至PHP后端，最終利用預(yù)處理語(yǔ)句將包含HTML標(biāo)簽的數(shù)據(jù)高效、安全地存儲(chǔ)到數(shù)據(jù)庫(kù)中，同時(shí)提供關(guān)鍵代碼示例和安全最佳實(shí)踐。

引言：富文本編輯器內(nèi)容存儲(chǔ)的挑戰(zhàn)

在Web開(kāi)發(fā)中，富文本編輯器（如TinyMCE、CKEditor）是用戶(hù)輸入格式化內(nèi)容（如文章、博客）的常用工具。然而，開(kāi)發(fā)者常遇到的一個(gè)問(wèn)題是，當(dāng)用戶(hù)提交包含HTML標(biāo)簽（如、

、）的內(nèi)容時(shí)，這些標(biāo)簽未能正確地保存到數(shù)據(jù)庫(kù)中，導(dǎo)致格式丟失。這通常是因?yàn)樵诳蛻?hù)端提交數(shù)據(jù)時(shí)，沒(méi)有正確地獲取編輯器生成的完整HTML內(nèi)容，或者服務(wù)器端處理不當(dāng)。

默認(rèn)情況下，當(dāng)使用jQuery的serializeArray()方法提交表單時(shí)，它可能無(wú)法捕獲到富文本編輯器內(nèi)部生成的完整HTML結(jié)構(gòu)。富文本編輯器通常會(huì)將內(nèi)容渲染到一個(gè)iframe或特定的DOM元素中，而不是直接更新原始的標(biāo)簽的value屬性，導(dǎo)致表單序列化時(shí)獲取不到最新的、包含HTML標(biāo)簽的內(nèi)容。

客戶(hù)端解決方案：JavaScript 數(shù)據(jù)捕獲

要確保富文本編輯器生成的HTML內(nèi)容能夠被正確發(fā)送，我們需要在表單提交前，顯式地從編輯器實(shí)例中獲取其內(nèi)容，并將其作為表單數(shù)據(jù)的一部分。

1. TinyMCE 內(nèi)容獲取

TinyMCE提供了一個(gè)API來(lái)獲取當(dāng)前編輯器的內(nèi)容。最常用的方法是tinymce.activeEditor.getContent()，它會(huì)返回編輯器當(dāng)前的所有HTML內(nèi)容。

2. 表單數(shù)據(jù)處理

當(dāng)使用Ajax（如$.post）提交表單時(shí)，我們需要在序列化表單數(shù)據(jù)后，將從TinyMCE獲取的HTML內(nèi)容手動(dòng)添加到數(shù)據(jù)集中。同時(shí)，為了防止表單默認(rèn)的提交行為干擾Ajax請(qǐng)求，應(yīng)阻止其默認(rèn)行為。

以下是修正后的JavaScript代碼示例：

// 確保TinyMCE編輯器已正確初始化
tinymce.init({
    selector: 'textarea.tinymce', // 確保選擇器與HTML中的textarea匹配
    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'
});

$('#dataBtn').click(function(e){
    e.preventDefault(); // 阻止表單的默認(rèn)提交行為

    // 1. 從TinyMCE編輯器獲取完整的HTML內(nèi)容
    var myContent = tinymce.activeEditor.getContent();

    // 2. 序列化表單數(shù)據(jù)
    const data = $('#dataForm').serializeArray();

    // 3. 將獲取到的HTML內(nèi)容添加到數(shù)據(jù)數(shù)組中，覆蓋或添加名為'details'的字段
    // 確保這里的'details'與PHP中期望的字段名一致
    // 檢查并替換已存在的'details'字段，以防textarea的原始值被序列化
    let detailsFound = false;
    for (let i = 0; i <p><strong>HTML結(jié)構(gòu)示例：</strong></p><pre class="brush:php;toolbar:false">

Add Post

注意事項(xiàng)：

• 確保TinyMCE編輯器已在頁(yè)面加載時(shí)正確初始化，并且selector與HTML中的匹配。
• e.preventDefault()是關(guān)鍵，它阻止了表單通過(guò)傳統(tǒng)方式提交，確保Ajax請(qǐng)求能夠完全控制數(shù)據(jù)流。
• data.push({name: 'details', value: myContent}); 將正確的HTML內(nèi)容附加到待發(fā)送的數(shù)據(jù)中。如果原始的name屬性也是details，serializeArray()可能會(huì)包含一個(gè)空的details字段，因此上述代碼中增加了檢查和替換邏輯。

服務(wù)器端處理：PHP 數(shù)據(jù)接收與存儲(chǔ)

在PHP后端，一旦JavaScript正確發(fā)送了包含HTML標(biāo)簽的數(shù)據(jù)，接收過(guò)程相對(duì)簡(jiǎn)單。然而，安全性是此階段最重要的考量。直接將用戶(hù)提交的HTML內(nèi)容插入數(shù)據(jù)庫(kù)是極度危險(xiǎn)的，因?yàn)樗赡軐?dǎo)致SQL注入和跨站腳本（XSS）攻擊。

1. 數(shù)據(jù)接收

通過(guò)$_POST超全局變量即可獲取到JavaScript發(fā)送過(guò)來(lái)的HTML內(nèi)容。

// action.php
$details = $_POST['details'] ?? ''; // 使用null合并運(yùn)算符提供默認(rèn)值，防止未設(shè)置的錯(cuò)誤

2. 安全考量：SQL 注入防護(hù)

絕對(duì)不要直接將$_POST中的數(shù)據(jù)拼接到SQL查詢(xún)字符串中。這是SQL注入攻擊的常見(jiàn)入口。應(yīng)始終使用預(yù)處理語(yǔ)句（Prepared Statements）和參數(shù)綁定。

以下是使用PHP Data Objects (PDO) 實(shí)現(xiàn)預(yù)處理語(yǔ)句的示例：

<?php // action.php

// 數(shù)據(jù)庫(kù)連接配置 (請(qǐng)根據(jù)實(shí)際情況修改)
$host = 'localhost';
$db   = 'your_database_name';
$user = 'your_username';
$pass = 'your_password';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

$flag  = false;
$error = [];
$valid = [];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);

    $details = $_POST['details'] ?? ''; // 獲取富文本內(nèi)容

    if (!empty($details)) {
        $flag = true;
    } else {
        $error[] = "請(qǐng)?zhí)峁┰敿?xì)內(nèi)容！";
        $flag    = false;
    }

    if ($flag === true) {
        // 使用預(yù)處理語(yǔ)句插入數(shù)據(jù)，防止SQL注入
        $stmt = $pdo->prepare("INSERT INTO tbl_post(details) VALUES (?)");
        $result = $stmt->execute([$details]); // 綁定參數(shù)

        if ($result) {
            $valid[] = "數(shù)據(jù)添加成功！";
        } else {
            $error[] = "發(fā)生錯(cuò)誤！請(qǐng)稍后再試。";
        }
    } else {
        $error[] = "發(fā)生未知錯(cuò)誤！";
    }

} catch (\PDOException $e) {
    $error[] = "數(shù)據(jù)庫(kù)連接或操作失敗: " . $e->getMessage();
    // 生產(chǎn)環(huán)境中應(yīng)記錄詳細(xì)錯(cuò)誤日志，而非直接暴露給用戶(hù)
}

// 返回響應(yīng)給客戶(hù)端
if (!empty($error)) {
    echo '<div style="color: red;">' . implode('<br>', $error) . '</div>';
} else {
    echo '<div style="color: green;">' . implode('<br>', $valid) . '</div>';
}
?>

3. 數(shù)據(jù)庫(kù)字段類(lèi)型選擇

為了存儲(chǔ)包含大量HTML標(biāo)簽的富文本內(nèi)容，數(shù)據(jù)庫(kù)中對(duì)應(yīng)的字段類(lèi)型應(yīng)選擇能夠存儲(chǔ)長(zhǎng)文本的類(lèi)型，例如：

• TEXT: 可存儲(chǔ)約64KB（65,535字符）的數(shù)據(jù)。
• MEDIUMTEXT: 可存儲(chǔ)約16MB的數(shù)據(jù)。
• LONGTEXT: 可存儲(chǔ)約4GB的數(shù)據(jù)。

根據(jù)您的內(nèi)容長(zhǎng)度需求，選擇合適的類(lèi)型。對(duì)于大多數(shù)文章內(nèi)容，TEXT或MEDIUMTEXT通常足夠。

重要提示與最佳實(shí)踐

1. XSS 安全：存儲(chǔ)與展示

雖然我們將HTML內(nèi)容存儲(chǔ)到數(shù)據(jù)庫(kù)中，但絕不能在不加處理的情況下直接在網(wǎng)頁(yè)上顯示這些內(nèi)容。這是導(dǎo)致跨站腳本（XSS）攻擊的主要原因。

• 存儲(chǔ)時(shí)： 通常建議將原始HTML內(nèi)容存儲(chǔ)到數(shù)據(jù)庫(kù)中。

• 展示時(shí)： 在將內(nèi)容輸出到瀏覽器之前，必須進(jìn)行嚴(yán)格的XSS過(guò)濾或內(nèi)容清理?？梢允褂肞HP的DOMDocument結(jié)合HTML Purifier等庫(kù)來(lái)移除潛在的惡意腳本（如<script>標(biāo)簽、onerror屬性等），只保留安全的HTML標(biāo)簽和屬性。</script>

  // 示例：使用HTML Purifier進(jìn)行XSS過(guò)濾 (需要安裝)
  // composer require ezyang/htmlpurifier
  require_once 'vendor/autoload.php';
  use HTMLPurifier_Config;
  use HTMLPurifier;
  
  $config = HTMLPurifier_Config::createDefault();
  // 配置允許的HTML標(biāo)簽和屬性，例如只允許粗體、斜體、段落等
  // $config->set('HTML.Allowed', 'p,b,i,em,strong'); 
  $purifier = new HTMLPurifier($config);
  $clean_html = $purifier->purify($details_from_db); // 從數(shù)據(jù)庫(kù)中取出的內(nèi)容
  echo $clean_html; // 輸出凈化后的內(nèi)容

2. 數(shù)據(jù)驗(yàn)證與錯(cuò)誤處理

在服務(wù)器端，除了安全防護(hù)，還應(yīng)進(jìn)行業(yè)務(wù)邏輯驗(yàn)證（例如，內(nèi)容是否為空）和完善的錯(cuò)誤處理機(jī)制。將錯(cuò)誤信息返回給客戶(hù)端，以便用戶(hù)了解問(wèn)題所在。

3. 富文本編輯器初始化

確保TinyMCE或其他富文本編輯器在頁(yè)面加載時(shí)正確初始化，并且其配置（如插件、工具欄）符合您的需求。

總結(jié)

通過(guò)以上步驟，您可以有效地解決富文本編輯器HTML內(nèi)容無(wú)法正確保存到數(shù)據(jù)庫(kù)的問(wèn)題。關(guān)鍵在于：

1. 客戶(hù)端（JavaScript）： 使用編輯器提供的API（如tinymce.activeEditor.getContent()）獲取完整的HTML內(nèi)容，并確保將其作為表單數(shù)據(jù)的一部分發(fā)送。
2. 服務(wù)器端（PHP）： 始終使用預(yù)處理語(yǔ)句將數(shù)據(jù)安全地插入數(shù)據(jù)庫(kù)，以防止SQL注入。
3. 安全（XSS）： 在將數(shù)據(jù)庫(kù)中存儲(chǔ)的HTML內(nèi)容顯示到前端時(shí)，務(wù)必進(jìn)行嚴(yán)格的XSS過(guò)濾，以保護(hù)用戶(hù)和網(wǎng)站安全。

遵循這些最佳實(shí)踐，您將能夠構(gòu)建一個(gè)既功能強(qiáng)大又安全可靠的Web應(yīng)用程序，有效管理用戶(hù)輸入的富文本內(nèi)容。

The above is the detailed content of Master JavaScript and PHP to implement rich text editor HTML content library. For more information, please follow other related articles on the PHP Chinese website!