Web Designing and Web Development Company in mumbai

Mansi | 23 June 2020

CKEditor

What is CKEditor

CKEditor is an online amazing text editor that can be embedded inside html web pages. CKEditor is a "What You See Is What You Get" editor which means that the text edited in it looks similar to the results which end users will see after the document gets published. CKEditor brings popular editing features found in desktop word processors like Microsoft Word and OpenOffice.org Writer.

How to use CKEditor

Step1: Download CkEditor

Download CkEditor package Download package
There are four types of package:
1) Basic Package
2) Standard Package
3) Full Package
4) Customize
Download the package as per your requirement.

Step1: Link CkEditor

Store ckeditor in the directory from where you can access the ckeditor.js file.
Include CKEditor.js file in your html page

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

or you can also use CKEditor CDN.

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

Step2: Replace Textarea

To restore textarea with CKEditor js include js function in your html page. js function:

<script type="text/javascript">
    CKEDITOR.replace( 'details');
</script>

Here, 'details' is id of the textarea.
CKEDITOR.replace() this function will restore the textarea with ckeditor.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example
</head>
<body>
<form>
<div id="form-textarea">
<textarea id="details" cols="40" rows="8" name="details" placeholder="Enter Details" required>
</div>

 <script src="ckeditor/ckeditor.js"></script>
 <script type="text/javascript">
      CKEDITOR.replace( 'details');
</script>
</form>
</body>
</html>

Output: