Massive Inline Editing and CKEditor Additions for eXo Platform 4.1

Over the past few weeks, we have started making several improvements for version 4.1 of the eXo Platform. We have worked hard to improve your editing experience with all the editors on the platform (Documents, Forums, Answers); they are now more intuitive and easy to use. We have worked on different parts, upgrading the current CKEditor, but we are also introducing an important new feature that will help you work faster with the inline editing. This upgrade includes a new skin and a reviewed WYSIWYG mode that completely fits the platform style.

Moreover this upgrade includes functionalities like:

Massive inline editing.
Advanced Content Filter to check the content you will paste from html to ready-to-use content.
Spellchecker without any server integration required; it uses the services provided by http://WebSpellChecker.net.
It’s now very easy to find and replace text in your web content.

We also have removed some old behavior and deprecated functionalities. For example, there is no more pop up on the forum to copy and paste the text! Good-bye FCKEditor and welcome CKEditor 4.1 across the platform.

The major improvement we have introduced is a new functionality that will help all web contributors create and easily review all their content. The inline mode has been greatly improved and is now a massive inline editing mode. It’s now very easy to edit all your web content and switch from one to another while it’s saving. The editor is also much faster and doesn’t break your layout and style.

Moreover, we have aligned the different versions of CKEditor in order to have only one editor. All the previous CKEditor plugins have been kept and reviewed to make the style fully integrated in the platform.
On the Forum application, you will find the existing actions like “quote” or {code}:

And it will be the same thing on the Answers application:

Finally, developers are now able to easily use CKEditor in their own pages and portlets. You can easily call and use CKEditor as in following example.

First, you must load CKEditor in your page. To do so, you need to include a single file reference in your page with the following block code:

<script type="text/javascript">
    require(['/CommonsResources/ckeditor/ckeditor.js'], function() {
        CKEDITOR.replace( 'editor1' );
    });
</script>

Then, you can insert a <textarea> where the editor is needed. This <textarea> is invisible to the end user, but it’s needed to create an editor instance such as:

<textarea name="editor1" id="editor1">Initial value.</textarea>

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.