in rich text text editor editor , the limitation should be visible as well as the number of characters entered as below

[vinuuu25]

rich text component, in dialog we need error message once the character limit is reached (Char limitation is 100)

2 ) And for editor , the limitation should be visible as well as  the number of characters entered as below

Can anyone help me on this?

[TarunKumar · Accepted solution]

Hi @vinuuu25 ,

Maxlegth property doesn't work  to a richtext field in AEM. Because RTE in dialog uses the concept of validation from the Form Validation in Granite UI. And, since, Inline-editing does not behave as a form, it can’t use that validation concept.

Create custom validator which will help you to add validation of maxlength even on the richtext field in AEM TouchUI.
Please try to adjust your client libs accordingly as per your project structure.

(function (window, $) {
    'use strict';
  
    var RTEMaxLengthValidation= function () {
        var CONST = {
            TARGET_GRANITE_UI: '.coral-RichText-editable',
            ERROR_MESSAGE: 'Your text length is {0} but character limit is {1}!',
        };
 
        function init() {
            // register the validator which includes the validate algorithm
            $(window).adaptTo('foundation-registry').register('foundation.validation.validator', {
                selector: CONST.TARGET_GRANITE_UI,
                validate: function (el) {
                    var $rteField = $(el);
                    var $field = $rteField.closest('.richtext-container').find('input.rich-text-class');
                    var maxLength = $field.data('maxlength');
                    var textLength = $rteField.text().trim().length;
                    if (maxLength && textLength > maxLength) {
                        return Granite.I18n.get(CONST.ERROR_MESSAGE, [textLength, maxLength]);
                    }
                    return null;
                }
            });
            // execute Jquery Validation onKeyUp
            $(document).on('keyup', CONST.TARGET_GRANITE_UI, function (e) {
                executeJqueryValidation($(this));
            });
        }
 
        function executeJqueryValidation(el) {
            var validationApi = el.adaptTo('foundation-validation');
            if (validationApi) {
                validationApi.checkValidity();
                validationApi.updateUI();
            }
        }
       return {
            init: init
        }
    }();
    RichTextMaxLengthValidation.init();
})(window, Granite.$);

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling=http://sling.apache.org/jcr/sling/1.0 xmlns:cq=http://www.day.com/jcr/cq/1.0 xmlns:jcr=http://www.jcp.org/jcr/1.0 xmlns:nt=http://www.jcp.org/jcr/nt/1.0
    jcr:primaryType="nt:unstructured"
    jcr:title="Richtext Maxlength"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[maxvalidator]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <caption
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                class="rich-text-class"
                                                fieldDescription="description."
                                                fieldLabel="Caption"
                                                maxlength="60"
                                                name="./caption"
                                                removeSingleParagraphContainer="{Boolean}true"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format
                                                        jcr:primaryType="nt:unstructured"
                                                        features="bold,italic"/>
                                                    <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="modifylink,unlink"/>
                                                    <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <misctools jcr:primaryType="nt:unstructured">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <default_copyright
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;copy;"
                                                                    name="copyright"/>
                                                                <default_euro
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;euro;"
                                                                    name="euro"/>
                                                                <default_registered
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;reg;"
                                                                    name="registered"/>
                                                                <default_trademark
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;trade;"
                                                                    name="trademark"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*">
                                                        <formats jcr:primaryType="nt:unstructured">
                                                            <default_p
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Paragraph"
                                                                tag="p"/>
                                                            <default_h1
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 1"
                                                                tag="h1"/>
                                                            <default_h2
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 2"
                                                                tag="h2"/>
                                                            <default_h3
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 3"
                                                                tag="h3"/>
                                                            <default_h4
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 4"
                                                                tag="h4"/>
                                                            <default_h5
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 5"
                                                                tag="h5"/>
                                                            <default_h6
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 6"
                                                                tag="h6"/>
                                                            <default_blockquote
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Quote"
                                                                tag="blockquote"/>
                                                            <default_pre
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Preformatted"
                                                                tag="pre"/>
                                                        </formats>
                                                    </paraformat>
                                                    <table
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-">
                                                        <hiddenHeaderConfig
                                                            jcr:primaryType="nt:unstructured"
                                                            hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
                                                            hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"/>
                                                    </table>
                                                    <tracklinks
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </inline>
                                                        <dialogFullScreen
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </dialogFullScreen>
                                                        <tableEditOptions
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                    </cui>
                                                </uiSettings>
                                            </caption>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Thanks
Tarun

[vinuuu25]

Hi Tarun, Thankyou for replying, I need it in JS not Jquery could u help on that