CKEditor Kurulumu

tarihinde gönderilmiş tarafından

Kurulum

  1. http://ckeditor.com/download sitesinden istenilen CKEditor paketi indirlir.
  2. Sıkıştırılmış paket içinden ckeditor klasörü çıkartılır, bu klasör sunucuda çalıştırılacak klasöre kopyalanır. (Örneğin: http://localhost/Editor klasörü içine)
  3. Editörün ekleneceği html dosyasında CKEditor’ün ayarlamaları yapılır
    1. <head> bölümünde script dosyası bağlanır.

(Örneğin: <script src=”ckeditor/ckeditor.js”></script>

  1. Kullanılacak <textarea> etiketi belirlenir.

Örnek:

<textarea name=”editor1″ id=”editor1″ rows=”10″ cols=”80″>

Bu textarea etiketi CKEditor editörü olacak.

</textarea>

  1. <script> etiketi içinde replace() metodu kullanılarak <textarea> etiketi ve özellikleri ayarlanır.

Örnek html sayfası:

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		
		<title>Örnek CKEditor Sayfası</title>
		
		<!-- CKEditor klasör yolunun doğru olduğundan emin olun -->
		
		<script src="ckeditor/ckeditor.js"></script>
		
	</head>
	
	<body>
		
		<form>
			
			<textarea name="editor1" id="editor1" rows="10" cols="80">
				
				Bu textarea etiketi CKEditor editörü olacak.
				
			</textarea>
			
			<script>
				
				// CKEDITOR.replace() metodu ile CKEditor editörü olacak texarea etiketi ayarlanır.
				
				// Bu hali ile CKEditor varsayılan ayarlarla görüntülenecektir.
				
				CKEDITOR.replace( 'editor1' );
				
			</script>
			
		</form>
		
	</body>
	
</html>
  1. CKEditor Ayarları yapılır.
    1. Mevcut html dosyası için ayar örneği:
<script>
	
	// CKEDITOR.replace() metodu ile CKEditor editörü olacak texarea etiketi ayarlanır.
	
	// Bu hali ile CKEditor varsayılan ayarlarla görüntülenecektir.
	
	//Aşağıdaki gibi ayarlar yapılabilir
	
	CKEDITOR.replace( 'Icerik',
	
	{
		
		// Özel ayarlanmış config.js dosyalarının önünde daima ("/") slash bulunmalıdır.
		
		//customConfig: '/WebEditorleri/ckeditor/config_OzelAyarlanmis.js'
		
		//Özel ayarlanmış config.js dosyası kullanılmayacaksa bu bölümde de ayarlar tanımlanabilir
		
		language: 'tr',&nbsp; //Arayüz dilini ayarlar
		
		uiColor: '#9AB8F3', // Arayüz rengi ayarlar
		
		//Genişlik ve Yükseklik ayarları
		
		width: 870,&nbsp;&nbsp;&nbsp;&nbsp; // 500 pixels wide.
		
		//width: '75%',&nbsp;&nbsp; // CSS unit (percent).
		
		height: 500,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 500 pixels high.
		
		//height: '25em',&nbsp;&nbsp;&nbsp;&nbsp; // CSS unit (em).
		
		//arayüz seçimi skins klasöründen.
		
		//Varsayılan moono, bu sistemde kullanılabilecek
		
		// Bazı diğer arayüzler moono, moonocolor, office2013, Moono_blue, kama
		
		skin: 'moonocolor',
		
		//Editör Sadece okunabilir. Düzenlenemez.
		
		//readOnly: true,
		
	}
	
	);
	
</script>
  1. CKEditor için özel ayarlar kaydedilmiş config.js dosyası örneği:
CKEDITOR.editorConfig = function( config )
{

	// Define changes to default configuration here. For example:

	config.language = 'tr'; //Arayüz dilini ayarlar

	config.uiColor = '#AADC6E'; // Arayüz rengi ayarlar

	//Genişlik ve Yükseklik ayarları

	//config.width = 870;&nbsp;&nbsp;&nbsp;&nbsp; // 870 pixel genişlik.

	//config.width = '75%';&nbsp;&nbsp; // CSS unit (yüzde).

	//config.height = 500;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 500 pixels yükseklik.

	//config.height = '25em';&nbsp;&nbsp;&nbsp;&nbsp; // CSS unit (em).

	// Genişlik 100% ve yükseklik 870px.

	//editor.resize( '100%', '870' );

	// Yükseklik yeniden yaralanabilir

	editor.resize( '100%', '870', true );

	//Maksimum yeniden boyutlandırma ayarlanabilir

	//config.resize_maxWidth = 870;

	//config.resize_maxHeight = 600;

	//arayüz seçimi skins klasöründen.

	//Varsayılan moono, bu sistemde kullanılabilecek

	// Bazı diğer arayüzler moono, moonocolor, office2013, Moono_blue, kama

	config.skin = 'moonocolor';

	//Sadece okunabilir

	config.readOnly = true;

	//Araç çubuğu

	config.toolbar = 
	
	[

		{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },

		{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },

		{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },

		{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },

		'/',

		{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },

		{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },

		{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },

		{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },

		'/',

		{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },

		{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },

		{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },

		{ name: 'about', items: [ 'About' ] }

	];

};

 

CKeditor-KCFinder-Oturum_Kontrolu_Ornegi