CODEWITHSUNDEEP
ckeditorxpages
Fab1n
Fab1n

Reputation: 2304

Customize CKEditor under XPages (the right way)

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:

Upvotes: 1

Views: 2487

Answers (3)

Mark Leusink
Mark Leusink

Reputation: 3757

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>

Upvotes: 2

stwissel
stwissel

Reputation: 20394

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!

Upvotes: 1

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15739

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/

Upvotes: 0

Related Questions