Merhabalar, bu HTML TextBox’u Metin Editörüne Dönüştürmek – TinyMCE dersimde eskiden sitelerimde kullandığım bir eklentiyi anlatmak istiyorum. TinyMCE bir text input nesnesini metin editörüne dönüştüren bir eklentidir. Kurulumu inanılmaz basittir. Uzun zaman önce kullanıyordum o zaman ücretsizdir ancak şimdiki durumunu net bilemiyorum. Bana çok gerekli bir eklenti olmadığından dolayı da bakmadım doğrusu. Bu derste sadece sitemize nasıl ekleyeceğimizi göstereceğim. Oldukça basit.
HTML TextBox’u Metin Editörüne Dönüştürmek – TinyMCE
TinyMCE’yi ilk kullanmaya başladığım zamanlar bir sürü dosya eklemek gerekiyordu. Ancak artık bunu değiştirmişler ve sadece bir kaç satır kod ekleyerek sitenize ekleyebiliyosunuz. Ayrıca normal metin editörü ayrıca inline metin editörü şeklinde iki versiyona bölmüşler.
İnline versiyonu normal görünen bir yazıda bir örn bir paragrafa tıkladığınızda o sadece o paragraf için TinyMCE aktif oluyor. Buradan sitesine gidebilir ve inceleyebilirsiniz.
Siteyi açalım ve biraz aşağıya inerek gereli kodları bulalım.
Gördüğünüz gibi gayet estetik ve hoş görüntüsü var.
Sitede biraz aşağı indikten sonra Quick Install yazan bölüme geldiğimizde kodları görebiliriz.
<!DOCTYPE html>
<html>
<head>
<scr ipt src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<scr ipt>tinymce.init({selector:'textarea'});</script>
</head>
<body>
<textarea>Next, use our Get Started docs to setup Tiny!</textarea>
</body>
</html>
Burada bize gerekli olan kısımlar <head> </head> etiketleri arasında kalan scriptlerdir.
<scr ipt src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<scr ipt>tinymce.init({selector:'textarea'});</script>
Bu iki satırı metin editörünü göstermek istediğimiz sayfanın <head> </head> etiketleri arasına yazıyoruz.
Burada dikkat edilmedi gereken nokta Text Input nesnesinin ne olduğudur. Yukarıdaki kodlara dikkat ederseniz iknci satırda Selector olara TextArea verilmiş. Yani bu sayfadaki tüm TextArea’lar metin editörü olacak demektir. Bu noktaya dikkat edin. Eğer başka bir nesne kullanıyorsanız yukarıdaki Selector: Textarea kısmını değiştirin.
İlk verdiğim kodları bir metin belgesine yapıştırdıktan sonra dosya uzantısı html yaparak hızlı bir şekilde test edebilirsiniz.
Bu yazımda bu kadardı arkadaşlar. Diğer yazılarda görüşmek üzere…
Buraya tıklayarak HTML konulu yazılarıma ulaşabilirsiniz.
Sağlıcakla ve takipte kalın. ;)
Beğendim!
Harika!
İlginç!
Beğenmedim
