Adding a Custom Button to TinyMCE – REVISED

Driven by the comment of Afraithe I have to apologize about the yesterday’s post. Here’s a much much simpler, cleaner way do add a custom button to TinyMCE.

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "mybutton,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",
    plugins : 'inlinepopups',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});
</script>
 
<form method="post" action="somepage">
        <textarea name="content" style="width:100%">
        </textarea>
</form>

The Problem

There is only one problem – I still cannot find easily the section of the site in TinyMCE. So I’m supposed to click on the comment’s link. This is a pity and perhaps that’s why I couldn’t find it before. Moxiecode should make this section more accessible!

3 thoughts on “Adding a Custom Button to TinyMCE – REVISED

  1. Great but it doesn’t word for me, I must declare my custombutton in the “theme_advanced_buttons” options

    in your exemple :
    theme_advanced_buttons2 : “mybutton”,

    note : I use this syntaxe to create my instance :

    var tinymceInstance = $(‘textarea.tinymce’).tinymce({)} ;

    hope it can helps

  2. The previous example of how to add a custom button to tinyMCE at least had explanations about why things had to be done. The problem with the Moxiecode site is that, as above, they simply list code with no explanation about how why TinyMCE requires this approach or that approach. I wholeheartedly agree with you that Moxiecode should make their documentation more accessible and comprehensive.

    Anyway, rant over. Thanks for posting yesterday’s example and keep up the good work :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>