将 TinyMCE 编辑器的选定内容复制到剪贴板

Question

此处为 Jsfiddle 示例：

我的目标是 select TinyMCE 文本区域的所有内容并将其复制到剪贴板（相当于全部突出显示并按 ctrl+c）。

我可以像这样使用普通输入来做到这一点：

$('.copyToclip').on('click', function() {
    //select the input
    $(this).siblings('input').select();
    //fire the copy command
    document.execCommand("copy");
    $(this).text('copied');
});

以下代码 select 编辑器中的所有内容，但是当我调用 'execCommand("copy")' 时，它不会复制到剪贴板，这是我的代码：

$('.copyTinyMCEToclip').on('click', function() {
    //select the content of the active tinyMCE instance 
    tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody());
    document.execCommand("copy");
    $(this).text('copied');
});

如有任何帮助，我们将不胜感激。

Answer 1

你可以使用 tinyMCE 方法吗，试试这个：

jQuery(function(){
    jQuery('.copyTinyMCEToclip').click(function(){
      var selectedText = tinyMCE.activeEditor.selection.getContent();
      jQuery('input').attr('value', selectedText);
    });
});

示例：http://jsfiddle.net/w0ap9Lun/2/

参考：http://archive.tinymce.com/wiki.php/API3:method.tinymce.dom.Selection.getContent

Answer 2

试试这个：

将文本复制到剪贴板的函数：

function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
    // IE specific code path to prevent textarea being shown while dialog is visible.
    return clipboardData.setData("Text", text); 

} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
    document.body.appendChild(textarea);
    textarea.select();
    try {
        return document.execCommand("copy");  // Security exception may be thrown by some browsers.
    } catch (ex) {
        console.warn("Copy to clipboard failed.", ex);
        return false;
    } finally {
        document.body.removeChild(textarea);
    }
}}

给控件赋值：

  $('.copyTinyMCEToclip').on('click', function() {
    var text = tinyMCE.activeEditor.getContent().replace(/<\/?[^>]+(>|$)/g, "")
    copyToClipboard(text);
    jQuery('input').attr('value', text);});

Answer 3

我通过优化搜索查询找到了解决方案。问题更广泛地是将 HTML 添加到剪贴板，我在这里找到了答案：

Answer 4

jquery 单击 tinymce 菜单图标。唯一的缺点是它会让编辑器选择所有内容。

$(".mce-i-selectall").click();
$(".mce-i-copy").click();

Answer 5

通过 tinyMCE API 而不是文档对象或 JQuery.

调用 "copy" 命令的最简单解决方案

tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody());
tinyMCE.activeEditor.execCommand( "Copy" );

将 TinyMCE 编辑器的选定内容复制到剪贴板

Copy the selected content of a TinyMCE Editor to the clipboard

html

jquery

tinymce