2015-12-27 27 views

答えて

5

独自のプラグインを書きます。

次の解決策は、this articleに基づいています。 charactercountプラグインは、ユーザーが見る実際の文字をカウントします。すべてのHTMLと隠れた文字は無視されます。

文字カウントのプラグイン:

tinymce.PluginManager.add('charactercount', function (editor) { 
    var self = this; 

    function update() { 
    editor.theme.panel.find('#charactercount').text(['Characters: {0}', self.getCount()]); 
    } 

    editor.on('init', function() { 
    var statusbar = editor.theme.panel && editor.theme.panel.find('#statusbar')[0]; 

    if (statusbar) { 
     window.setTimeout(function() { 
     statusbar.insert({ 
      type: 'label', 
      name: 'charactercount', 
      text: ['Characters: {0}', self.getCount()], 
      classes: 'charactercount', 
      disabled: editor.settings.readonly 
     }, 0); 

     editor.on('setcontent beforeaddundo', update); 

     editor.on('keyup', function (e) { 
      update(); 
     }); 
     }, 0); 
    } 
    }); 

    self.getCount = function() { 
    var tx = editor.getContent({ format: 'raw' }); 
    var decoded = decodeHtml(tx); 
    var decodedStripped = decoded.replace(/(<([^>]+)>)/ig, "").trim(); 
    var tc = decodedStripped.length; 
    return tc; 
    }; 

    function decodeHtml(html) { 
    var txt = document.createElement("textarea"); 
    txt.innerHTML = html; 
    return txt.value; 
    } 
}); 

CSSの微調整:

/* Optional: Adjust the positioning of the character count text. */ 
label.mce-charactercount { 
margin: 2px 0 2px 2px; 
padding: 8px; 
} 

/* Optional: Remove the html path code from the status bar. */ 
.mce-path { 
    display: none !important; 
} 

TinyMCEの初期化

$('textarea.tinymce').tinymce({ 
    plugins: "charactercount", 
    statusbar: true, 
    init_instance_callback: function (editor) { 
    $('.mce-tinymce').show('fast'); 
    $(editor.getContainer()).find(".mce-path").css("display", "none"); 
    } 
    // ... 
}); 

PS。 JS minifierを使用します。

1
init_instance_callback: function (editor) { 
editor.on('change', function (e) { 
       var length = editor.contentDocument.body.innerText.length; 
      }); 
} 

initでこれを追加します。長さはあなたの文字の長さです。今度は、単語数を隠し、文字列カウンターで新しい文字列を付ける必要があります。

関連する問題