WYSIWYG Editor is handy when you want to permit the user to insert the formatted text content in the textarea input field.

Build an HTML5 Video Player with Custom Controls

Display Loading Image While Page Loads using jQuery and CSS

How to Create Loader Animation with CSS

Typically, the WYSIWYG editor is powered by JavaScript; you can convert formatted text to HTML before submitting the web form. So, the user can insert HTML content in the textarea and change the format directly in the text editor. When it provides the editor content, it posts the exact text format as HTML to the server-side.

There are many WYSIWYG editor plugins available to add text editor to textarea using jQuery. CKEditor is one of them because it adds a rich text editor to textarea.CKEditor is a WYSIWYG editor plugin that permits converting textarea to the fully-featured HTML editor. With the help of the following tutorial, we will explain to you how can you add CKEditor to textarea in minutes.

Before we begin, download the latest version of CKEditor plugin. Extract the downloaded archive and place it at the root of your web application directory. There is no need to download the CKEditor separately, and you can attach all the necessary files in our source code.

Add CKEditor to Textarea

Make a textarea element on the webpage. So, you can add WYSIWYG HTML Editor wherever you want.

<textarea name="editor" id="editor" rows="10" cols="80"></textarea>

Include the JS library file of CKEditor plugin.

<script src="ckeditor/ckeditor.js"></script>

Use CKEDITOR.replace() method to replace the textarea field with CKEditor. You only have to specify the ID of the element to replace it with the WYSIWYG HTML editor.

<script>
    CKEDITOR.replace('editor');
</script>

The following instance code shows how to add CKEditor on the webpage for replacing the textarea element with a rich text editor.

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CKEditor</title>
<meta charset="utf-8">
<!-- Include CKEditor library -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
    <textarea name="editor" id="editor" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
    </textarea>
</form>

<script>
    // Replace the <textarea> with a CKEditor
    CKEDITOR.replace('editor');
</script>

</body>
</html>

Save CKEditor Editor Content

Once the <form> is submitted, it will post the editor content to the form action URL as HTML. You can get the HTML content of the CKEditor using the $_REQUEST or $_POST method in PHP.

$_REQUEST['editor']

Conclusion

Firstly, WYSIWYG Editor is handy when you want to allow the user to insert the formatted text content in textarea input field. Secondly, using our sample code, you can easily add WYSIWYG HTML Editor to Textarea with CKEditor. At last, this CKEditor functionality would be beneficial for inserting HTML content in the textarea.

Also, read our previous blog- Highlight Keyword in Search Results with PHP and MySQL

Tags: CKEditor WYSIWYG