İlginizi Çekebilir
  1. Ana Sayfa
  2. HTML
  3. HTML TextBox’u Metin Editörüne Dönüştürmek – TinyMCE

HTML TextBox’u Metin Editörüne Dönüştürmek – TinyMCE

HTML TextBox'u Metin Editörüne Dönüştürmek - TinyMCE

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. 😉

Yorum Yap

Yazar Hakkında

Liseden, Ağ Sistemleri ve Yönetimi bölümünden mezun oldum. Üniversiteden (2 yıllık), Bilgisayar Programcılığı bölümünden mezun oldum. Şuanda da AÖF, Yönetim Bilişim Sistemleri bölümünde okumaktayım. Uzmanlık alanlarım; Windows Sistemleri, HTML, CSS, C# ve SQL’dir. Hobi olarak uğraştığım genel konular, Photoshop, After Affects, Corel Draw’dır.Film, YABANCI dizi, Anime izlemeyi ve Manga okumayı severim. Arkadaşlarımla yürüyüş yapmayı ve grup olarak aktivitelere gitmeyi severim. Geri kalan zamanlarımın tümü bilgisayar karşısında geçer.

Yorum Yap