CKEditor Integration

Version 11.1 by Marius Dumitru Florea on 2016/02/19 13:32

page_white_editAdds support for editing wiki pages using CKEditor.
TypeXAR
Category
Developed by

Marius Dumitru Florea

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1
Compatibility

XWiki 6.2.5+

Installable with the Extension Manager

Description

Adds support for editing wiki pages using CKEditor. After installing this extension you should see a new entry in the Edit menu called "CKEditor". Of course, in order to get the Edit menu you need to set the "User Type" to "Advanced" in your user profile preferences.

editMenu.png

The editor supports all standard formatting features. You can edit the source (Source tool bar button) and the output of the wiki macros is protected (read only).

editMode.png

Customization

Replace the Default Editor

By default this extension adds a new "CKEditor" entry to the Edit menu. This means that the CKEditor won't be available for your simple users because only the advanced users have the Edit menu. The simple users have only the Edit button/link/icon. In order to open the CKEditor by default (i.e. replace the default editor) you can edit the CKEditor.EditMenuEntry page in Objects mode and replace the Code property of the existing JavaScriptExtension object with:

require(['jquery'], function($) {
  $('#tmEdit > a, a#tmEditDefault').attr('href', function(index, url) {
   return url + (url.indexOf('?') < 0 ? '?' : '&') + 'editor=inline&sheet=CKEditor.EditSheet';
  });
  $('a#tmEditWysiwyg').attr('href', function(index, url) {
   return url.replace('editor=wysiwyg', 'editor=inline&sheet=CKEditor.EditSheet');
  });
});

As a result the URL of the default edit link will point to the CKEditor. This has no effect though if you open the edit page directly using the URL (browser address bar). If you want the default edit URL (e.g. /xwiki/bin/edit/A/B/C) to open the CKEditor then you'll have to modify the edit.vm Velocity template (e.g. in a custom skin).

Future

The following is not yet supported but we plan to implement in the future:

  • Add link to wiki page and attachment
  • Insert image from wiki page attachments
  • Insert wiki macro
  • Configure the editor from the administration

Other tasks remaining to do if we wanted to replace the current WYSIWYG editor:

  • Convert the existing functional tests (or add new ones)

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.2

This version includes the following:

v1.1

This version includes the following:

v1.0

The first version of the integration includes:

  • a new entry in the Edit menu to trigger the CKEditor
  • standard editing features (text formatting, styles, tables, etc.)
  • support for editing the wiki syntax (the Source button on the tool bar)
  • support for protecting wiki macro output (read only)
  • preview, save, save & continue, cancel

Dependencies

Dependencies for this extension (org.xwiki.contrib:application-ckeditor-ui 1.2):

Tags:
    

Get Connected