TinyMCE - Как добавить кнопку, которая обертывает выделенный текст тегом

В настоящее время я использую TinyMCE и хочу добавить пользовательскую кнопку, которая работает следующим образом:

Пользователь выделяет текст в текстовом редакторе
Пользователь нажимает пользовательскую кнопку X
Текст (собака идет) обертывается тегом (собака идет)

Любые идеи о том, можно ли это сделать? Я выяснил, как сделать пользовательскую кнопку вставлять текст, но не обертывать текст... Вот текущий код:

// Add a custom button
ed.addButton('mybutton', {
    title : 'My button',
    'class' : 'MyCoolBtn',
    image : 'MyCoolBtn.png',
    onclick : function() {
        // Add you own code to execute something on click
        ed.focus();
        ed.selection.setContent('<strong>Hello world!</strong>');
    }
});

спасибо!

Ответ 1

ed.addButton('mybutton', {
  title: 'My button', 
  class: 'MyCoolBtn', 
  image: 'MyCoolBtn.png', 
  onclick: function() { 
    // Add your own code to execute something on click 
    ed.focus();
    ed.selection.setContent('<tag>' + ed.selection.getContent() + '</tag>');
  }
});

Ответ 2

Лучший способ добиться этого - (1) выполнить быструю проверку, чтобы убедиться, что выбор не пуст, затем (2) используйте метод execCommand().

Использование execCommand() означает, что действие будет доступно для отмены. Ответ @Warrior использует setContent(), который не будет отменен.

ed.addButton('mybutton', {
  title: 'My button', 
  class: 'MyCoolBtn', 
  image: 'MyCoolBtn.png', 
  onclick: function() { 
    ed.focus();
    var text = ed.selection.getContent({'format': 'html'});
    if(text && text.length > 0) {
      ed.execCommand('mceInsertContent', false, '<tag>'+text+'</tag>');
    }
  }
});