> ## 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 ile Formatter Kullanımı
- URL: https://mennankose.com/tinymce-ile-formatter-kullanimi/
- Published: 2014-11-26T17:01:37.000Z
- Updated: 2026-10-29T05:26:28.000Z
- Author: Mennan Köse
- Tags: HTML, JavaScript, #Import 2026-11-06 07:43

Okuma Süresi: 1dakikaTinyMCE’de [Formatter](http://www.tinymce.com/wiki.php/Configuration:formats?ref=mennankose.com) basit bir şekilde istediğimiz biçimleri uygulamamızı veya kaldırmamıza yarar.

Örnek olarak TinyMCE editöründe seçmiş olduğumuz alanı [ins](http://www.w3schools.com/tags/tag%5Fins.asp?ref=mennankose.com) veya [del](http://www.w3schools.com/tags/tag%5Fdel.asp?ref=mennankose.com) etiketleri arasına alacak ve kaldır düğmesine bastığımızda ise bu biçimleri kaldıracak.

Varsayılan olarak gelen init fonksiyonumuzu aşağıdaki şekilde değiştirelim:

```javascript
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    formats: {
         removed: { inline: 'del', 'classes': 'deleted' },
         added: { inline: 'ins', 'classes': 'inserted' }
       }
});

```

**formats** özelliğinde istediğimiz kadar yeni biçimler ekleyebiliriz. Bu örnekte **removed** ve **added** isminde biçimler ekledik. **inline** değeri ile hangi elementi kullanarak biçimlendireceğini, **classes** özelliği ile de elemente class vermiş olduk.

Editörde seçili olan alana bu biçimleri uygulayabilmek veya kaldırabilmek için [**apply**](http://www.tinymce.com/wiki.php/api4:method.tinymce.Formatter.apply?ref=mennankose.com) ve [**remove**](http://www.tinymce.com/wiki.php/api4:method.tinymce.Formatter.remove?ref=mennankose.com) fonksiyonları kullanılır. **apply** fonksiyonu seçili alana biçimi uygular, **remove** fonksiyonu ise seçili alanda uygulanmış bir biçim var ise bu biçimi kaldırır. Her iki fonksiyonda tek bir parametre almaktadır. Parametre olarak formats alanında tanımlamış olduğunuz ismi vermeniz yeterlidir.

Örnek ekran görüntüsü aşağıdaki gibidir.

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

Yazmış olduğumuz tüm kod aşağıdaki gibidir.

```html
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    formats: {
        removed: { inline: 'del', 'classes': 'deleted' },
        added: { inline: 'ins', 'classes': 'inserted' }
    }
});
</script>
 
<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>
<a href="#" class="add" onclick="tinymce.activeEditor.formatter.apply('added');return false;">ekle</a>
<a href="#" class="remove" onclick="tinymce.activeEditor.formatter.apply('removed');return false;">sil</a>

```

TinyMCE’nin formatter hakkında daha detaylı bilmek almak ve fonksiyon listesine gitmek için [buraya](http://www.tinymce.com/wiki.php/API3:class.tinymce.Formatter?ref=mennankose.com) tıklayabilirsiniz.

Yazdığımız kodların bulunduğu örnek sayfaya gitmek için [buraya](http://fiddle.tinymce.com/E4eaab?ref=mennankose.com) tıklayabilirsiniz.