An alternative way to include the newest version of CKEditor 4

Language

XPages

Tags

CKEeditor XPages Custom control Javacript Java Beans MS Word

Author

René vd Weide

Submitted on

April 12, 2021 at 2:25 AM

Rating

Downloads

Notes

CKeditor is developing rapidly, however the implementation in XPages is staying behind.

Pasting content from MS Word for example isn't working anymore like it supposed to do and loading large chunks of content from a Java bean into an inputRichText field is taking like forever.

I created an alternative way of implementing a new CKeditor.

Use the following steps:

0. Your application contains a Javabean "Name" which contains a field "field" and a getter en setter. However any name will do, just change the properties.

1. First download the latest version of CKeditor 4 from the site https://ckeditor.com/ckeditor-4/

2. Open the Navigator view in Domino Designer

3. Paste the CKEditor into: /WebContent/ckeditor4

4. Create a Custom Control with the following name: ckEditor4RichText

5. Paste the code and save the control

6. Add property defenitions to the CC:
fieldName with type: String
toolbar with type String
beanvalue with type: object AND editor: Method Binding Editor

7. Create a XPage and insert the Custom Control:

toolbar=" toolbarGroups: [ { name: 'mode' }, { name: 'basicstyles' } ]">

The toolbar can implement any CKEditor toolbar. this example contains just a basic toolbar.

8. Now compile and watch the magic :)

Note:
You can add any kind of plugin to the CKEditor.
Some advanced knowledge of Domino Designer and Javascript could be handy.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.resources>

        <xp:headTag tagName="script">
            <xp:this.attributes>
                <xp:parameter name="src">
                    <xp:this.value><![CDATA[#{javascript:    return "/ckeditor4/ckeditor.js";}]]></xp:this.value>
                </xp:parameter>
                <xp:parameter name="type" value="text/javascript" />
                <xp:parameter name="clientSide" value="true" />
            </xp:this.attributes>
        </xp:headTag>
    </xp:this.resources>

    <xp:this.dataContexts>
        <xp:dataContext value="#{javascript:this.getId()}" var="id">
        </xp:dataContext>
    </xp:this.dataContexts>


    <xp:inputTextarea id="editorCKE"></xp:inputTextarea>
    <xp:inputTextarea id="inputTextareaCKE" style="display:none;"
        value="#{compositeData.beanValue[compositeData.fieldName]}"
        disableClientSideValidation="true">
    </xp:inputTextarea>

    <xp:scriptBlock id="ckeloader">
        <xp:this.value><![CDATA[

            var idck=$("[id$='#{id}:editorCKE']");
             var textidck=$("[id$='#{id}:inputTextareaCKE']");

            if (CKEDITOR.instances[idck[0].id] !== undefined) {
                    textidck.val(CKEDITOR.instances[idck[0].id].getData());
            }
            CKEDITOR.replace(idck[0].id,{
                #{javascript:compositeData.toolbar},
                on: {
                    change : function( evt ) {
                            var ckId=idck[0].id;
                            var text=ckId.replace('#{id}:editorCKE','#{id}:inputTextareaCKE');
                            txtId = $("[id='" + text + "']");
                            if (txtId[0]!==undefined)    {
                                txtId.val(CKEDITOR.instances[ckId].getData());
                            }

                               }
            }
            });

            CKEDITOR.instances[idck[0].id].setData(textidck.val());

        ]]></xp:this.value>
    </xp:scriptBlock>

</xp:view>

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...