> ## Content Index
> Fetch the complete content index at: https://mennankose.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# TinyMCE'de Custom Button Ekleme
- URL: https://mennankose.com/tinymcede-custom-button-ekleme/
- Published: 2014-07-11T12:11:06.000Z
- Updated: 2026-10-29T05:26:28.000Z
- Author: Mennan Köse
- Tags: JavaScript, #Import 2026-11-06 07:43

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:

```javascript
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. [**addButton**](http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addButton?ref=mennankose.com)fonksiyonu 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.

![tinymce](https://cdn.synaps.media/mennan/content/images/2019/08/tinymce.jpg)