javascript - CodeMirror2: How to format a pasted content? - Stack Overflow

admin管理员组

文章数量:1344956

Is it possible to format the inserted content after an event like "onPaste" in CodeMirror2? - I want to indent the content from the clipboard after pasting. I already know with JavaScript it's not possible to get access to the clipboard.

So I think there is also no possiblity to create a context menu with cut/copy/paste functions? - Could I create my own JS-clipboard or is there an existing solution?

Thanks! leX

Is it possible to format the inserted content after an event like "onPaste" in CodeMirror2? - I want to indent the content from the clipboard after pasting. I already know with JavaScript it's not possible to get access to the clipboard.

So I think there is also no possiblity to create a context menu with cut/copy/paste functions? - Could I create my own JS-clipboard or is there an existing solution?

Thanks! leX

• javascript
• codemirror

Share Improve this question Follow asked May 21, 2012 at 14:09 agassneragassner 68988 silver badges2525 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Took me a little while to work this out, so in case it helps anyone, here's how I'm intercepting pastes and replacing each tab with 2 spaces:

editor.on("beforeChange", (cm, change) => {
  if(change.origin === "paste") {
    const newText = change.text.map(line => line.replace(/\t/g, "  "));
    change.update(null, null, newText);
  }
});

A CodeMirror has native "inputRead" event so you can do this:

editor.on('inputRead', function(cm, event) {
    /* event -> object{
         origin: string, can be '+input', '+move' or 'paste'
             doc for origins >> http://codemirror/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 plex 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); */
    }
});

And there are also other events "cut", "copy" and "paste" (http://codemirror/doc/manual.html#events) so this will work:

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

Andavtage is you can cancel event by calling event.preventDefault(); but retrieving pasted text is a problem.

Currently i am working on similar thing - hook copy/paste events and make some replacements. I found a solution to programmatically copy text to clipboard. This is clipboard.js discussed here Does codemirror provide Cut, Copy and Paste API?. The great thing is you can trigger click event programmatically (that was a problem when i used ZeroClipboard with cross-browser flash shim) and it will work!

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

The only solution I found was intercepting the even using inputRead and then manually changing the pasted contents. I made a generic funcion you could reuse:

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;

Using js-beautify you can beautify the editors value during a paste event on the .CodeMirror like so:

$(document).on('paste', '.CodeMirror', function(e) {
    var content = $(this).closest('.content');
    var editor = content[0].editor;

    // beautify the code
    editor.setValue( js_beautify( editor.getValue(), { indent_size: 2 } ) );
});

Be aware that when inserting text into the editor, it listens to the first indentation, so if your first line is indented, all other lines will be indented accordingly.

ex:

    function something() { // if the start is indented like so,
        var blah = something; // next lines will follow
    }

本文标签： javascriptCodeMirror2 How to format a pasted contentStack Overflow