The WYSIWYG editor allows the user to insert the HTML formatted text in the input field. You can easily add WYSIWYG HTML editor to textarea using jQuery plugin. There are many jQuery plugins are available to add WYSIWYG editor to texarea. CKEditor and TinyMCE editor is the most popular plugin to add rich text editor on the web page.
Cannot store textarea with newline to database. PHP Forums on Bytes.
Once the WYSIWYG editor content is submitted, the value needs to be stored for later use. Generally, in the web application, the database is used to store the input content. To save the WYSIWYG editor content, the input HTML value needs to be inserted in the database. PHP $_POST method is the easiest way to get HTML editor value and save WYSIWYG Editor content in the database. In this tutorial, we will show you how to insert and save HTML content of WYSIWYG editor in the database using PHP and MySQL.
Create Database Table
To store the HTML editor content, a table needs to be created in the database. The following SQL creates an editor
table with some basic fields in the MySQL database.
Add WYSIWYG HTML Editor to Textarea with CKEditor
Database Configuration (dbConfig.php)
The dbConfig.php
file is used to connect the database using PHP and MySQL. Specify the database host ($dbHost
), username ($dbUsername
), password ($dbPassword
), and name ($dbName
) as per your database credentials.
WYSIWYG HTML Editor Form
At first, create an HTML form with textarea input field to allow the user to add content and submit data.
To accept HTML content from the user, the textarea element needs to be converted in WYSIWYG Editor. You can use any WYSIWYG editor plugin (CKEditor or TinyMCE) to add HTML editor to textarea input field.
Add WYSIWYG editor with CKEditor:
Include the JS library file of CKEditor plugin.
Use CKEDITOR.replace()
method to replace the textarea field with WYSIWYG editor.
Add WYSIWYG editor with TinyMCE:
Include the JS library file of TinyMCE editor plugin.
Use tinymce.init()
method to replace the textarea field with WYSIWYG editor.
Save HTML Editor Content in the Database
Once the form is submitted, the editor’s content is posted to the server-side script (submit.php
) for inserting the HTML formatted content in the database.
- Retrieve the editor content from the posted form data using the $_POST method in PHP.
- Insert the HTML content in the database using PHP and MySQL.
- Display the status message to the user.
Conclusion
Not only the CKEditor and TinyMCE editor content, but you can also use the example code to insert any HTML editor content in the database. This code snippet is very useful for the CRUD application where the WYSIWYG editor is used for insert HTML content. You can easily enhance our script functionality to add additional input fields with WYSIWYG editor and save all the content in the database using PHP and MySQL.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request