2015-03-31 183 views
1

我正在使用wysiwyg contenteditable编辑器 - 我想设置富文本编辑器的最大长度为200,如果我在textarea中给maxlength =“200”是不工作的,因为它生成的HTML格式的div与class =“wysiwyg-editor”,所以我如何修复此组件的最大长度?wysiwyg contenteditable编辑器 - 如何设置富文本编辑器的最大长度

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' 
       } 
      } 

    }); 

} 

};

回答

1

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