在Tiny MCE自定义按钮中使用现有图标

Question

could we use existing icon to custom button? (not an image)

I have tried this, but it doesn't work:

tinymce.init({
   ...

   toolbar: 'example'

   setup: function(ed) {
      ed.addButton('example', {
         title: 'My title',
         image: '../js/tinymce/plugins/example/img/example.gif',
         classes: 'mce-ico mce-i-image',
         onclick: function() {
            ed.insertContent('Hello world!!');
         }
      });
   }
});

Answer 1

Yes you can use an existing icon.

You can take the class name from an existing button - eg "mce-i-image" as you've done - then, rather than apply that to the class name of your new button, you strip off the "mce-i-" prefix and use the remainder - "image" in this case - as the icon key.

I've amended your example below.

eg

setup: function(ed) {
  ed.addButton('example', {
    title: 'My title',
    icon: 'image',  // This line sets the icon key.
    onclick: function() {
      ed.insertContent('Hello world!!');
    }
  });
}