TinyMCE, mostra il conteggio dei caratteri anziché il conteggio delle parole

Question

Il titolo dice tutto. Come faccio a ottenere TinyMCE per mostrare il conteggio dei caratteri anziché il conteggio delle parole?

Answer 1

Scrivi la tua plugin.

La seguente soluzione è basata su this article. Il plug-in charactercount conta i caratteri effettivi visualizzati dall'utente, tutti i caratteri HTML e nascosti vengono ignorati.

Character Plugin Conte:

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; 
    } 
}); 

Tweaks 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 inizializzazione

$('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. Usa il minificatore JS.

Answer 2

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

Su init aggiungere questo. la lunghezza è la lunghezza del tuo personaggio. Ora è necessario nascondere il conteggio delle parole e allegare una nuova stringa con il contatore dei caratteri.