Question

如果有人有为CKEditor添加charcount（字符数）插件的经验，我肯定可以用一只手。这是我对将插件添加到CKEditor以计算字符需要做些什么的理解。

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

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

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的右下角显示文本，这正是我试图实现的。希望这种差异使这篇文章足够独特，不会被视为重复。

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

Answer 1

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

CKEditor字符计数（charcount）不起作用

1 个答案: