Customize CKEditor under XPages (the right way)

1
votes

I need to customize CKEditor's toolbar with custom buttons sets.

I have already read these questions/answers and linked ressources:

What they do works, if you always do a full page refresh. But if you do a partial refresh of a part of the page - including at least one rich text control (CKEditor version 4.3.2) - after the partial refresh CKEditor chooses a toolbar like 'Full' (I don't really know, but I think the default type) as toolbar type to display.

The problem is the whole dojo-widget - custom IBM CKEditor - thing. It makes your toolbar dojo property being 'forgotten/ignored' after a partial refresh (but it is still set!!!).

Anyone having experience/knowledge, how to solve this best, e.g. the IBM way (if there is any?!?!?)?

I solved it quick and dirty by changing properties of the global CKEditor JS variable (executed every time inside the partial refresh block): 

<xp:scriptBlock id="scriptBlock2">
    <xp:this.value>
        <![CDATA[
            CKEDITOR.config.readOnly = true;
            CKEDITOR.config.removePlugins = 'autogrow';
            CKEDITOR.config.autoGrow_minHeight = 250;
            CKEDITOR.config.autoGrow_maxHeight = 250;
            CKEDITOR.config.toolbarLocation = 'top';

            CKEDITOR.config.toolbar_readonly = [
                { name: 'tools', items: ['Find','Print', 'Preview', 'Maximize']}
            ];
        ]]>
    </xp:this.value>
</xp:scriptBlock>

System:

  • IBM Domino 9.0.1 FP2 (local on client PC)
  • OpenNTF Domino Framework in use
  • Windows 7 32 bit
3
ckeditorxpages

3 Answers

2
votes

I know this is an old post, but here's an approach that works:

The CK Editor uses a configuration file. By default it is this file: domino/html/ckeditor/config.js. It holds all the settings for the editor, including the toolbar. If you override that file by providing your own version (copy it from the original) and configuring the toolbar in your own version, that configuration will always be used, even when doing a partial refresh.

To make the CK Editor use your custom config file you need to add a dojo attribute to the xp:inputRichText control:

<xp:dojoAttribute
    name="customConfig"
    value="yourConfigFile.js">
</xp:dojoAttribute>
1
votes

You can add additional capabilities to your CK Editor using:

 <xp:inputRichText id="inputRichText1">
    <xp:this.dojoAttributes>
        <xp:dojoAttribute name="extraPlugins" value="mustache">
        </xp:dojoAttribute>      
    </xp:this.dojoAttributes>
 </xp:inputRichText>

and in JavaScript you add:

CKEDITOR.plugins.add( 'mustache', ...);

The full stories is in 2 parts on my blog here and here - Part 2

Let us know how it goes!

0
votes

You can use dojo.behavior to run a JavaScript function on page load and after each partial refresh. Here's an example of it in use, although this example is to add a FontAwesome image to categories on a DataView http://www.intec.co.uk/getting-awesome-category-icons-in-data-views/