Projelerimizde kullandığımız farklı gelişmiş metin editörleri vardır. Örneğin eskiden FCK şimdi CKEditör, wysiwyg editörü ve s. Şimdi göstermek istediğim ise TinyMCE editörü. Kurulumu ve kullanışı çok basit olduğundan ve sayfalarınızın geç yüklenmesine sebep olmadığından bu editörün kurulumunu paylaşmak istedim.
Öncelikle TinyMCE editör sayfasına giderek download bölümünden editör dosyalarını indirmeniz gerekiyor. İndirdiğiniz zip dosyası içerisinde tinymce klasörü, onun içerisinde js klasörü ve bu klasör içerisinde de yine tinymce klasörü bulunmaktadır.
Biz direk en son klasörü zip dosyasından çıkararak sitemizin bulunduğu ana dizine yapıştıracağız.
Örnek olarak site diye bir klasörümüz olduğunu farzedelim ve bunun içerisine de tinymce klasörünü yapıştırdığımızı düşünelim.
Şimdi sitemizde hangi sayfada bu editörü kullanacaksak o sayfada bulunan <head>
etiketleri arasına aşağıdaki kodu eklememiz gerekiyor:
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "#mytextarea",
width:'600px',
height:'400px'
});
</script>
Burada #mytextarea diyerek editörümüzün id`sini belirtmiş olduk. Width ve Height değerleri ile de editörümüzün genizlik ve yükseklik değerlerini belirttik.
Şimdi sayfamıza <body>
etiketleri arasında bir html kodları ile editörümüzü ekleyelim:
<form method="post">
<p><textarea id="mytextarea"></textarea></p>
<p><input type="submit" value="Gönder"></p>
</form>
Böylece tüm işlemlerimiz gerçekleşmiş oldu. Uygulamayı denemek için aşağıdan örnek dosyayı indirebilirsiniz.
Eğer gerek duyulursa ileride video ders olarak da entegrasyonu anlatabilirim. Yorumlarda belirtebilirsiniz.
Daha detaylı bilgi için buraya gözatabilirsiniz.
06 Ağustos tarihinde yenilenmiştir:
Dersin görsel olarak da bulunmasını istediğim için ve istek olduğu için kaydettim buyurun: