自定义按钮并将多个元素包装在TinyMCE或CKEditor中的一组标签中？

Question

我一直在与许多WYSIWYG HTML编辑器一起玩，发现TinyMCE和CKEditor最接近我的要求。 但是，我似乎无法添加一个额外的按钮来使用它们的API将多个元素包装在一起。 我尝试使用一种样式进行包装，但是两者都将每个选定的元素分别包装，而不是将它们包装在一起。

因此，当我突出显示并单击新的自定义按钮时...

<p>Para 1</p>
<p>Para 2</p>

代替...

<div class="copy">
<p>Para 1</p>
<p>Para 2</p>
</div>

我知道了

<div class="copy">
    <p>Para 1</p>
</div>

<div class="copy">
    <p>Para 2</p>
</div>

在这两个编辑器中，要实现前者，我需要哪些API调用？

对于TinyMCE v4.2，我尝试：

ed = tinymce.init({
    selector: "#editor",
    toolbar: 'toolbar',
    setup: function(ed) {
    ed.addButton('wrapper', {
        text: 'testing',
        title : 'Wrapper',
        onclick : function() {
            ed.dom.setOuterHTML('p', '<div class="copy">checked</div>');
            }
        });
    }
});

对于CKEditor v4.5：

var editor = CKEDITOR.instances.editor;

editor.addCommand( 'wrapcopy', {
    exec: function( editor ) {

    // try 1

    range = editor.getSelection().getRanges()[0];
    el = new CKEDITOR.dom.element('div');
    el.addClass('copy');

    el.append( range.cloneContents() );
    new_html = el.getOuterHtml();

    editor.insertHtml(new_html);                    
    return;

    // try 2

    elem = editor.getSelectedHtml();
    editor.insertHtml( '<div class="copy">'+editor.getSelectedHtml(true)+'</div>' );

    }
});

editor.ui.addButton( 'Wrapper', {
    label: 'Wrap',
    command: 'wrapcopy',
    toolbar: 'basicstyles,1'
});

Answer 1

就我而言，我这样做是：

// Adds a custom button to the editor that inserts contents when clicked
tinymce.init({
   ...

   toolbar: 'example'

   setup: function(ed) {
//add my custom command
      ed.addCommand('set-codeblock', function(ui, v) {
         ed.insertContent( '<pre><code>' + 
         ed.selection.getContent({format: 'text'}) + '</code></pre>' );
      }); 

//add my custom button
      ed.addButton('my-codeblock', {
         title: 'My title when cursor hover',
         text: 'Wrap code',
         onclick: function() {
//execute command by event click in button
            ed.execCommand('set-codeblock');
         }
      });
   }
});

并在工具栏中注册按钮：

'toolbar': "my-codeblock | undo redo |...