TinyMCE，显示字符数而不是字数

Question

标题说明了一切。如何让 TinyMCE 显示字符数而不是字数？

Answer 1

wordcount插件现在可以计算和显示字符：

单击状态栏中的字数统计可在统计字数之间切换 和人物。

默认模式是“单词”，但是模拟点击状态栏来切换它非常容易。

按照以下方式更改编辑器配置：

tinymce.init({
   plugins: "wordcount",

   // ... 

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

仅此而已。您现在已经有字符数了。

Answer 2

编写您自己的插件。

以下解决方案基于本文。

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

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");
  }
  // ...
});

ps。使用 JS 压缩器。

Answer 3

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

在初始化时添加此内容。 length 是你的字符长度。现在您需要隐藏字数统计并附加一个带有字符计数器的新字符串。

Answer 4

我能够通过创建银色主题的自定义版本来将 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',
        ...
}
...

Answer 5

我从 2017 年开始在生产中使用这个插件 https://gist.github.com/imanilchaudhari/5a121ea6420eb4b8aa7ee70a5f7074e3。这个插件很好。

我一开始以为charwordcount是tinymce内置插件自带的，后来发现是自定义的。

底部状态栏会显示字符数

Answer 6

在 React 中强制单击一键。空的依赖数组确保此效果仅在初始渲染后运行一次。

useEffect(() => {
    const wordCountButton = document.querySelector('.tox-statusbar__wordcount');

    if(wordCountButton) {
        wordCountButton.click();
    }
}, []);