TinyMCE umżliwia tworzenie własnych pluginów wykonujących różne operacje w zależności od tego jaką funkcjonalność chcemy osiągnąć, opisze przykład tworzenia własnych przycisków oraz listy rozwijanej.

 

Na początek pobieramy edytor TinyMCE [tutaj]

 

Następnie tworzymy przykładowy plik edytor.html

Teraz edytujemy nasz plik edytor.html i podajemy ścieżkę do głownego pliku tinyMCE:

 

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>

 

Na listingu zamieszczam kod pluginu oraz dodatkowe zastosowania.

Oto urywek kodu tworzący nowy przycisk tinyMCE wykonujący określoną funkcje javascript w moim przypadku oknoDialogowe():

 

tinymce.create('tinymce.plugins.OknoDialogowePlugin', {
    createControl: function(n, cm) {
    switch (n) {
        case 'OknoDialogoweButton':
            var c = cm.createMenuButton('OknoDialogoweButton', {
            title : 'Otwórz okno dialogowe',
            image : 'tiny_mce/images/ikonka.png',
            icons : false,
            onclick : function() {
                oknoDialogowe();
            }                   
        });
        return c;
        }
    return null;
    }
});

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// Tworzymy nowy plugin o nazwie Test
tinymce.create('tinymce.plugins.TestPlugin', {
        createControl: function(n, cm) {
                switch (n) {
                        case 'mojTestowyButton':
                                var c = cm.createMenuButton('mojTestowyButton', {
                                        title : 'Tytuł buttonu',
                                        image : 'img/ikonkaButtonu.gif',
                                        icons : false
                                });
                               
                                //Tutaj tworzymy pola menu rozwijanego po kliknięciu w mojTestowyButton
                                c.onRenderMenu.add(function(c, m) {
                                        var sub;

                                        m.add({title : 'Wartość 1', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Wartość 1');
                                        }});

                                        m.add({title : 'Wartość 2', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Wartość 2');
                                        }});

                                        sub = m.addMenu({title : 'Wartość 3'});

                                        sub.add({title : 'Wartość 3.1', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Wartość 3.1');
                                        }});

                                        sub.add({title : 'Wartość 3.2', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, 'Wartość 3.2');
                                        }});
                                });

                                // Zwraca instancje nowego buttonu
                                return c;
                }

                return null;
        }
});


// Rejestracja naszego pluginu jako przyklad
tinymce.PluginManager.add('przyklad', tinymce.plugins.TestPlugin);

// Inicjalizacja edytora z nowym pluginem i buttonami
tinyMCE.init({
        plugins : '-przyklad', // - pomija ładowanie pluginu
        mode : "exact",
        elements : "poleEdytora",
        theme : "advanced",
        theme_advanced_buttons1 : "mojTestowyButton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom"
});
</script>

<form method="post" action="somepage">
        <textarea name="poleEdytora" id="poleEdytora" style="width:100%">
        </textarea>
</form>


/*
przykłady dodatkowe:

1. po przyciśnieciu przycisku kod zaznaczony w tinyMCE zostaje pogrubiony:

c.onRenderMenu.add(function(c, m) {
        var sub;
    m.add({title : 'Pogrób tekst', onclick : function() {
    zaznaczenie =tinyMCE.activeEditor.selection.getContent();
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<b> '+zaznaczenie+' </b>');
    }});
});
               
2. jeśli umożliwiamy dodawanie kodu przyda sie aby miec przycisk automatycznej konwersji kodu do bezpiecznej postacji

c.onRenderMenu.add(function(c, m) {
        var sub;
        m.add({title : 'Dodaj kod', onclick : function() {
        zaznaczenie =encodeURIComponent(tinyMCE.activeEditor.selection.getContent());//konwertujemy nasz kod
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<code> '+zaznaczenie+' </code>');
        }});
});
*/