ckeditor Getting started with ckeditor
Remarks
CKEditor is a JavaScript based WYSIWYG editor created for use within web pages. It is open source and plugin based making it both customizable and extensible.
The CKEditor website can be found in http://www.ckeditor.com and the source code of the library is available on github.
The official documentation of CKEditor can be found at http://docs.cksource.com/Main_Page
Versions
| Version | Notes | Release Date |
|---|---|---|
| 4.2 | JQuery Adapter, HiDPI icons, dropped support for Internet Explorer 7 and Firefox 3.6 | 2013-07-25 |
| 4.2.1 | 2013-09-10 | |
| 4.2.2 | 2013-10-14 | |
| 4.2.3 | 2013-11-14 | |
| 4.3 | Widget System, Internet Explorer 11 Support | 2014-11-14 |
| 4.3.1 | 2013-12-10 | |
| 4.3.2 | 2014-01-21 | |
| 4.3.3 | 2014-02-25 | |
| 4.3.4 | 2014-03-25 | |
| 4.3.5 | 2014-04-24 | |
| 4.4 | Code Snippet plugin, Enhanced Image plugin, Advanced Content Filter | 2014-04-24 |
| 4.4.1 | 2014-05-20 | |
| 4.4.2 | 2014-06-24 | |
| 4.4.3 | 2014-07-15 | |
| 4.4.4 | 2014-08-20 | |
| 4.4.5 | 2014-09-25 | |
| 4.4.6 | 2014-11-25 | |
| 4.4.7 | 2015-01-27 | |
| 4.4.8 | 2015-07-02 | |
| 4.5 | files drag&drop support, integration with the native clipboard, new low level APIs | 2015-07-02 |
| 4.5.2 | 2015-08-04 | |
| 4.5.3 | 2015-08-19 | |
| 4.5.4 | 2015-10-06 | |
| 4.5.5 | 2015-11-12 | |
| 4.5.6 | 2015-12-09 | |
| 4.5.7 | 2016-02-04 | |
| 4.5.8 | 2016-03-31 | |
| 4.5.9 | 2016-05-13 | |
| 4.5.10 | 2016-07-13 | |
| 4.5.11 | 2016-09-08 | |
| 4.6 | new default skin, Paste from Word rewritten, new plugins: Upload File, Balloon Panel | 2016-11-15 |
| 4.6.1 | 2016-12-08 |
CKEditor - Inline Editor Example
Create a file ckeditor-inline.html with the following content:
<!DOCTYPE html>
<html>
<head>
<title>CKEditor Inline Demo!</title>
</head>
<body>
<script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
<div id="editor1" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
</div>
</body>
</html>
Explanation of code
-
Loads the CKEditor library from the CKEditor CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
-
Create a new DIV element with all of the content that we want inside the Editor
<div id="editor1" contenteditable="true"> ALL CONTENT HERE </div>
The important thing to note here is the
contenteditable="true"inside theDIVelement. The CKEditor will automatically replace every element that hascontenteditableattribute with an inline editor.
For more refer to the Documentation.
Get the HTML content of CKEditor
Create a file ckeditor-content.html with the following content:
<!DOCTYPE html>
<html>
<head>
<title>CKEditor Get Content Demo!</title>
</head>
<body>
<script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
<div id="editor1" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
</div>
<button id="btn1">Click to get the content</button>
<script>
document.getElementById('btn1').addEventListener('click', function() {
content = CKEDITOR.instances.editor1.getData()
console.log(content);
}, false);
</script>
</body>
</html>
Explanation of code
-
Loads the CKEditor library from the CKEditor CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
-
Create a new DIV element with all of the content that we want inside the Editor
<div id="editor1" contenteditable="true"> ALL CONTENT HERE </div> -
Add a
clicklistener to the button we have, and once clicked - get the HTML content of the ckeditor.<script> document.getElementById('btn1').addEventListener('click', function() { content = CKEDITOR.instances.editor1.getData() console.log(content); }, false); </script>
- The name of the editor
editor1inCKEDITOR.instances.editor1is the value of theidattribute of the element we used (<div id="editor1" ... >)- Note the usage of
console.log- the HTML content of the editor will be available in the console (you can open the console by clicking the F12 key)
For more refer to the Inline Documentation page.
Getting Started
Create a file ckeditor.html with the following content:
<!DOCTYPE html>
<html>
<head>
<title>CKEditor Demo!</title>
</head>
<body>
<script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
<div id="editor1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
</div>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>
Explanation of code
-
Loads the CKEditor library from the CKEditor CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
-
Create a new DIV element with all of the content that we want inside the Editor
<div id="editor1"> ALL CONTENT HERE </div>
-
Tell the
CKEDITORobject to replace the element with the ideditor1with a WYSIWYG editor (the CKEditor).<script> CKEDITOR.replace( 'editor1' ); </script>
For more refer to the CKEditor Documentation page.
