Andy Tran

How to Embed CKEditor in Web Page?

by | 10 Aug, 2020 | SharePoint | 0 comments


What is CKEditor?

CKEditor is an open-source editor and it is designed to edit HTML documents in the browser. It is a WYSIWYG (What you see is what you get) text editor that brings you common word processor features on to your web content. Today we will see how to Embed CKEditor.

You can download the package from this link –

  • It will display the following 4 packages.

CKEditor packages

  • Download the zip file
  • Extract the zip file in the root folder.
  • Enter the URL in your browser http://localhost/ckeditor/samples/. If the basic installation is successful, you will be able to see the following page,


Embed CKEditor in a Web page

Once the sample page has opened, you can build the web page with CKEditor.

To Embed CKEditor in a webpage add the following code in <head> tag

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

Add the following code In <body> tag.

<textarea name=”editor1″ id=”editor1″ rows=”10″ cols=”80″> Add text to edit </textarea>

The below script will replace the <textarea> with the CKEditor.

<script> CKEDITOR.replace( ‘editor1’ ); </script>

Try with the sample code

CKEditor embed code

CKEditor sample page

See more about WordPress blogs here .

Share this article...


Submit a Comment

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

The reCAPTCHA verification period has expired. Please reload the page.