Get your own copy
Don't hesitate! Just download and test it all by yourself for free!
Setup editor events
This example adds a custom button to the editor which inserts a strong element with the text hello world. It also adds an onClick event event to the editor. When the editor is clicked, an alert dialog is displayed.
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('<strong>Hello world!</strong>');
}
});
}
});
</script>
<form method="post" action="somepage">
<textarea name="content" style="width:100%">
</textarea>
</form>
