wysiwyg contenteditable editor - 如何设置富文本编辑器的最大长度

Question

我正在使用所见即所得的 contenteditable 编辑器 - 我想将富文本编辑器的最大长度设置为 200，如果我在 textarea 中给出 maxlength="200" 不起作用，因为它生成为 div 的 html 格式和 class="wysiwyg-editor" 那么如何修复这个组件的最大长度？

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

我之前发布了similar question。答案是你真的不应该限制富文本编辑器的长度。 HTML 由富文本编辑器动态生成，因此您无法真正限制输入的内容。您可以在技术上限制输出 HTML 的长度，但这样做可能会导致格式错误的 HTML 无法正确运行/呈现。虽然这似乎没有答案，但您最好不要限制输入，而是确保您可以在后端处理它，如果保存到数据库等。