CKEditor Integration

Version 52.1 by Admin on 2016/08/08 00:04

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

Marius Dumitru Florea

Active Installs192
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

Starting with version 1.2 you can insert images by drag & drop or through the image dialog, by selecting from the existing image attachments. You can also create links to wiki pages or attachments, by selecting them from the document tree picker.

Starting with version 1.7 you can insert and edit wiki macros. There's a dedicated button for this on the tool bar that triggers the Macro Wizard.

Customization

Replace the Default Editor

When Editing a Page

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 navigate to the CKEditor.EditMenuEntry page and from the Objects editing mode 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).

When Editing a Section of a Page

In order to be able to edit page sections using the CKEditor you need to edit the CKEditor.EditMenuEntry page as indicated in the previous section and append the following JavaScript code to the end of the Code property:

require(['jquery'], function($) {
 var modifySectionEditLinks = function() {
   // Use the CKEditor for editing page sections.
   $('.edit_section > a').attr('href', function(index, oldHref) {
     return oldHref + '&editor=inline&sheet=CKEditor.EditSheet';
    });
  };
 if (window.XWiki && XWiki.domIsLoaded) {
    modifySectionEditLinks();
  } else {
   // XWiki 6.4+
   require(['xwiki-events-bridge'], function() {
      $(document).on('xwiki:dom:loaded', modifySectionEditLinks);
    });
  }
});

If you're using the CKEditor Integration version 1.2 or older you also need to modify the CKEditor.EditSheet page as indicated in this commit.

When Creating a Blank Page

When you create a page using the "Blank page" (or "Empty wiki page") type (template) you are redirected to the edit mode for that page. In order to use the CKEditor in this case, instead of the default WYSIWYG editor, you need to import the application-ckeditor-blank-page.xar file.

Future

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

  • Configure the editor from the administration
  • Import office documents
  • Image preview in the attachment picker
  • Automatically create an attachment link when dropping a file (that is not an image) over the editing area
  • Add support for packaging CKEditor plugins as XWiki Extensions

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.8

This version includes the following:

v1.7

This version includes the following:

v1.6.1

This version includes the following:

v1.6

This version includes the following:

v1.5

This version is not usable due to CKEDITOR-64. You should install a more recent version (1.6+).

This version includes the following:

v1.4

This version includes the following:

v1.3

This version includes the following:

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.8.3):

Tags:
    

Get Connected