TinyMCE - 如何添加一个用标签包裹选定文本的按钮

Question

我目前正在使用 TinyMCE，并想添加一个自定义按钮，其工作原理如下：

1. 用户在文本编辑器中突出显示文本
2. 用户点击自定义按钮 X
3. 文本（遛狗）用标签（遛狗）包裹

关于这是否可以做到的任何想法？我已经想出了如何使自定义按钮注入文本，但不换行...这是当前代码：

// 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>');
    }
});

---

谢谢！

Answer 1

实现此目的的更好方法是 (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>');
    }
  }
});

Answer 2

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>');
  }
});