Angular.js ile TinyMCE text editörünün entegre edilmesi

Herkese merhaba. Asp.Net MVC’de Angular.js kullanılarak TinyMCE text editörünün aşamalı bir şekilde nasıl entegre edildiğinden biraz bahsedeceğim. Angular.js sayesinde bu text editörünün kontrolü tamamen bizim elimizde olacaktır. İstediğiniz yerde text bu editörünü çağırır, istediğiniz yerde bu text editörünü saklarsınız. Başlamadan önce bir ekran görüntüsü paylaşmak istiyorum.

1.Adım TinyMCE Community’nin indirilmesi

TinyMCE Community açık kaynak bir dosya paylaşımıdır, herhangi bir ücreti yoktur, fakat özel plugin’ler editörün sitesinde ücretlidir, onları daha sonra detaylı olarak inceleriz. (File Manager gibi pluginler) Öncelikle aşağıda belirtmiş olduğum linkten dosyayı indiriniz.

https://drive.google.com/file/d/17e9QEZCFt5nx5-BHV90fNDGmFPN1-c8z/view?usp=sharing

2.Adım Gerekli linklerin ayarlanması

İndirdikten sonra klasörün tümünü projenizin içine atınız. Örneğin ben Content/blackfyre/js/SpecialTinymce şeklinde atmıştım. Daha sonra klasörden gerekli linkleri Layout sayfasımıza entegre etmemiz gerekmekte.

Angular.js ‘in gerekli kütüphanelerinin de entegre edildiğini varsayıyorum. App.js, Controller.js, angular.min.js ve son olarak angular-sanitize.min.js gibi. NOT: Bazen Layout sayfamıza entegre ettiğimizde Jquery kütüphanelerinden dolayı gerekli sayfalarda editör çalışmayabiliyor. Bu durumda sadece gerekli sayfayı tinymce.min.js linkini entegre ediniz.

3.Adım App.js kodlarının yazılması

App.js bizim için çok önemli bir faktör çünkü TinyMCE’nin angular ile kullanabilmesini App.js sayesinde sağlayacağız. Gerekli kodları aşağıdan bulabilirsiniz.

4.Adım Controller.js kodlarının yazılması

Controller.js javascript sayfasında ise burada TinyMCE’nin ayarlarını yapıyor olacağız. Örneğin Toolbar ayarları, plugin ayarları gibi. Kodları incelediğinizde detaylı anlaşılacaktır.

5.Adım Html Sayfası

Sayfaya adım atarken Controller.js deki controller ismini yazmayı yani örnek ;

şeklinde yapmayı unutmayın. DetailCtrl benim oluşturduğum bir isim, istediğinizi yazabilirsiniz. Bir textarea yardımı ile TinyMCE editörümüzü çağırıyoruz.

Örnek incelemek isterseniz web sayfama üye olup bir forum post detay sayfasının altında yorum yazmak için gerekli editörü görebilirsiniz. Yorum yapma işlemlerinde Angular.js kullanmıştım. Aşağıda site linkini bulabilirsiniz.

SEIZE THE DAY

Bu yazı Angular.js, Asp.net MVC, Bilişim, TinyMCE kategorisine gönderilmiş ve , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Alanı Doldurunuz! *