代码镜像是否提供剪切、复制和粘贴API

Question

来源http://codemirror.net/doc/manual.html，我只找到CCD_ 1，undo（）、redo（）等，我找不到cut（）、copy（）和paste API，当我尝试运行editor.execCommand("cut")时，会出现更多错误。你能帮我吗？谢谢

Answer 1

使用clipboard.js，您可以定义text()函数来获取CodeMirror内部文档的值。

为方便起见，请存储对（<textarea>）编辑器选择器的引用。

var editorSelector = '#editor' // or '#editor + .CodeMirror';

参照您的按钮实例化一个新的ClipBoard对象。

new Clipboard('.clip-btn-native', {
    text: function(trigger) {
        return getCodeMirrorNative(editorSelector).getDoc().getValue();
    }
});

通过本机JavaScript检索CodeMirror实例。

function getCodeMirrorNative(target) {
    var _target = target;
    if (typeof _target === 'string') {
        _target = document.querySelector(_target);
    }
    if (_target === null || !_target.tagName === undefined) {
        throw new Error('Element does not reference a CodeMirror instance.');
    }
    if (_target.className.indexOf('CodeMirror') > -1) {
        return _target.CodeMirror;
    }
    if (_target.tagName === 'TEXTAREA') {
        return _target.nextSibling.CodeMirror;
    }
    return null;
};

---

Demo

请参阅完整；在JSFiddle上进行深入演示。

Answer 2

没有用于剪切/复制/粘贴的CodeMirror API，因为浏览器安全限制禁止JavaScript以编程方式访问剪贴板。粘贴可以用于窃取私人数据，剪切/复制可以用作更复杂的攻击向量。

浏览器自己的本地代码仅基于当前选定的文本或焦点文本字段来处理访问剪贴板的用户手势（键盘快捷键和上下文菜单项）。

这个SO线程很好地总结了绕过这些限制的尝试。CodeMirror的方法是第一个要点：它使用隐藏的文本区域来确保用户剪贴板手势正常工作，但这仍然不支持编程API。

但是有一个的部分解决方法：使用一个小的Flash小部件（这是上面线程中的第二个项目符号）。Flash稍微放宽了对复制/剪切（而不是粘贴）的限制。它仍然必须由某个用户事件触发，但它可能类似于单击HTML UI中的按钮。像ZeroClipboard和Clippy这样的包装器使访问这些功能变得简单，而无需了解Flash。在复制时，您需要编写一些粘合代码来从CodeMirror中提取适当的字符串，但这应该不会太糟糕。

Answer 3

将隐藏的内容可编辑div添加到文本区域编辑器包装中。可编辑内容的div尊重新行和制表符，这是我们在复制代码时需要的。

这是我的CodePen演示

var content = $('.content');
var toCopy = content.find('.copy-this');
// initialize the editor
var editorOptions = {
  autoRefresh: true,
  firstLineNumber: 1,
  lineNumbers: true,
  smartIndent: true,
  lineWrapping: true,
  indentWithTabs: true,
  refresh: true,
  mode: 'javascript'
};
var editor = CodeMirror.fromTextArea(content.find(".editor")[0], editorOptions);
content[0].editor = editor;
editor.save();
// set editors value from the textarea
var text = content.find('.editor').text();
editor.setValue(text);
// setting with editor.getValue() so that it respects n and t
toCopy.text(editor.getValue());
$(document).on('click', '.copy-code', function() {
  var content = $(this).closest('.content');
  var editor = content[0].editor;
  var toCopy = content.find('.copy-this')[0];
  var innerText = toCopy.innerText  // using innerText here because it preserves newlines
  // write the text to the clipboard
  navigator.clipboard.writeText(innerText);
});

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.CodeMirror {
  height: fit-content !important;
}
.copy-code {
  background: #339af0;
  width: fit-content;
  cursor: pointer;
}

<!-- resources -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" />
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <!-- button to copy the editor -->
  <div class="copy-code" title="copy code">copy</div>
  <!-- add contenteditable div as it respects new lines when copying unlike textarea -->
  <div class="copy-this" contenteditable style="display: none"></div>
  <textarea class="editor" style="display: none;">// here is a comment
// here is another comment 
  </textarea>
</div>