TinyMCE, показывать количество символов вместо количества слов

Название говорит само за себя. Как заставить TinyMCE показывать количество символов вместо количества слов?

Источник

5 ответов

Решение

Напишите свой собственный плагин.

Следующее решение основано на этой статье. 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 (с использованием 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");
  }
  // ...
});

пс. Используйте JS Minifier.

Источник

Плагин wordcount теперь может считать и показывать символы:

Нажатие Word Count в строке состояния переключает подсчет слов и символов.

По умолчанию режим "слова", но довольно просто эмулировать щелчок в строке состояния, чтобы переключить его.

Измените конфигурацию вашего редактора следующим образом:

tinymce.init({
   plugins: "wordcount",

   // ... 

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

Вот и все. У вас есть количество символов сейчас.

Источник 
    init_instance_callback: function (editor) {
editor.on('change', function (e) {
                var length = editor.contentDocument.body.innerText.length;
            });
}

На init добавьте это. длина - это длина вашего персонажа. Теперь вам нужно скрыть количество слов и прикрепить новую строку со счетчиком символов.

Источник

Я смог настроить плагин wordcount для отображения символов по умолчанию, создав собственную версию серебряной темы. Похоже, в TinyMCE 5.1.6 способ рендеринга плагинов задан в файле темы. Конфигурация TinyMCE:

{
    selector: '.tinymce',
    theme: 'silver-custom',
    ...
}

Файл темы является копией themes/silver/theme.js и должен загружаться после TinyMCE.

Изменения:

 ...
 function Theme () {
      global$1.add('silver-custom', function (editor) {
 ...

а также

...
var renderWordCount = function (editor, providersBackstage) {
    ...
    store: {
        mode: 'memory',
        initialValue: {
        mode: 'characters',
        ...
}
...
Источник

Я использую этот в производстве https://gist.github.com/imanilchaudhari/5a121ea6420eb4b8aa7ee70a5f7074e3 с 2017 года. Этот плагин хорош.

Сначала я думал , что счетчик charword поставляется со встроенными плагинами tinymce, но позже обнаружил, что это пользовательский плагин.

Он покажет количество символов в нижней строке состояния.

Источник
Другие вопросы по тегам