AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home HTML & CSS

Add WYSIWYG HTML Editor to Textarea with CKEditor

Add WYSIWYG HTML Editor to Textarea with CKEditor

Lakshika Mathur by Lakshika Mathur
December 27, 2019
Reading Time: 3 mins read
0
Add WYSIWYG HTML Editor to Textarea with CKEditor

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

RELATED POSTS

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>

SEE ALSO: Import and Export CSV File using PHP and MySQL

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']

SEE ALSO: Auto Resize Textarea Height using jQuery

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: CKEditorWYSIWYG
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Build an HTML5 Video Player with Custom Controls
HTML & CSS

Build an HTML5 Video Player with Custom Controls

January 2, 2020
87
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
How to Create Loader Animation with CSS
HTML & CSS

How to Create Loader Animation with CSS

January 1, 2020
10
Accessing Webcam and Capture Image using HTML5 and JavaScript
HTML & CSS

Accessing Webcam and Capture Image using HTML5 and JavaScript

December 30, 2019
41
jQuery UI Autocomplete with Images and Custom HTML in PHP
HTML & CSS

jQuery UI Autocomplete with Images and Custom HTML in PHP

December 29, 2019
112
Convert HTML to PDF using JavaScript
HTML & CSS

Convert HTML to PDF using JavaScript

December 25, 2019
59
Next Post
Auto Resize Textarea Height using jQuery

Auto Resize Textarea Height using jQuery

Create Short URL using PHP URL Shortener

Create Short URL using PHP URL Shortener

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version