27778

How to configure the CKEditor under XPages?

Question:

My goal is to add some custom-styles to the CKEditor (Version 3.6.6.2).

I already got a solution, but they interfere with the build-in image-upload functionality.

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/wLYHR.png" data-original="https://i.stack.imgur.com/wLYHR.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

The feature to add an image, which is then stored in the current document, is gone.

So i am afraid that there are more, currently undiscovered, problems with it.

<b>My Current Solution</b>

<xp:inputRichText value="#{document1.Body}" id="html1" htmlFilter="identity" htmlFilterIn="identity" /> <xp:scriptBlock id="scriptBlock1" type="text/javascript"> <xp:this.value><![CDATA[ var ckEditorClientId = "#{javascript: getClientId("html1")}"; CKEDITOR.replace( ckEditorClientId, {stylesSet: [ { name : 'MyStyle', element : 'span', attributes : { 'class' : 'myStyle' } } ], toolbar : CKEDITOR.config.toolbar_Full } ); ]]></xp:this.value> </xp:scriptBlock>

I haved tried to achieve that via dojoAttributes and/or config.js all day long - nothing worked out for me, but that.

I would be so happy, if anybody can tell me the right way to configure the CKEditor under XPages.

Answer1:

Is this still relevant? intec.co.uk/xpages-8-5-2-rich-text-extending-the-ckeditor It may not be, now a lot of the resources are in a plugin

[Edit by Dennis K.]

Solution

<xp:inputRichText value="#{document1.html}" id="html1" htmlFilter="identity" htmlFilterIn="identity"> <xp:this.dojoAttributes> <xp:dojoAttribute name="extraPlugins" value="stylesheetparser"></xp:dojoAttribute> <xp:dojoAttribute name="toolbarType" value="Full"></xp:dojoAttribute> <xp:dojoAttribute name="contentsCss" value="CKStyles.css"></xp:dojoAttribute> </xp:this.dojoAttributes> </xp:inputRichText>

CKStyles.css

//Example span.myClass { color: #00A6C7; font-size: 1.8em; font-weight:normal; }

Recommend