Yükleniyor...

6 Haziran 2019

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.

var app = angular.module("startupController", ['ui.tinymce']);

//App.js 'in ismi aynı zamanda startupController olarak tanımladım, siz istediğinizi yazabilirsiniz lakin bu ismi Layout'da tanımlamanız gerekmektedir.


//Gerekli TinyMCE ayar kodları
angular.module('ui.tinymce', [])
    .value('uiTinymceConfig', {})
    .directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
        uiTinymceConfig = uiTinymceConfig || {};
        var generatedIds = 0;
        return {
            require: 'ngModel',
            link: function (scope, elm, attrs, ngModel) {
                var expression, options, tinyInstance;
                // generate an ID if not present
                if (!attrs.id) {
                    attrs.$set('id', 'uiTinymce' + generatedIds++);
                }
                options = {
                    // Update model when calling setContent (such as from the source editor popup)
                    setup: function (ed) {
                        ed.on('init', function (args) {
                            ngModel.$render();
                        });
                        // Update model on button click
                        ed.on('ExecCommand', function (e) {
                            ed.save();
                            ngModel.$setViewValue(elm.val());
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                        // Update model on keypress
                        ed.on('KeyUp', function (e) {
                            ed.save();
                            ngModel.$setViewValue(elm.val());
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                    },
                    mode: 'exact',
                    elements: attrs.id
                };
                if (attrs.uiTinymce) {
                    expression = scope.$eval(attrs.uiTinymce);
                } else {
                    expression = {};
                }
                angular.extend(options, uiTinymceConfig, expression);
                setTimeout(function () {
                    tinymce.init(options);
                });


                ngModel.$render = function () {
                    if (!tinyInstance) {
                        tinyInstance = tinymce.get(attrs.id);
                    }
                    if (tinyInstance) {
                        tinyInstance.setContent(ngModel.$viewValue || '');
                    }
                };
            }
        };
    }]);

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.

//TopicDetail Controller
//DetailCtrl controller ismi bizim için önemli
app.controller('DetailCtrl', function ($scope, $http, $sce, $window) {

    //Sayfa başlangıç ayarları
    $scope.init = function () {
        //tinymce plugin and toolbar options
        $scope.tinymceOptions = {
            selector: '#post',
            menubar: false,
            skin: "oxide-dark",
            plugins: [
               "advlist autolink autoresize link image fullscreen  lists charmap paste print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking wordcount  ",
                "table contextmenu directionality emoticons paste template spellchecker searchreplace help imagetools media "
            ],
            mobile: {
                theme: "mobile",
                plugins: ['autosave', 'lists', 'autolink'],
                toolbar: ['undo', 'bold', 'italic', 'styleselect']
            },
            toolbar_items_size: 'small',
            toolbar: " undo redo | bold italic underline | aligncenter alignright alignjustify | forecolor  backcolor | fontselect | fontsizeselect | link | image media | emoticons | searchreplace | help preview ",
            file_picker_types: 'file image media',
            image_title: true,
            relative_urls: false,
            allow_script_urls: true,
            document_base_url: "http://localhost:54003/path1/",
            automatic_uploads: true,
            file_picker_types: 'file image media',
            images_upload_credentials: true,
          

            media_url_resolver: function (data, resolve/*, reject*/) {
                if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
                    var embedHtml = '<iframe src="' + data.url +
                    '" width="400" height="400" ></iframe>';
                    resolve({ html: embedHtml });
                } else {
                    resolve({ html: '' });
                }
            },
            width: "98%",
            emoticons_database_url: '/Content/blackfyre/js/SpecialTinymce/js/tinymce/plugins/emoticons/js/emojis.js',
            entity_encoding: "numeric"
        };

//TinyMCE'de html olarak kaydettiğimiz veriyi çevirmemize yarıyor
 $scope.renderHtml = function (html) {
        return $sce.trustAsHtml(html);
    };

 $scope.init();
});

5.Adım Html Sayfası

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

<div ng-controller="DetailCtrl"> bütün her şey buraya gelecek </div>

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

<textarea required data-ui-tinymce="tinymceOptions" id="post" data-ng-model="commentText"></textarea>

//TinymceOptions controller.js'deki tanımladığımız ayarlar hatırlayın.
//data-ng-model="commentText" ise editörün içine ne yazarsak yazalım bunu controller.js'den çekebilir ve veritabanına kaydedebiliriz.

Ö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

Posted in Angular.js, Asp.net MVC, Bilişim, TinyMCETaggs:

Bir Cevap Yazın