javascript - CKEditor 字符计数 (charcount) 不起作用

Question

如果有人有任何为 CKEditor 添加 charcount(字符计数)插件的经验，我肯定可以提供帮助。这是我对给CKEditor添加一个插件来统计字符需要做些什么的理解。

1. 创建一个 plugin.js 文件，其中包含用于计算字符的 JavaScript，并将此文件放在/web/server/root/ckeditor/plugins/charcount/plugin.js
2. 将行 config.extraPlugin = 'charcount'; 添加到位于/web/server/root/ckeditor/config.js 的配置文件
3. 通过将 CSS 添加到位于/web/server/root/ckeditor/skin/skin_name/editor.css 的文件来设置字符数的样式。

这是我正在使用的 plugin.js 文件。注意:此 JavaScript 来自 this thread 的第一篇文章在 CKEditor 论坛上。

CKEDITOR.plugins.add( 'charcount',
{
init : function( editor )
{
  var defaultLimit = 'unlimited';
  var defaultFormat = '<span class="cke_charcount_count">%count%</span> of <span class="cke_charcount_limit">%limit%</span> characters';
  var limit = defaultLimit;
  var format = defaultFormat;

  var intervalId;
  var lastCount = 0;
  var limitReachedNotified = false;
  var limitRestoredNotified = false;


  if ( true )
  {   
     function counterId( editor )
     {
        return 'cke_charcount_' + editor.name;
     }

     function counterElement( editor )
     {
        return document.getElementById( counterId(editor) );
     }

     function updateCounter( editor )
     {
        var count = editor.getData().length;
        if( count == lastCount ){
           return true;
        } else {
           lastCount = count;
        }
        if( !limitReachedNotified && count > limit ){
           limitReached( editor );
        } else if( !limitRestoredNotified && count < limit ){
           limitRestored( editor );
        }

        var html = format.replace('%count%', count).replace('%limit%', limit);
        counterElement(editor).innerHTML = html;
     }

     function limitReached( editor )
     {
        limitReachedNotified = true;
        limitRestoredNotified = false;
        editor.setUiColor( '#FFC4C4' );
     }

     function limitRestored( editor )
     {
        limitRestoredNotified = true;
        limitReachedNotified = false;
        editor.setUiColor( '#C4C4C4' );
     }

     editor.on( 'themeSpace', function( event )
     {
        if ( event.data.space == 'bottom' )
        {
           event.data.html += '<div id="'+counterId(event.editor)+'" class="cke_charcount"' +
              ' title="' + CKEDITOR.tools.htmlEncode( 'Character Counter' ) + '"' +
              '>&nbsp;</div>';
        }
     }, editor, null, 100 );

     editor.on( 'instanceReady', function( event )
     {
        if( editor.config.charcount_limit != undefined )
        {
           limit = editor.config.charcount_limit;
        }

        if( editor.config.charcount_format != undefined )
        {
           format = editor.config.charcount_format;
        }


     }, editor, null, 100 );

     editor.on( 'dataReady', function( event )
     {
        var count = event.editor.getData().length;
        if( count > limit ){
           limitReached( editor );
        }
        updateCounter(event.editor);
     }, editor, null, 100 );

     editor.on( 'key', function( event )
     {
        //updateCounter(event.editor);
     }, editor, null, 100 );

     editor.on( 'focus', function( event )
     {
        editorHasFocus = true;
        intervalId = window.setInterval(function (editor) {
             updateCounter(editor)
        }, 1000, event.editor);
     }, editor, null, 100 );

     editor.on( 'blur', function( event )
     {
        editorHasFocus = false;
        if( intervalId )
           clearInterval(intervalId);
     }, editor, null, 100 );
  }
} 
});

这是我的 config.js 文件。请注意，我在该文件的开头附近有 config.extraPlugin = 'charcount';。

CKEDITOR.editorConfig = function( config ) {
config.extraPlugin = 'charcount';
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
    { name: 'document', items : [ 'Source','Save' ] },
    { name: 'editing', items : [ 'Find','Replace','Scayt', 'TextColor' ] },
    { name: 'insert', items : [ 'Image','CodeSnippet','Table','HorizontalRule' ] },
    { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    { name: 'tools', items : [ 'Maximize','ShowBlocks','-' ] }
 ]; 
};

我将以下内容添加到我的 editor.css 文件的底部。

.cke_skin_kama .cke_charcount {
display:block;
float:right;
margin-top:5px;
margin-right:3px;
color:#60676A;
}
.cke_charcount span.cke_charcount_count,
.cke_charcount span.cke_charcount_limit  {
font-style: italic;
}

这是我的 stage.html 文件。

<script src="ckeditor/ckeditor.js"></script>
<textarea id="editor1"></textarea>
<script> CKEDITOR.replace('editor1'); </script>

这是预期结果的屏幕截图，我的 CKEditor 的右下角应该有计算字符数的文本。

这是一个屏幕截图，显示我的 CKEditor 没有字符数。

关于此还有一些其他类似的线程。但是，类似的线程向 CKEditor 工具栏添加了一个按钮。我使用的 JavaScript 没有向工具栏添加按钮，而是在 CKEditor 的右下角显示文本，这是我试图实现的。希望这种差异使这篇文章足够独特，不会被视为重复。

如果有帮助，我的网络服务器操作系统是 Linux Mint 17.2 版。

Answer 1

我无法弄清楚我在原始问题中发布的 JavaScript 有什么问题。但是，我确实遇到了这个问题的解决方案，我想在这里分享，以防其他人遇到类似问题的这篇文章。我找到了一个名为 Word Count & Char Count 插件的 CKEditor 插件。这个插件可以从http://ckeditor.com/addon/wordcount下载或 https://github.com/w8tcha/CKEditor-WordCount-Plugin .这个插件完全可以工作，并显示 CKEditor 中的单词数、段落数和/或字符数。