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.
});
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 );
}
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 );
}
};
});
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 :)
![Mail Me](http://3.bp.blogspot.com/-JvHr-sfQ3Cg/XfDJwhu2LlI/AAAAAAAACbA/SkN5-AV8yG4Aj6sGeDYTYUnONhgC9zelwCK4BGAYYCw/s177/email-icon-2.png"){kind=icon}
Hiç yorum yok:
Yorum Gönder