TinyMCE Kurulumu

tarihinde gönderilmiş tarafından
  1. TinyMCE Editorü Kurulumu
  2. https://www.tinymce.com/download/ sitesinden istenilen TinyMCE paketi indirilir.
  3. Sıkıştırılmış paket içinden tinymce 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)
  • Editörün ekleneceği html dosyasında TinyMCE’in ayarlamaları yapılır
    1. <head> bölümünde script dosyası bağlanır.

(Örneğin: <script src=’tinymce/tinymce.min.js’></script>

  1. Kullanılacak <textarea>  etiketi belirlenir.

Örnek:

<textarea name="MetinAlani" id="MetinAlani" rows="10" cols="80">
   Bu textarea etiketi TinyMCE editörü olacak.
</textarea>

 

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

Örnek HTML dosyası:

Aşağıdaki kodlar TinyMCE editörünün varsayılan değerlerle (Türkçe dil ayarı hariç) görüntülenmesini sağlar.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Örnek TinyMCE Sayfası</title>

    <!-- TinyMCE klasör yolunun doğru olduğundan emin olun -->

    <script src='tinymce/tinymce.min.js'></script>

    <script>

       tinymce.init(

       {

           selector: '#MetinAlani',

           language: 'tr_TR', //Türkçe dil desteği dosyasının indirilerek lang klasörüne kopyalanması gerekir.

       }

       );

    </script>

</head>

<body>

    <form>

        <textarea name="MetinAlani" id="MetinAlani" rows="10" cols="80">

            Bu textarea etiketi TinyMCE editörü olacak.

        </textarea>

    </form>

</body>

</html>
  1. TinyMCE Ayarları yapılır.
    1. Örnek html dosyası:
<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		
		<title>Örnek TinyMCE Sayfası</title>
		
		<!-- TinyMCE klasör yolunun doğru olduğundan emin olun -->
		
		<script src='tinymce/tinymce.min.js'></script>
		
		<script>
			
			tinymce.init(
			
			{
				
				selector: '#MetinAlani',
				
				language: 'tr_TR',
				
				theme: 'modern', //Varsayılan olarak bulunur
				
				//skin: 'charcoal', //ayrıca indirilip skin klasörüne kopyalanmalıdır
				
				height : 300, //Editör yüksekliği ayarlar
				
				width : 600, //Editör genişliğini ayarlar
				
				//Eklentiler eklenir
				
				plugins: [
				
				'advlist autolink lists link image charmap print preview hr anchor pagebreak',
				
				'searchreplace wordcount visualblocks visualchars code fullscreen',
				
				'insertdatetime media nonbreaking save table contextmenu directionality',
				
				'emoticons template paste textcolor colorpicker textpattern imagetools'
				
				],
				
				//Aşağıda araç çubuğu eklenmiştir
				
				toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
				
				toolbar2: 'print preview media | forecolor backcolor emoticons',
				
				image_advtab: true,
				
			}
			
			);
			
		</script>
		
	</head>
	
	<body>
		
		<form>
			
			<textarea name="MetinAlani" id="MetinAlani" rows="10" cols="80">
				
				Bu textarea etiketi TinyMCE editörü olacak.
				
			</textarea>
			
		</form>
		
		
		
	</body>
	
</html>

 

 

TinyMCE-KCFinder-Oturum_Kontrolu_Ornegi