CKEditor 4 quick setup with custom control

CKEditor is widely used WYSIWYG (What you see is what you get ) editor with lots of cool features and customizations.
We can customize which buttons to show and which plugin to load (we can remove plugin from loading if not required like print, fullscreen) this will increase performance of the page.

Option 1

Download complete package of CKEditor 4.  http://ckeditor.com/download

Option 2

Customize  CKEditor 4 with required plugins, skins and languages. http://ckeditor.com/builder

1. Extract

Extract your downloaded file to JS folder, dont change the folder structure of ckeditor. You can override css in your custom css no need to touch default skin css file.

html
-/images
-/js/ckeditor
-/css/

2. Integrate using class

Include script at the bottom of the page

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

Now using only class we can integrate CKEditor add class “ckeditor”

<textarea id="editor1" name="editor1" class="ckeditor"><strong>&copy Wasim Shaikh</strong></textarea>

Live Demo 1

You can download/fork source code

Coming soon next topics.

3. Adding multiple editor
4. Customizing Buttons(controls)
5. Removing Plugins
6. Get Data of CKeditor

  • AshhaR HasaN

    Thanks a lot, it was helpful…

    • http://blog.wasimshaikh.com Wasim Shaikh

      You are welcome, Dont forget to subscribe to mailing list.