CKEditor Karakter Sınırlaması Yapalım !

tarih06.12.2011 20:15 — Webmaster, Programlama,



CKEditör kullanıcıları varsayılan olarak karakter sınırlaması özelliğini kullanamıyorlar. Bu basitçe biz hazırlayabiliyoruz. Kopyala yapıştır yaparak bir plugin sayesinde artık editörünüze yazılacak yazılara limit koyabilirsiniz. Üstelik göstergeli ;)

Öncelikle config.js dosyasını açın ve alttaki satırı yapıştırın.

config.extraPlugins = 'charcount';

Alttaki gibi configürasyon fonksiyonu içine yerleştirmelisiniz;

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	config.language = 'tr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'charcount';   
	config.extraPlugins = 'syntaxhighlight';
	config.toolbar_Full.push(['Code']);
};

CKEditor plugin klasörüne girin ve yeni bir klasör oluşturun. İsmi charcount olsun.

Oluşturduğunuz charcount klasörü içine girin ve plugin.js adında bir js dosyası oluşturun.

Alttaki kodları buraya yapıştırın

    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 getEditorData(editor)
          {
            data = $.trim(editor.getData().replace(/<.*?>/g, '').replace(/\n/g, '').replace(/\r/g, '').replace(/&nbsp;/g, '').replace(/   /g, ''));
            return data;
          }
             
             function updateCounter( editor )
             {
                //var count = editor.getData().length;
            // custom
            curData       = getEditorData(editor);
            curDataLength    = curData.length;
            //newData         = curData.substring(0,lastcount);
            //if(curDataLength < 0)
            //{
            //   curDataLength = curDataLength + 2;   
            //}
            
            count = curDataLength;
            
            
                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' );
            
            // custom
            /*
            realData      = editor.getData();
            realDataLength   = realData.length;
            curData       = getEditorData(editor);
            curDataLength    = curData.length;
            difference       = curDataLength - limit;
            //alert('curDataLength: ' + curDataLength + ' , but the limit is: ' + limit + ' and the difference is: ' + difference );
            
            newData         = realData.substring(0, realDataLength - difference - 6);
            editor.setData(newData, function(){
                              count = getEditorData(editor).length;
                              lastCount = count-1;
                                     });
            */
             }
             
             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;
            //var count = getEditorData().length;
            var count = $.trim(event.editor.getData().replace(/<.*?>/g, '').replace(/\n/g, '').replace(/\r/g, '').replace(/&nbsp;/g, '').replace(/   /g, '')).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 );
          }
       }
    });

 

Kaydedin. Karakter kıısıtlaması yapacağınız editörünüzün kodları arasına şu etiketleri yerleştirin.

extraPlugins : 'uicolor',
extraPlugins: 'charcount',

 

Örnek;

<script type="text/javascript">
    CKEDITOR.replace( 'editor1',
    {
    	extraPlugins : 'uicolor',
        extraPlugins: 'charcount',
        charcount_limit: 250,
        height: 100,
    	toolbar :
    	[
    		[ 'Bold', 'Italic', '-', 'Undo','Redo'], 
    	]
    });
</script>




 

Alıntı: http://cksource.com/forums/viewtopic.php?f=11&t=18032




Bir önceki konu başlığımıza göz atmak isterseniz tıklayınız : Android ve Webmaster Araçları





Yorum Yazın