How to properly add an HTML tag insert button to the TinyMCE editor?

Question

JavaScript

I add a button, it is displayed. Here is the code

(function() {
  tinymce.create('tinymce.plugins.insert_gallery', {
    init : function(ed, url) {
      ed.addButton('insert_gallery', {
        title : 'Вставить слайдер',
        image : url + '/img/gallery.png',
        onclick : function() {
          ed.selection.setContent('<xpageslider>' + ed.selection.getContent() + '</xpageslider>');
        }
      });
    },
    createControl : function(n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('insert_gallery', tinymce.plugins.insert_gallery);
})();

note what I want to add to the editor <xpageslider>. When you add this tag to the editor, it is immediately cut out. In init () I allowed to insert all tags. In other cases, for example, inserting code through the editor's dialog box, it works and all the rules.
Maybe there is a special method for inserting html tags?

Answer 1

I decided that the tag to be inserted should not be empty

(function() {
  tinymce.create('tinymce.plugins.insert_gallery', {
    init : function(ed, url) {
      ed.addButton('insert_gallery', {
        title : 'Вставить слайдер',
        image : url + '/img/gallery.png',
        onclick : function() {
          ed.selection.setContent('<xpageslider>&nbsp;</xpageslider>');
        }
      });
    },
    createControl : function(n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('insert_gallery', tinymce.plugins.insert_gallery);
})();