An alternative way to include the newest version of CKEditor 4


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