This article details how to solve the problem that HTML tags cannot be saved to the database correctly when using rich text editors such as TinyMCE or CKEditor. The core solution is to use tinymce.activeEditor.getContent() in client JavaScript to accurately get the editor's complete HTML content and pass it correctly to the server. At the same time, it emphasizes that when receiving data in PHP backend, necessary security processing, such as SQL injection protection and XSS attack prevention, ensure data integrity and system security.

When creating content using rich text editors such as TinyMCE or CKEditor, a common problem is that when a user submits a form, all HTML formats are lost in the database, leaving only plain text. This is usually not because the HTML tag is stripped, but because the front-end script fails to properly get the full HTML content generated by the rich text editor when collecting form data.

Problem analysis

In the original code, JavaScript uses $('#dataForm').serializeArray() to serialize form data. This method is usually effective for standard or elements. However, rich text editors (such as TinyMCE) hide the original <textarea> after initialization and replace it with a feature-rich editing interface. The content entered by the user in the editor will not be synchronized back to the original <textarea> element in real time, so serializeArray() cannot get the actual HTML content in the editor when submitting.

Solution: Front-end JavaScript processing

To solve this problem, we need to manually get its current HTML content from the rich text editor instance before submitting the form and add it to the data to be submitted. TinyMCE provides an API method tinymce.activeEditor.getContent() to get the editor's complete HTML content.

The following is a modified JavaScript code example:

 // Make sure the TinyMCE editor has been initialized correctly tinymce.init({
    selector: 'textarea.tinymce', // Make sure the selector matches the textarea in HTML 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'
    // ... other TinyMCE configurations});

//Bind form submission event $('#dataBtn').click(function(e){
    e.preventDefault(); // Block the default submission behavior of the form to manually submit it through AJAX // 1. Get the complete HTML content of the TinyMCE editor // tinymce.activeEditor Points to the currently activated editor instance var myContent = tinymce.activeEditor.getContent();

    // 2. Serialize other data of the form const data = $('#dataForm').serializeArray();

    // 3. Add the content of TinyMCE to the serialized data array // Make sure that the 'name' attribute is consistent with the variable name (such as $_POST['details']) received by the backend PHP data.push({name: 'details', value: myContent});

    // 4. Use AJAX to send data to the backend $.post(
        $('#dataForm').attr('action'), // Get the form's action attribute as the request URL
        data, // Send complete data containing rich text content function(result) {
            // Process the result $('#dataResult').html(result);
        }
    );
});

Code explanation:

• e.preventDefault(): This is a very important step, which prevents the browser's default form submission behavior. Without this line, the form will be submitted immediately when the Submit button is clicked, and our AJAX request may not have time to send, or may result in duplicate submissions.
• tinymce.activeEditor.getContent(): This is the correct way to get the current HTML content of the TinyMCE editor. It returns an HTML string containing all formats and tags.
• $('#dataForm').serializeArray(): Still used to get data for other non-rich text fields in the form.
• data.push({name: 'details', value: myContent}): Adds the HTML content obtained from TinyMCE as a new key-value pair to the data array generated by serializeArray(). Here name: 'details' must be consistent with the $_POST key name expected to be received in the backend PHP script.

Backend PHP processing and security considerations

In the PHP backend, once the frontend correctly sends a request containing HTML content, the way of receiving data is similar to processing a normal text field. However, since it is received by the user input HTML content, security is the primary concern.

 <?php // Assume $db is your database operation class or connection object // Introduce database connection and class (based on your project structure)
// require_once &#39;path/to/database_class.php&#39;;
// $db = new Database(); // Example $details = &#39;&#39;; // Initialize the variable// Check if $_POST[&#39;details&#39;] exists and get the content if (isset($_POST[&#39;details&#39;])) {
    $details = $_POST[&#39;details&#39;];
}

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

if (!empty($details)) {
    $flag = true;
} else {
    $error[] = "Please provide details!";
    $flag = false;
}

if ($flag == true) {
    // **Important: Secure processing must be done before inserting user input into the database! **

    // 1. SQL injection protection: Use prepared statements (Prepared Statements)
    // This is the most recommended way to prevent SQL injection.
    // The example uses PDO, if you use MySQLi, the principle is similar.
    try {
        // Assume $pdo is your PDO database connection object// $stmt = $pdo->prepare("INSERT INTO tbl_post(details) VALUES (?)");
        // $stmt->execute([$details]);

        // If you are using a custom database class, make sure it uses preprocessing statements or appropriate escape functions internally // For example, if $db->insert() is not processed internally, you need to handle it manually // $details_escaped = $db->escape($details); // Assume that your database class has escape method // $query = "INSERT INTO tbl_post(details)VALUES('$details_escaped')";

        // Assume that the preprocessing statement or safe escape of $query = "INSERT INTO tbl_post(details)VALUES(?)"; // Use the placeholder $result = $db->insert($query, [$details]); // Assume that the insert method supports the preprocessing parameter if ($result) {
            $valid[] = "Data added successfully!";
        } else {
            $error[] = "The operation failed, please try again later!";
        }
    } catch (PDOException $e) {
        $error[] = "Database operation error: ". $e->getMessage();
    }

} else {
    $error[] = "An unknown error occurred!";
}

// Output result (usually in JSON format for front-end AJAX processing)
if (!empty($valid)) {
    echo json_encode(['status' => 'success', 'message' => implode(', ', $valid)]);
} else {
    echo json_encode(['status' => 'error', 'message' => implode(', ', $error)]);
}
?>

Safety precautions:

1. SQL Injection Prevention:
   • Prepared Statements are highly recommended : This is a best practice to prevent SQL injection. It separates SQL query logic from data, ensuring that user input is not interpreted as SQL commands. Whether using PDO or MySQLi, this approach should be preferred.
   • Avoid splicing of user input directly into SQL query strings. If you have to splice (not recommended), use database-specific escape functions (such as mysqli_real_escape_string()), but this is not as safe as preprocessing statements.
2. Cross-site scripting attack (XSS Prevention):
   • When the HTML content entered by the user is stored into the database, its original format is usually retained. However, XSS protection is required when taking these contents out of the database and displaying them on a web page .
   • Filter or Purify HTML (HTML Sanitization) : Use specialized libraries (such as HTML Purifier for PHP) to filter out potential malicious HTML tags and attributes (such as <script> tags, onerror events, etc.). This ensures that only secure HTML tags are rendered, preventing attackers from injecting malicious scripts.</script>
   • Never output the HTML entered by the user directly : unless you are sure that it has been strictly purified.

Database field type selection

Content generated by rich text editors usually contains a large amount of HTML tags and text, which can result in longer content lengths. Therefore, when designing database tables, you should choose a field type that can store long text:

• MySQL:
  • TEXT: Store up to 65,535 characters.
  • MEDIUMTEXT: Store up to 16,777,215 characters.
  • LONGTEXT: Store up to 4,294,967,295 characters (4GB). Choose the right type according to the expected length of the content, usually TEXT or MEDIUMTEXT is sufficient to meet most of the needs.

Summarize

To properly insert HTML content from rich text editors such as TinyMCE into the database, the key is how front-end JavaScript accurately gets the editor's content and sends it to the server. The complete HTML string can be obtained through the tinymce.activeEditor.getContent() method. When processing backend PHP, in addition to receiving data, it is more important to strictly implement SQL injection protection (using preprocessing statements) and XSS attack prevention (purifying HTML when displayed) to ensure the security of the application. Correct front-end collaboration and rigorous security measures are the basis for building robust web applications.

The above is the detailed content of Master the content library of rich text editors: the collaborative practice of JavaScript and PHP. For more information, please follow other related articles on the PHP Chinese website!