openWYSIWYG Kurulumu – Kullanımı
Web projeleri geliştirme aşamasında sıfırdan metin düzenleme fonksiyonları yazmak zor gelir. Üstelik üst düzey işlemler (tablo, renk vb.) için vakit harcamak gereksizdir. Dünyayı yeniden keşfetmenin gereksiz olduğuna inananlardansanız, daha önceden hazırlanmış zengin metin editörlerini kullanabilirsiniz. Bunlardan en bilinenleri TinyMCE ve FCKeditor‘ dür.
openWYSIWYG ise az bilinmesine rağmen, gerek hız gerekse işlevsellik bakımından anlatmayı uygun gördüğüm kullanışlı bir metin editörü. Bu kadar bilgiden sonra gelelim kurulumuna ve nasıl kullanmamız gerektiğine.
Öncelikle şu adresten editörümüzün dosyalarını indiriyoruz ve sıkıştırılmış klasörü açıp projemizin uygun bir yerine yerleştiriyoruz. Daha sonra hangi sayfada textarea etiketini zenginleştirmek istiyorsak, o sayfadaki herhangi bir yere aşağıdaki kodları ekliyoruz.
1 2 3 4 | <script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script> <script language="javascript1.2"> WYSIWYG.display('all'); </script> |
Unutmamanız gereken sayfanızdaki textarea elementine id değeri vermeniz. Örnek kullanım için aşağıdaki örneğe bakabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head> <title> openWYSIWYG Kurulumu-Kullanımı - ERsin HAN </title> <script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script> <script language="javascript1.2"> WYSIWYG.attach('all'); </script> </head> <body> <form action="kaydet.php" name="form1" method="post"> <textarea id="textarae1" name="textarea1" width="20" height="100"> </textarea> </form> </body> </html> |
Bu şekilde standart olarak gelen fonksiyonları kullanabiliriz. Gelelim editörümüzü özelleştirmeye.
Özelleştirmelere başlamadan önce kodlarda ufak değişiklikler yapmamız gerekiyor. Önceden eklediğimiz
1 | <script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script> |
kodunun hemen altına aşağıdaki kodu ekliyoruz.
1 | <script language="JavaScript" type="text/javascript" src="scripts/wysiwyg-settings.js"></script> |
Daha sonra yine önceden eklediğimiz
1 2 3 4 | </script> <script language="javascript1.2"> WYSIWYG.attach('all'); </script> |
bu kodu da aşağıdaki şekilde değiştiriyoruz.
1 2 3 4 5 | <script language="javascript1.2"> var ayarlar = new WYSIWYG.Settings(); ayarlar.addToolbarElement("<element>", <toolbar>, <position>); WYSIWYG.attach('all', ayarlar); </script> |
Yukarıda örnek olarak editörümüzdeki butonların yerlerini ayarladık. Örnek olarak “Kalın” butonunun yerini 3. satır 1. sıraya almak istersek aşağıdaki değerleri giriyoruz.
ayarlar.addToolbarElement(“bold”, 3, 1);
Editörünüzden herhangi bir butonu kaldırmak isterseniz eklemeniz gereken kod şu şekilde:
mysettings.removeToolbarElement(“<element>”);
Kullanabileceğiniz tüm butonların isimleri:
font, fontsize, bold, italic, underline, forecolor, backcolor, justifyleft, justifycenter, justifyright, unorderedlist, orderedlist, outdent, indent, subscript, superscript, cut, copy, paste, removeformat, undo, redo, inserttable, insertimage, createlink, seperator, undo, redo, seperator, preview, print, viewSource, help
openWYSIWYG standart olarak resim yükleme özelliğini barındırmıyor. Ancak son sürümle beraber gelen bir eklentisi sayesinde bir kaç ufak kod değişikliği ile resim yükleme özelliğini kazandırabiliyoruz. Yine standart scriptimiz wysiwyg.js ve özellik değiştirme scripti wysiwyg-settings.js’ yi çağırdıktan sonra bu koldarın altına aşağıdaki kodları ekliyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 | <script language="javascript1.2"> var ayarlar = new WYSIWYG.Settings(); // openImageLibrary eklentisinin konumunu belirtiyoruz. ayarlar.ImagePopupFile = "addons/imagelibrary/insert_image.php"; // Resim yükleme ekranının genişliği. ayarlar.ImagePopupWidth = 600; // Resim yükleme ekranının yüksekliği. ayarlar.ImagePopupHeight = 245; // textarea1 elementine ayarları uygulatıyoruz. WYSIWYG.attach('textarea1', ayarlar); </script> |
Resim yükleme ile ilgili dizin, dosya boyutu, uzantı kontrolü gibi ayarları addons/imagelibrary/config.inc dosyasından düzenleyebilirsiniz.
Örnekleri dosya halinde indirmek için buradan.
Oldukça faydalı bir makale. Her ne kadar TinyMCE kullansam da pek memnun değilim. Bunu da mutlaka deneyeceğim. Ellerinize sağlık, teşekkürler…
GERÇEKTEN ÇOK GÜZEL ANLATMIŞSIN ELİNE SAĞLIK!