TinyMCE'de Custom Button Ekleme

TinyMCE editöründe bazen varsayılan gelen eklentiler yeterli gelmeyebilir. Bu örneğimizde TinyMCE editörüne tablo hücrelerine kenarlık veren bir menü ekleyeceğiz.

TinyMCE editörünün init kodu aşağıdaki şekildedir:

tinymce.init({
        selector: selector,
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste textcolor tinyfilemanager.net wordcount"
        ],
        toolbar: "insertfile undo redo | styleselect | hucrekenarligi | fontselect | fontsizeselect | forecolor backcolor | bold italic | pastetext | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        language: "tr_TR",
        fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
        forced_root_block: false,
        content_css: cssPath,
        setup: function (ed) {
            //Hücre kenarlığı menüsü
            ed.addButton('hucrekenarligi', {
                type: 'menubutton',
                text: 'Hücre Kenarlığı',
                icon: false,
                menu: [
                    {
                        text: 'Sol', onclick: function () {
                            AddClass("borderLeft");
                        }
                    },
                    {
                        text: 'Sağ', onclick: function () {
                            AddClass("borderRight");
                        }
                    },
                    {
                        text: 'Üst', onclick: function () {
                            AddClass("borderTop");
                        }
                    },
                    {
                        text: 'Alt', onclick: function () {
                            AddClass("borderBottom");
                        }
                    },
                    {
                        text: 'Tümü', onclick: function () {
                            RemoveClasses();
                            AddClass("borderAll");
                        }
                    },
                    {
                        text: 'Temizle', onclick: function () {
                            RemoveClasses();
                        }
                    }
                ]
            });
 
            function AddClass(className)
            {
                var element = ed.dom.getParent(ed.selection.getNode(), 'td');
 
                if (!ed.dom.hasClass(element, className))
                    ed.dom.addClass(element, className);
                else
                    ed.dom.removeClass(element, className);
            }
 
            function RemoveClasses() {
                var element = ed.dom.getParent(ed.selection.getNode(), 'td');
 
                ed.dom.removeClass(element, "borderLeft");
                ed.dom.removeClass(element, "borderRight");
                ed.dom.removeClass(element, "borderTop");
                ed.dom.removeClass(element, "borderBottom");
                ed.dom.removeClass(element, "borderAll");
            }
        }
    });

Custom button ekleme işlemlerine setup fonksiyonunun içinde başlanmaktadır. addButtonfonksiyonu TinyMCE editörü üzerine bir buton eklemektedir. addButton fonksiyonun aldığı ilk parametre menümüz için vereceğimiz benzersiz bir isim olmalıdır. Bu vereceğimiz ismi toolbar özelliğinde kullanacağız.

type değeri olarak menubutton verdiğimizden dolayı ekranda menü şeklinde gözükecektir. Sayfayı çalıştırdığımızda editörümüz aşağıdaki şekilde gözükecektir.