Setup editor events example

This example adds a custom button to the editor and ones you click that one it will insert a strong element with hello world. It also adds a onClick event to the editor and ones you click the editor it will display an alert dialog.

HTML source

Below is all you need to setup the example.

<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) {
        // Display an alert onclick
        ed.onClick.add(function(ed) {
            ed.windowManager.alert('User clicked the editor.');
        });

        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                ed.selection.setContent('Hello world!');
            }
        });
    }
});
</script>

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