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

我一直在使用一些WYSIWYG HTML编辑器，发现TinyMCE和CKEditor最符合我的要求。然而，我似乎无法添加额外的按钮来包装多个使用API的元素。我尝试使用一种样式进行包装，但两者都单独包装每个选定元素，而不是作为一个组

因此，当我突出显示并单击屏幕上的“新建自定义”按钮时

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

第1段

第2段

而不是

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

第1款

第2段

我得到

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

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

第1款

第2段

在这两个编辑器中实现前者需要哪些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>');
            }
        });
    }
});

ed=tinymce.init({
选择器：“#编辑器”，
工具栏：“工具栏”，
设置：功能（ed）{
ed.addButton（'包装器'{
文本：“测试”，
标题：“包装器”，
onclick:function（）{
ed.dom.setOuterHTML（'p'，'checked'）；
}
});
}
});

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

var editor=CKEDITOR.instances.editor；
editor.addCommand（'wrapcopy'{
执行：函数（编辑器）{
//试试1
范围=编辑器.getSelection（）.getRanges（）[0]；
el=新的CKEDITOR.dom.element（'div'）；
el.addClass（“副本”）；
el.append（range.cloneContents（））；
new_html=el.getOuterHtml（）；
insertHtml（新的html）；
返回；
//试试2
elem=editor.getSelectedHtml（）；
editor.insertHtml（“”+editor.getSelectedHtml（true）+“”）；
}
});
editor.ui.addButton（'Wrapper'{
标签：“包装”，
命令：“wrapcopy”，
工具栏：“基本样式，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');
         }
      });
   }
});

' ); }); //添加我的自定义按钮 ed.addButton（'my-codeblock'{ 标题：“光标悬停时的我的标题”， 文本：“包装代码”， onclick:function（）{ //按事件执行命令点击按钮 ed.execCommand（'set-codeblock'）； } }); } }); 和工具栏中的“注册”按钮：

---

就我而言，我是这样做的：

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

' ); }); //添加我的自定义按钮 ed.addButton（'my-codeblock'{ 标题：“光标悬停时的我的标题”， 文本：“包装代码”， onclick:function（）{ //按事件执行命令点击按钮 ed.execCommand（'set-codeblock'）； } }); } }); 和工具栏中的“注册”按钮：