Post Page Advertisement [Top]

Merhaba sevgili okurlar,
      Bu yazımızda bir önceki yazının devamı niteliğinde olacak yani CK editörü web sitemizde kullanmayı öğrenmiştik şimdi bu editöre kendi plug-in'imizi yazacağız.


Plug-in nedir derseniz? Aşağıdaki resimdeki tüm butonlar plug-in aslında en sonda kırmızı ile işaret ettiğim yeni yazacağımız plug-in olacak , bu butonlara basınca kullanıcılar yazı üzerinde bir işlem yapabilecek.




Ne dinlemeli ?
     Yeni yazacağımız plug in senarosunda edtör sadece youtube lnkini bir textbox alanına girecek. Video'nun yükseklik ve genişliğini belirtecek böylece video belirtilen değerler ile yazıya iframe olarak gömülecek. Aslında CK editörde default bir iframe ekleme plug-ini var fakat bu plug-ine link kısmına youtube iframe linkini vermeniz gerek bunun içinde video linkine tıklayıp ekleden iframe yani embeded linki kopyalamanız gerekecek , bir editör için biraz zahmetli bir iş diyebiliriz onlara kolaylık sağlamak için sadece video linkinin girilmesinin yeterli olacağı bir plug -in yazmayı hedefliyoruz.


Plug-inimizin adı "abbr" olacak :) Öncelikle web projemizde CKEditor dosyasına gelelim ve config.js ye extra plug-in tanımını yapalım ve yeni plug-in için aynı isimli "abbr" ve alt klasörler oluşturalım.


Görüldüğü gibi abbr klasörü ve altında dialogs->abbr.js ana işlevleri yönetecek olan .js file icons->abbr.png plug-in'in UI iconu ve direkt abbr-> altında plugin.js dosyası olacak şekilde dosya ve klasörlerimizi oluşturalım.

Bahsettiğimiz gibi CKEditor config.js ye extra plug -in tanımlamamızı tek satır ile yapalım.


CKEDITOR.editorConfig = function( config ) {
       // Define changes to default configuration here. For example:
       // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.uiColor = '#C4C3C3';
    config.allowedContent = true;
    config.extraPlugins = 'abbr';

};


Şimdi de ana işlevi gerçekleştirmesi için abbr.js 'yi yazalım.Dialog ekranında iki tab olacak ve ilk tabda 3 tane textbox ok ve cancel butonları yer alacak , aşağıdaki gibi bir görünüm olacak yani.



Bu iskeleti aşağıdaki kodlar ile oluşturabiliriz.

/**
 * The abbr dialog definition.
 *
 * Created out of the CKEditor Plugin SDK:
 * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
 */

// Our dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
       return {

              // Basic properties of the dialog window: title, minimum size.
              title: 'Insert IFRAME',
              minWidth: 400,
              minHeight: 200,

              // Dialog window contents definition.
              contents: [
                     {
                            // Definition of the Basic Settings dialog tab (page).
                            id: 'tab-basic',
                            label: 'Basic Settings',

                            // The tab contents.
                            elements: [
                                    {
                                           // Text input field for the abbreviation text.
                                           type: 'text',
                                           id: 'v_url',
                                           label: 'Video URL',

                                           // Validation checking whether the field is not empty.
                                           validate: CKEDITOR.dialog.validate.notEmpty( "Video URL field cannot be empty" )
                                    },
                                    {
                                           // Text input field for the abbreviation title (explanation).
                                           type: 'text',
                                           id: 'v_width',
                                           label: 'Width',
                                           //validate: CKEDITOR.dialog.validate.notEmpty( "Width field cannot be empty" )
                                    },
                                    {
                                           // Text input field for the abbreviation title (explanation).
                                           type: 'text',
                                           id: 'v_height',
                                           label: 'Height',
                                           //validate: CKEDITOR.dialog.validate.notEmpty( "Height field cannot be empty" )
                                    },
                                   
                            ]
                     },

                     // Definition of the Advanced Settings dialog tab (page).
                     {
                            id: 'tab-adv',
                            label: 'Advanced Settings',
                            elements: [
                                    {
                                           // Another text field for the abbr element id.
                                           type: 'text',
                                           id: 'id',
                                           label: 'Id'
                                    }
                            ]
                     }
              ],

              // This method is invoked once a user clicks the OK button, confirming the dialog.

});

.Net'den alışık olduğumuz üzere her elemanın bir id'si var türü var tab mı ? text mi ? vb. diye ve tabların "id ,label"  özellikleri olup "elements" kısmında ise textbox(text) iç elemanları oluşturabilme özellliği var.

İç elemanlarda gördüğünüz gibi "type,id,label  ve bazen validate" özelliklerine sahip.

Şimdi kullanıcı video youtube linki video genişlik ve yüksekliğini gerekli textbox alanlarına girdikten sonra OK butonuna bastığında işlevi yürütecek metodu yazalım.

              onOk: function() {

                     // The context of this function is the dialog object itself.
                     // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
                     var dialog = this;
                             
                                           iframe  = editor.document.createElement('iframe');
                                    // Populate the data object with data entered in the dialog window.
                                    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#commitContent

             var url_video = dialog.getValueOf('tab-basic', 'v_url' );
                      url1=url_video.replace("watch?v=", "embed/");
                     // Set element attribute and text, by getting the defined field values.
                     iframe.setAttribute( 'src', url1);
                    
                     var width_video = dialog.getValueOf( 'tab-basic', 'v_width' );
                     if(width_video)
                     iframe.setAttribute('width', dialog.getValueOf( 'tab-basic', 'v_width' ) );
                     else
                     iframe.setAttribute('width',320 );
                     iframe.setAttribute('height', dialog.getValueOf( 'tab-basic', 'v_height' ) );
                     iframe.setAttribute( 'frameborder', '0');


                     // Finally, inserts the element at the editor caret position.
                     editor.insertElement( iframe );
              }


Document'e iframe oluşturup v_url id'sininden faydalanıp getvalueof metodunu kullanarak url_video yu alıyoruz benzer şekilde diğer textboxlardan dialog.Getvalueof ile width height özelliklerini alıyoruz.

Ve bu özellikleri video url' i iframe'nin source'sine (src) ,videonun genişliği ve yüksekliği için iframe width height değerlerine atıyoruz.Görüldüğü gibi genişliği verilmemişse(yazılmamış ise) bir null kontorlü ile sabit 320px genişlik atıyoruz. Frameborder istemediğimiz için o değeri de sabit olarak 0 'a atıyoruz.Linkteki(video url) replace ile watch=v yerine embed textini yerleştirerek en başta anlattığımız editore bahsettiğimiz kolyalığı sağlıyoruz :)
Son olarak abbr.js aşagıdaki gibi oluyor.


/**
 * The abbr dialog definition.
 *
 * Created out of the CKEditor Plugin SDK:
 * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
 */

// Our dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
       return {

              // Basic properties of the dialog window: title, minimum size.
              title: 'Insert IFRAME',
              minWidth: 400,
              minHeight: 200,

              // Dialog window contents definition.
              contents: [
                     {
                            // Definition of the Basic Settings dialog tab (page).
                            id: 'tab-basic',
                            label: 'Basic Settings',

                            // The tab contents.
                            elements: [
                                    {
                                           // Text input field for the abbreviation text.
                                           type: 'text',
                                           id: 'v_url',
                                           label: 'Video URL',

                                           // Validation checking whether the field is not empty.
                                           validate: CKEDITOR.dialog.validate.notEmpty( "Video URL field cannot be empty" )
                                    },
                                    {
                                           // Text input field for the abbreviation title (explanation).
                                           type: 'text',
                                           id: 'v_width',
                                           label: 'Width',
                                           //validate: CKEDITOR.dialog.validate.notEmpty( "Width field cannot be empty" )
                                    },
                                    {
                                           // Text input field for the abbreviation title (explanation).
                                           type: 'text',
                                           id: 'v_height',
                                           label: 'Height',
                                           //validate: CKEDITOR.dialog.validate.notEmpty( "Height field cannot be empty" )
                                    },
                                   
                            ]
                     },

                     // Definition of the Advanced Settings dialog tab (page).
                     {
                            id: 'tab-adv',
                            label: 'Advanced Settings',
                            elements: [
                                    {
                                           // Another text field for the abbr element id.
                                           type: 'text',
                                           id: 'id',
                                           label: 'Id'
                                    }
                            ]
                     }
              ],

              // This method is invoked once a user clicks the OK button, confirming the dialog.
              onOk: function() {

                     // The context of this function is the dialog object itself.
                     // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
                     var dialog = this;
                             
                                           iframe  = editor.document.createElement('iframe');
                                    // Populate the data object with data entered in the dialog window.
                                    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#commitContent

             var url_video = dialog.getValueOf('tab-basic', 'v_url' );
                      url1=url_video.replace("watch?v=", "embed/");
                     // Set element attribute and text, by getting the defined field values.
                     iframe.setAttribute( 'src', url1);
                    
                     var width_video = dialog.getValueOf( 'tab-basic', 'v_width' );
                     if(width_video)
                     iframe.setAttribute('width', dialog.getValueOf( 'tab-basic', 'v_width' ) );
                     else
                     iframe.setAttribute('width',320 );
                     iframe.setAttribute('height', dialog.getValueOf( 'tab-basic', 'v_height' ) );
                     iframe.setAttribute( 'frameborder', '0');


                     // Finally, inserts the element at the editor caret position.
                     editor.insertElement( iframe );
              }
       };
});


Plug-in için 16x16 boyutunda  .png bir dosya seçebilirsiniz.Ve oluşturduğunuz plug-in'in icons klasörü altına yerleştiridiğinizde o iconun gözüktüğünü görebilirsiniz.

Son olarak plugin.js dosyasını yazalım.

/**
 * Basic sample plugin inserting abbreviation elements into CKEditor editing area.
 *
 * Created out of the CKEditor Plugin SDK:
 * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
 */

// Register the plugin within the editor.
CKEDITOR.plugins.add( 'abbr', {

       // Register the icons.
       icons: 'abbr',

       // The plugin initialization logic goes inside this method.
       init: function( editor ) {

              // Define an editor command that opens our dialog.
              editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );

              // Create a toolbar button that executes the above command.
              editor.ui.addButton( 'Abbr', {

                     // The text part of the button (if available) and tooptip.
                     label: 'Iframe Ekle',

                     // The command to execute on click.
                     command: 'abbr',

                     // The button placement in the toolbar (toolbar group name).
                     toolbar: 'insert'
              });

              // Register our dialog file. this.path is the plugin folder path.
              CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
       }
});


Plug -in.js dosyaları plug-inlerin CK editör 'e eklenmesini sağlar ve işlevi gerçekleşirecek abbr.js dosyasının yoluda burada belirtilir. Plug-in üstüne gelince yazı açıklaması da buradan düzenlenir(label:.....) Yazdığımız plug-in isminin ve oluşturalan dosya isminin her yerde aynı olmasına dikkat edelim. "abbr"




Tam projeyi burada bulabilirsiniz.Sağlıklı,sporla dolu günler :)


Hiç yorum yok:

Yorum Gönder

Bottom Ad [Post Page]