Add WYSIWYG HTML Editor to Textarea with CKEditor

By: CodexWorld | In: jQuery | Last Updated: Feb 5, 2019

WYSIWYG Editor is very useful when you want to allow the user to insert the formatted text content in textarea input field. Generally, the WYSIWYG editor is driven by JavaScript, converts formatted text to HTML before submitting the web form. The user can insert HTML content in the textarea and change the format directly in the text editor. When the editor content is submitted, the exact text format is posted as HTML to the server-side.

There are many WYSIWYG editor plugins are available to add text editor to textarea using jQuery. CKEditor is the one of them to add a rich text editor to textarea. CKEditor is a WYSIWYG editor plugin that allows converting textarea to the fully-featured HTML editor. In this tutorial, we will show how can you add CKEditor to textarea in minutes.

Before getting started, download the latest version of CKEditor plugin. Extract the downloaded archive and place it in the root of your web application directory. You don’t need to download the CKEditor separately, all the required files are included in our source code.

Add CKEditor to Textarea

Create a textarea element in the webpage where you want to add WYSIWYG HTML Editor.

<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 need to specify the ID of the element which will be replaced with WYSIWYG HTML editor.

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

The following example 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, the editor content will be posted to the form action URL as HTML. You can get the HTML content of the CKEditor using the $_REQUEST or $_POST method in PHP.