What is CKEditor
CKEditor is an open source, customizable web text editor that can be integrated to our webpages. It can be used in three different modes (Article editor, Document editor and Inline editor) for content creation. I was looking for a web editor like Google doc using which I can collect text data from students (but not requiring login with gmail), and I found CKEditor doing exactly what I wanted to do. I’m using it here as a web document editor.
In this blog post, I’m combining a few steps I did to integrate CKEditor to my webpage. This is the code I wrote after a few rounds of trial and error and many rounds of looking up on the CKEditor documentation and StackOverflow. Wish I found a blog like this when I was trying to implement this 😉
Setting up CKEditor
CKEditor is available for download here. I used the Standard package of the current stable version (Version 4.6.2 • 12 Jan 2017). All you have to do is to copy the folder ‘ckeditor’ from the downloaded zip file to your program files folder and you’re ready to go. The main steps are below:
Include ckeditor.js in the head section of your code:
<!-- make sure the src path points to your copied ckeditor folder --> <script src="ckeditor/ckeditor.js"></script>
Create a text area for the editor in the body section followed by your CKEditor instance:
<!-- creating a text area for my editor in the form -->
<textarea id="myeditor" name="myeditor" id="myeditor"></textarea>
<!-- creating a CKEditor instance called myeditor -->
<script type="text/javascript">
CKEDITOR.replace('myeditor');
</script>
This simple full code renders you a CKEditor with the default configuration options (Default toolbar, width, height etc. – All of these can be customized). Continue reading “Adding CKEditor to webpages in PHP #Code”