Editor.js Araç Ekleme ve Kullanma

Estimated reading time: 8 minute(s)

Editor.js için kullanılabilecek mevcut eklentilere aşağıdan ulaşabilirsiniz.

Editor.js

Editor.js Tools contributors community. Editor.js has 23 repositories available. Follow their code on GitHub.

Editor.js tarafından bize sağlanan eklentileri editörümüzde kullanmak için ilk olarak sayfamızda eklentilerin script’lerini dahil ediyoruz. Daha sonra EditorJS nesnemizi oluşturduğumuz kısımda tools özelliği altına kullanacağımız araçları ekliyoruz. Şimdilik Header ve List araçlarını kullanacağız.

Editor.js kullanımı yazımı okumadıysanız aşağıdaki linkten göz atabilirsiniz.

Editor.js Nasıl Kullanılır? | Mehmet Yıldırım

Javascript Blok Editörler, Editor.js Nedir? Editor.js Nasıl Kullanılır?

Artık editörümüz aşağıdaki şekilde kullanılabilir durumda.

Editor.js Kişisel Araç Oluşturma

Kullanıcı editör üzerinden butonu oluştururken göreceği ekranın daha kullanıcı dostu olması için projemize Bootstrap ekliyoruz. Bu tamamen isteğe bağlıdır. Sayfanızın bölümüne aşağıdaki dokümandan faydalanarak sadece CSS’i eklemeniz yeterlidir.

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

Örnek olarak bir buton aracı oluşturacağız. Buton aracımız şu değerleri içerecek;

1. Renk seçilebilecek (Combobox)
2. Metin girilecek (Text Input)
3. Link girilecek (Text Input)

Editör aracı tasarlarken asla ön yüzlere bağımlı kalmamalıyız. Aracın ne iş yapacağına ve neye ihtiyacı olduğuna odaklanmalıyız.

Artık buton sınıfımızı oluşturalım. Aşağıdaki sınıfı editörünüzün bulunduğu script etiketleri arasına ekleyebilirsiniz.

Son bir kısım kaldı. Yazdığımız aracı editörümüze ekleyelim.

Artık aracımız kullanıma hazır.

Editor.js’e ekleyebileceğiniz faydalı bazı özellikler

1. autofocus
2. placeholder
3. data
4. onChange: () => {}

Editörümüzün JSON çıktısı aşağıdaki gibi olacaktır

Bu aşamadan sonra artık JSON çıktımızı dilediğimiz gibi yönetebiliriz. Tamamladığımız yazımızı güncellemek istediğimizde yukarıda belirttiğim “data” özelliğine kaydettiğimiz JSON verisini vermemiz yeterlidir.

Yazarlarımız yazıları yazabiliyor ve güncelleyebiliyor. Geriye bu kaydedilen JSON verisinin son kullanıcıya nasıl gösterileceği kısmı kalıyor.

Son Kullanıcıya Sunmak

Kullanıcıya sunacağımız ekranı farklı bir sayfa olarak hazırlayalım ve artık yazımızı tamamlayalım.

Yeni bir HTML sayfa oluşturup içeriğini aşağıdaki gibi dolduruyoruz. Sayfamızda <div id=”articleContent”></div> kısmı JSON verimizi HTML e çevirip aktardığımız kısım olacak.

Sayfamıza sadece Bootstrap ekleyeceğiz çünkü artık Editor.js ile işimiz bitti.

JSON verimizi HTML nesnelere döndürdük.

Önümüzdeki günlerde bu yazının altına hazırladığım kişisel eklentilerle ilgili bir bağlantı paylaşacağım.

Aklınıza takılan yerler olursa elimden geldiğince cevaplamaya çalışırım. Okuduğunuz için teşekkürler.