Tommy Tommy - 1 year ago 123
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.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 Source

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

  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
    }, // end setup
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download