Improve CKEditor in elgg

In this article I will give you a step-by-step guide on how to improve the CKEditor in Elgg 1.12Overview

Elgg used to implement TinyMce as a WYSIWYG text editor. After several suggestions done by users, Elgg now comes with CKEditor. However, just like its predecessor it comes with basic text editing tools. That’s why today we are going to learn how to add more features to CKEditor.

Getting Started

1. Download CKEditor Extended from the elgg community. Choose the 1.11 version:

ckeditor elgg community download arvixe tutorials

2. Upload & Install the plugin. If you don’t know how to do this, please read this article.

3. Log into your elgg network wit your Administrator account and open the Admin Dashboard:

elgg administration latest version arvixe tutorial linux

4. Go to menu “Configure -> Plugins“. Find the CKEditor Extended plugin and activate it:

elgg plugins menu arvixe tutorialsckeditor extended elgg arvixe tutorials elgg blog

5. Before using CKEditor Extended, we need to configure its additional settings. Go to menu “Configure -> Settings -> CKEditor Extended“:

ckeditor extended settings menu elgg arvixe menu

6. Here comes a tricky part. The plugin offers a standard set of options that are good but not enough. What you need to do to enable all options is the following. Remove everything from this text box:

remove code ckeditor settings arvixe elgg hosting tutorials

7. Paste the code below and save the changes:

toolbar: [['Bold', 'Italic', 'Underline'], [Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt','-','Blockquote','CreateDiv',
removeButtons: 'Subscript,Superscript', // To have Underline back
allowedContent: true,
baseHref: elgg.config.wwwroot,
removePlugins: 'contextmenu,tabletools,resize',
defaultLanguage: 'en',
language: elgg.config.language,
skin: 'moono',
uiColor: '#EEEEEE',
contentsCss: elgg.get_simplecache_url('css', 'elgg/wysiwyg.css'),
disableNativeSpellChecker: false,
disableNativeTableHandles: false,
removeDialogTabs: 'image:advanced;image:Link;link:advanced;link:target',
autoGrow_maxHeight: $(window).height() - 100,

ckeditor full featured editor for the web elgg arvixe tutorials

8. Now the CKEditor will look like this:

ckeditor extended elgg arvixe hosting

9. And that’s it! Now you have an extended CKEditor.

ckeditor extended elgg arvixe hosting

This Concludes Improve CKEditor in elgg

Looking for quality Elgg Hosting? Look no further than Arvixe Web Hosting!

Happy Hosting!

Rodolfo Hernandez

Tags: , , , , , , , , , , | Posted under Elgg | RSS 2.0

Author Spotlight

Rodolfo Hernandez

I like photography and reading books. Currently working for Arvixe as Elgg Community Liaison. Elgg Security Expert Web Security Expert CEO of UDP SW Social Web

Leave a Reply

Your email address will not be published. Required fields are marked *