Tag Archives: TinyMCE

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!

Adding a Custom Button to TinyMCE

TinyMCE

First thing to say TinyMCE is a very popular WYSIWYG online based editor. It’s very widely used in the web, as may already know it it’s part of the default WordPress installation. Out of the web, of course, there are some other editors as well. The most used and well developed projects are the Yahoo!’s YUI 2 Rich Text Editor and CKEditor also known with his past name – FCKEditor.TinyMCE Full Featured Example

Before I proceed with this post, let me say that I’m working and this tutorial is based on version 3.1.1 released on 18 Aug 2008. Continue reading Adding a Custom Button to TinyMCE