9

从http://codemirror.net/doc/manual.html，我只找到getRange()、 undo() 、 redo() 等，我在尝试时找不到 cut() 、 copy() 和粘贴 API 等等运行editor.execCommand("cut")，我得到错误。你可以帮帮我吗？谢谢！

4

3 回答 3

13

使用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();
    }
});

CodeMirror通过本机 JavaScript检索实例。

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;
};

演示

请看完整；在JSFiddle进行深入演示。

于 2015-10-17T04:10:06.623 回答
4

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

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

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

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

于 2013-04-24T09:59:30.320 回答
1

将隐藏的 contenteditable div 添加到您的 textarea 编辑器包装器中。Contenteditable 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>

于 2019-08-15T19:16:59.657 回答