Tommy Tommy - 6 months ago 16
jQuery Question

How to add a new button in tinymce

I have solved my part to add a button almost.

setup : function(ed) {
// Add a custom button
ed.addButton('Information', {
title : 'Viktig Information',
image : '../img/page_white_text.png',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent('Text here');
}
});
}


But now i wonder how i can make this to work like their bold button and stuff? So when i press the bold the text becomes bold..

I want the same with my button, when i press my button i want a div to appear. Anyone knows how i can do this?!

Answer

This is an easy task to perform. Just add something like this to your editor init function. See this page of moxycode too.

tinyMCE.init({
  ...
  theme_advanced_buttons1: 'bold,italic,..'

  setup: function(ed) {

      ed.onInit.add(function(ed) {
        // Scroll runter
        ed.addCommand('my_own_command', function() {
          alert('my_own_command called!');
        });
      });

      // Register example button
      ed.addButton('example', {
        title: 'example.desc',
        // make sure the image exists
        image: '../jscripts/tiny_mce/plugins/example/img/example.gif',
        onclick: function() {
          ed.windowManager.alert('Hello world!!');
          // execute my_own_command
          ed.execCommand('my_own_command');
        }
      });
    }, // end setup
    ...
}); 
Comments