[英]Custom button and wrapping multiple elements in a set of tags in TinyMCE or CKEditor?
I've been playing around with a number of WYSIWYG HTML editors and have found TinyMCE and CKEditor closest to meeting my requirements. 我一直在与许多WYSIWYG HTML编辑器一起玩,发现TinyMCE和CKEditor最接近我的要求。 However, I can't seem to add an extra button for wrapping multiple elements with either one using their API.
但是,我似乎无法添加一个额外的按钮来使用它们的API将多个元素包装在一起。 I tried using a style to do the wrapping but, both wraps each selected element separately rather than as a group.
我尝试使用一种样式进行包装,但是两者都将每个选定的元素分别包装,而不是将它们包装在一起。
So when I highlight and click the new custom button on... 因此,当我突出显示并单击新的自定义按钮时...
<p>Para 1</p>
<p>Para 2</p>
Instead of... 代替...
<div class="copy">
<p>Para 1</p>
<p>Para 2</p>
</div>
I get... 我知道了
<div class="copy">
<p>Para 1</p>
</div>
<div class="copy">
<p>Para 2</p>
</div>
What are the API calls I need to achieve the former in either of these editors? 在这两个编辑器中,要实现前者,我需要哪些API调用?
For TinyMCE v4.2 I tried: 对于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>');
}
});
}
});
For CKEditor v4.5: 对于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'
});
In my case I done this like: 就我而言,我这样做是:
// 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');
}
});
}
});
And register button in toolbar: 并在工具栏中注册按钮:
'toolbar': "my-codeblock | undo redo |...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.