Integrate CKEditor in HTML page using JavaScript

  •  
  •  
  •  
  •  
  •  
  •  

Hi friends, in this tutorial, I will show you how to integrate CKEditor in HTML page using JavaScript. CKEditor is a rich text editor for websites. CKEditor allows you so many powerful functions for creating and editing purpose of your text and HTML documents. This editor has many features as Microsoft Word, you can set font style, background color, can insert tables, you can import images into your document and many more. So here in this tutorial, we will see only how to add or integrate CKEditor in HTML page using JavaScript, we will not perform any saving or retrieving data from or to the database.

Also, you will like to read this tutorial–

Integrate CKEditor in HTML page using JavaScript

Integrate CKEditor in HTML page using JavaScript

let’s start to integrate CKEditor in HTML page using JavaScript. It is very simple and easy just one line of HTML code and a few lines of JavaScript codes.

Include CKEditor Script

You can load the CKEditor plugin to your web page by two way. One way is to use CDN, in this case, you do not need to download the CKEditor plugin and store it within your project folder.

<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>

Another way is to download the CKEditor and store it within your project root folder then you have to include the ckeditor.js file into your web page by the following way –

Download CKEditor from this link – Download.

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

HTML Code

The below HTML code is contained a <textarea>. The main thing of that HTML code is the ID attribute.

<textarea name="myeditor" id="myeditor">Welcome to the Mitrajit's Tech Blog</textarea>

JavaScript Code

The below JavaScript code will replace the above <textarea> with the CKEditor.

<script>
    window.onload = function() {
       CKEDITOR.replace('myeditor');
    };
</script>

CKEditor.replace(‘myeditor’); is enough to achieve our desired goal but if you write the above JavaScript code within the <head> section then you have to call that method within window.load event.

If you face any problem feel free to inform me in the comment section below. Please like and share this tutorial to Integrate CKEditor in HTML page using JavaScript with others. Kindly subscribe Mitrajit’s Tech Blog to keep yourself updated with the upcoming article.

About Mitrajit

One thought on “Integrate CKEditor in HTML page using JavaScript

Leave a Reply

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

Prove you are a human *