wysiwyg contenteditable editor - how to set the maxlength for the rich text editor

Question

i am using wysiwyg contenteditable editor - I wan to set the max length of the rich text editor as 200, if i give maxlength="200" in the textarea is not working, since it generated as html format of div with class="wysiwyg-editor" so how can i fix the maxlength for this component ?

HTML:

<textarea name="Processing" maxlength="10" class="richTextEditor01" placeholder="Type your text here..."></textarea>

JS:

  $('.richTextEditor01').each( function(index, element)
    {
        $(element).wysiwyg({
            classes: 'some-more-classes',
            // 'selection'|'top'|'top-selection'|'bottom'|'bottom-selection'
           // toolbar: index == 0 ? 'top-selection' : (index == 1 ? 'bottom' : 'selection'),
            buttons: {

                // Fontsize plugin
                fontsize: {
                    title: 'Size',
                    image: '<img src="theme/db/img/icon_rte_fontSize.png" width="18" height="18" alt="Font Size" />', 
                    popup: function( $popup, $button ) {
                            // Refer: http://stackoverflow.com/questions/5868295/document-execcommand-fontsize-in-pixels/5870603#5870603
                            var list_fontsizes = [];
                            for( var i=8; i <= 11; ++i )
                                list_fontsizes.push(i+'px');
                            for( var i=12; i <= 28; i+=2 )
                            list_fontsizes.push(i+'px');
                            list_fontsizes.push('36px');
                            list_fontsizes.push('48px');
                            list_fontsizes.push('72px');
                            var $list = $('<div/>').addClass('wysiwyg-toolbar-list')
                                                   .attr('unselectable','on');
                            $.each( list_fontsizes, function( index, size ){
                                var $link = $('<a/>').attr('href','#')
                                                    .html( size )
                                                    .click(function(event){
                                                        $(element).wysiwyg('shell').fontSize(7).closePopup();
                                                        $(element).wysiwyg('container')
                                                                .find('font[size=7]')
                                                                .removeAttr("size")
                                                                .css("font-size", size);
                                                        // prevent link-href-#
                                                        event.stopPropagation();
                                                        event.preventDefault();
                                                        return false;
                                                    });
                                $list.append( $link );
                            });
                            $popup.append( $list );
                           }
                    //showstatic: true,    // wanted on the toolbar
                    //showselection: true    // wanted on selection
                },
                bold: {
                    title: 'Bold (Ctrl+B)',
                    image: '<img src="theme/db/img/icon_rte_Bold.png" width="18" height="18" alt="Bold" />', 
                    hotkey: 'b'
                },
                italic: {
                    title: 'Italic (Ctrl+I)',
                    image: '<img src="theme/db/img/icon_rte_Italic.png" width="18" height="18" alt="Italic" />',
                    hotkey: 'i'
                },
                underline: {
                    title: 'Underline (Ctrl+U)',
                    image: '<img src="theme/db/img/icon_rte_Underline.png" width="19" height="19" alt="Underline" />', 
                    hotkey: 'u'
                },
                forecolor: {
                    title: 'Text color',
                    image: '<img src="theme/db/img/icon_rte_fontColor.png" width="19" height="19" alt="Text Color" />' 
                },
                removeformat: {
                    title: 'Remove format',
                    image: '\uf12d' 
                }
            }

    });

}

};

Answer 1

I previously posted a similar question. The answer is that you really shouldn't limit the length on rich text editors. HTML is generated on the fly by the rich text editor so you can't really limit what is being input. You could technically constrain the length of the output HTML, but doing so would likely result in malformed HTML that wouldn't run/render correctly. While this may seem a non-answer, you'd be better off not constraining the input but instead making sure you can handle it on the back end, if saving to a database, etc.