Home

TinyMCE HTML Metin Editörü Kullanımı

Submitted by kivanc on Sat, 14/03/2009 - 19:42

Öncelikle, basit bir html formu post eden ve php ile post edilen datayı okuyabilen bir yapımızın hazır olması gerekir. Çok basit olarak aşağıda biri html formu içeren diğeri php kodlarını içeren, iki adet örnek dosyayı görüyoruz.

form.html:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>TinyMCE HTML Metin Editörü Kullanımı</title>
  6. </head>
  7. <body>
  8. 	<form method="post" action="form_kontrol.php">
  9. 		<input type="text" name="eposta" />
  10. 		<textarea name="mesaj"></textarea>
  11. 		<input type="submit" name="submit">
  12. 	</form>
  13. </body>
  14. </html>

form_kontrol.php:

  1. <?php
  2. if (isset($_POST['submit'])) {
  3.  
  4. /*
  5. Dikkat !
  6. Aşağıdaki şekilde post ile data çektikten sonra,
  7. çekilen datayı, veritabanına göndermeden önce datanın filtre edilmesi gerekir.
  8. Burada filtre işlemi uygulanMAmıştır.
  9. */
  10.  
  11. $eposta	= $_POST['eposta'];
  12. $mesaj	= $_POST['mesaj'];
  13.  
  14. echo "Eposta: $eposta<br />";
  15. echo "Mesaj: $mesaj";
  16.  
  17. }
  18. ?>

Bu şekilde iki dosyamızı oluşturduktan sonra form.html'e girilen bilgiyi, "Submit" butonu ile form_kontrol.php ye gönderip, ekrana yazdırabiliyor olmamız gerekir. Bundan sonra TinyMCE'yi form.html dosyamıza ekleyeceğiz.

http://tinymce.moxiecode.com/download.php adresinden TinyMCE'yi indiriyoruz. İnen sıkıştırılmış dosyadan
"jscripts/tiny_mce/" klasörünü, diğer iki dosyamızın olduğu klasöre kopyalıyoruz. Böylece çalışma klasörümüzde, form.html form_kontrol.php dosyları ve tiny_mce klasörü bulunuyor.

Aşağıda form.html in TinyMCE eklenmiş halini görüyorsunuz, buradaki javascript bölümüne eklenen mode : "textareas" kodu, sayfadaki tüm textarea elemanlarını TinyMCE özellikli hale getirmeyi sağlıyor.

form.html :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>TinyMCE HTML Metin Editörü Kullanımı</title>
  6. <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
  7. <script type="text/javascript">
  8. tinyMCE.init({
  9. 	theme : "advanced",
  10. 	mode : "textareas",
  11. 	plugins : "fullpage",
  12. 	theme_advanced_buttons3_add : "fullpage"
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. 	<form method="post" action="form_kontrol.php">
  18. 		<input type="text" name="eposta" />
  19. 		<textarea name="mesaj"></textarea>
  20. 		<input type="submit" name="submit">
  21. 	</form>
  22. </body>
  23. </html>

Bu şekilde formumuzu post ettiğimizde html formatlı yazımızın ekrana basılıyor olması gerekir.
Eğer kullandığınız formda birden fazla textarea var ise ve sadece bir tanesine tinymce özelliği eklemek istiyorsanız yapmanız gereken, textarea ya bir "mceEditor" classı eklemek ve javascript bölümündeki mode kısmında aşağıdaki gibi bir değişiklik yapmak

  1. tinyMCE.init({
  2. 	theme : "advanced",
  3. 	mode : "specific_textareas",
  4.  
  5. ...

  1. ...
  2. <textarea name="aciklama" class="mceEditor"></textarea>
  3. ...

»

abicim çok teşekkür ederim

Submitted by Mahsun (not verified) on Sun, 15/03/2009 - 18:25.

abicim çok teşekkür ederim gerçekten çok gerekti yeni projelerim için Seni Çok Seviyorum :) Allah Kolaylıık Versin!!

»