Andy Tran

How to Embed CKEditor in Web Page?

by | Aug 10, 2020 | SharePoint

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.

You can download the package from this link – https://ckeditor.com/ckeditor-4/download/

  • It will display the following 4 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 the CKEditor in Web page

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

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