Saltar al contenido

TinyMCE, muestra el recuento de caracteres en lugar del recuento de palabras

Solución:

Escribe tu propio complemento.

La siguiente solución se basa en este artículo. los charactercount El complemento cuenta los caracteres reales que ve el usuario, se ignoran todos los caracteres HTML y ocultos. El número se actualiza en cada evento de “key up”.

Complemento de recuento de caracteres:

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);
    // here we strip all HTML tags
    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;
  }
});

Ajustes de 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;
}

Inicialización de TinyMCE (usando jQuery)

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

PD. Usa minificador JS.

El complemento de recuento de palabras ahora puede contar y mostrar caracteres:

Al hacer clic en Word Count en la barra de estado, se cambia entre contar palabras y caracteres.

Por defecto, el modo es “palabras”, pero es bastante fácil emular hacer clic en la barra de estado para cambiarlo.

Modifique la configuración de su editor de la siguiente manera:

tinymce.init({
   plugins: "wordcount",

   // ... 

   init_instance_callback: function (editor) {
      $(editor.getContainer()).find('button.tox-statusbar__wordcount').click();  // if you use jQuery
   }
});

Eso es todo. Ahora tienes el recuento de caracteres.

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

Al iniciar, agregue esto. length es la longitud de su carácter. Ahora necesita ocultar el recuento de palabras y adjuntar una nueva cadena con el contador de caracteres.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *