CodeMirror2：如何格式化粘貼的內容？

Question

是否可以在CodeMirror2中的「onPaste」之類的事件之後格式化插入的內容？ - 我想在粘貼後從剪貼板縮進內容。我已經知道使用JavaScript是無法訪問剪貼板的。

所以我認爲也沒有可能創建一個剪切/複製/粘貼功能的上下文菜單？ - 我可以創建自己的JS剪貼板還是有現成的解決方案？

謝謝！ LEX

Answer 1

一個CodeMirror有本地的「inputRead」事件，所以你可以這樣做：

editor.on('inputRead', function(cm, event) { 
    /* event -> object{ 
     origin: string, can be '+input', '+move' or 'paste' 
      doc for origins >> http://codemirror.net/doc/manual.html#selection_origin 
     from: object {line, ch}, 
     to: object {line, ch}, 
     removed: array of removed strings 
     text: array of pasted strings 
    } */ 
    if (event.origin == 'paste') { 
     console.log(event.text); 
     var text = event.text[0]; // pasted string 
     var new_text = '['+text+']'; // any operations here 
     cm.refresh(); 
     // my first idea was 
     // note: for multiline strings may need more complex calculations 
     cm.replaceRange(new_text, event.from, {line: event.from.line, ch: event.from.ch + text.length}); 
     // first solution did'nt work (before i guess to call refresh) so i tried that way, works too 
     /* cm.execCommand('undo'); 
     cm.setCursor(event.from); 
     cm.replaceSelection(new_text); */ 
    } 
}); 

，也有其他事件「腰斬」，「複製」和「粘貼」（http://codemirror.net/doc/manual.html#events）因此，這將工作：

editor.on('paste', function(cm, event) { ... }); 

Andavtage是，你可以通過調用event.preventDefault取消事件（）;但檢索粘貼的文本是一個問題。

目前我正在處理類似的事情 - 勾複製/粘貼事件並做一些替換。我找到了一個解決方案，以編程方式將文本複製到剪貼板。這裏是clipboard.js 這裏討論Does codemirror provide Cut, Copy and Paste API?。最棒的是你可以通過編程觸發點擊事件（當我使用ZeroClipboard和跨瀏覽器閃存時，這是一個問題），它會起作用！

new Clipboard('.btn-copy', { 
    text: function(trigger) { 
     var text = editor.getValue(); // or editor.getSelection(); 
     return text.replace(/\s+/g,' '); 
    } 
}); 

editor.on('copy', function(cm, event) { 
    $('.btn-copy').click(); 
    event.preventDefault(); 
}); 

Answer 2

我發現被截獲，甚至使用inputRead然後手動改變粘貼內容的唯一解決方案。我提出了一個可以重複使用的通用函數：

class CodeMirrorExt { 
    // This function returns a callback to be used with codemirror's inputRead event. 
    // The intent is to intercept a pasted text, transform the pasted contents (each line) with the function 
    // you provide, and then have that transformed content be what ends up in the editor. 
    // 
    // Usage example that cuts each pasted line to 10 chars: 
    // 
    // this.codemirror.on("inputRead", CodeMirrorExt.replaceTextOnPasteFunc((line) => { 
    //  return line.slice(0, 10); 
    // })); 

    static replaceTextOnPasteFunc(transformFunc) { 
     return ((doc, event) => { 
      if (event.origin !== "paste") { 
       return; 
      } 

      const firstText = event.text[0]; 
      const lineNum = event.from.line; 
      const chNum = event.from.ch; 

      const newTexts = event.text.map(transformFunc); 

      newTexts.forEach((text, i) => { 
       if (i == 0) { 
        doc.replaceRange(text, {line: lineNum, ch: chNum}, {line: lineNum, ch: chNum + firstText.length}); 
       } 
       else { 
        doc.replaceRange(text, {line: lineNum + i, ch: 0}, {line: lineNum + i, ch: event.text[i].length}); 
       } 
      }) 
     }); 
    } 
} 

export default CodeMirrorExt;