ckeditor Getting started with ckeditor Getting Started
Example
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.
