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 |...

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

1 个答案: