ckEditor 中的字符计数

Question

我正在使用下面的代码来计算 ckEditor 的字符数。

var editorConfig = {
      height: '400px',
      filebrowserUploadMethod: "form",
      filebrowserUploadUrl: "main_blog_upload.php",
      defaultLanguage: "es",
      language: "es",
      enterMode: CKEDITOR.ENTER_BR, // Set to use <br> tags for line breaks
      shiftEnterMode: CKEDITOR.ENTER_BR, // Set to use <br> tags for Shift+Enter
      charCountCallback: function(charCount) {
          // Get the data from the editor
          var data = this.getData();

          // Calculate the number of line breaks (only <br> tags are used)
          var lineBreaksCount = (data.match(/<br[^>]*>/g) || []).length;

          // Calculate the character count, excluding line breaks
          var characterCount = data.replace(/<[^>]*>/g, '').length;

          // Add the character count and line breaks count
          return characterCount + lineBreaksCount;
      }
    };

    // Create CKEditor instance with the merged configuration
    var editor = CKEDITOR.replace('editor', editorConfig);


    
  
    function stripHtml(html) {
      var tmp = document.createElement("DIV");
      tmp.innerHTML = html;
      return tmp.textContent || tmp.innerText || "";
    }


    function countWordsAndCharacters() {
      var data = editor.getData();
      var div = document.createElement('div');
      div.innerHTML = data;

      var textOnly = div.textContent || div.innerText || '';

      // Check if textOnly is empty or contains only white spaces
      var wordsArray = textOnly.trim().split(/\s+/);
      var wordCount = (wordsArray.length === 1 && wordsArray[0] === '') ? 0 : wordsArray.length;

      // var characterCount = textOnly.replace(/\s/g, '').length;
      var characterCount = textOnly.length;

      $('#count').text(`${wordCount} words ${characterCount} characters`);
    }
    

    editor.on('instanceReady', () => {
        countWordsAndCharacters();
    });

    editor.on('keyup', () => {
        countWordsAndCharacters();
    });

    editor.on('change', () => {
        countWordsAndCharacters();
    });

    editor.on('key', function(event) {
      var enterKey = 13;
      if (event.data.keyCode === enterKey) {
        var selection = editor.getSelection();
        var ranges = selection.getRanges();
        var range = ranges[0];
        var blockTag = range.startContainer.getAscendant('p', true);
        if (blockTag && range.checkStartOfBlock() && range.checkEndOfBlock()) {
            // Prevent CKEditor default Enter key behavior
            event.cancel();
            // Insert <br> tag manually
            var brElement = new CKEDITOR.dom.element('br');
            editor.editable().insertElement(brElement);
        }
      }
    });

我的问题是，如果我在句号 (.) 之后按 Enter 键，我会得到 2 个字符。但我想要 1 个角色。

在下面的句子后按

Enter

后我得到2个字符。

Las aplicaciones de aprendizaje de idiomas están disponibles en línea y ofrecen una amplia variedad de recursos de aprendizaje, desde lecciones interactivas hasta clases en vivo con profesores nativos de inglés.

在下面的句子后按

Enter

后我得到2个字符。

En este artículo, hemos reunido las 12 mejores aplicaciones para aprender inglés, que pueden ser usadas tanto por niños como por adultos (¡algunas más que otras!)

在下面的句子后按

Enter

我得到1个字符。

Cada una de estas aplicaciones ha sido cuidadosamente seleccionada para brindarte una experiencia de aprendizaje única y efectiva.

为什么会出现这样的情况？

Answer 1

因为按 ENTER 键后换行符仍然存在。试试这个（请参阅第二个

replace()

以将其排除在您的字符数之外：

var characterCount = data.replace(/<[^>]*>/g, '').replace(/(\r\n|\n|\r)/gm, '');