codemirror是否提供剪切,复制和粘贴API？

Question

从http://codemirror.net/doc/manual.html,我只找到getRange(),undo(),redo()等,当我尝试时,我找不到cut(),copy()和粘贴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();
    }
});

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深入演示.

Answer 2

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

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

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

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