TinyMCE ile Formatter Kullanımı

Okuma Süresi: 1dakikaTinyMCE’de Formatter 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 veya del 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:

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 ve remove 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.

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

<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 tıklayabilirsiniz.

Yazdığımız kodların bulunduğu örnek sayfaya gitmek için buraya tıklayabilirsiniz.