1

我一直在玩一些所见即所得的 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'
});
4

1 回答 1

0

就我而言，我这样做了：

// 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 |...
于 2018-04-30T09:33:18.537 回答