[Javascript] 에디터에 붙여넣기 시 데이터 수정 후 커서 위치에 입력

paste 이벤트 발생 시 jQuery로 바인딩 하여
정규식을 이용해 개행문자를 제외한 모든 테그를 제거하고
selection과 range를 이용하여 커서위치에 붙여넣기 기능

 

 

//-- 방법1. 정규식으로 개행문자를 제외한 테그를 모두 바꾼 후 insertNode로 한번에 추가

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');
    pasteVal = pasteVal.replace(/<(\/)?br>/gi, "##BR##").replace(/<[^>]+>/g, '').replace(/##BR##/g, '
').replace(/\r\n/g, '
');

    var selection = window.getSelection();
    var selRange = selection.getRangeAt(0);
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();

    selRange.insertNode(selRange.createContextualFragment(pasteVal));

    e.preventDefault();

});

 

//-- 방법2. 상위div 만들어서 감싸고 insertNode로 추가하는 법

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');

    var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);

    var selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();

    var fullNode = document.createElement("div");
    for( var i=0; i<pasteValArr.length; i++ ){
        
        pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
        if ( pasteValArr[i] == "" ) {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createElement("br"));
        } else {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createTextNode(pasteValArr[i]));
        }
        fullNode.appendChild(newNode);
    }
    selection.getRangeAt(0).insertNode(fullNode);

    e.preventDefault();

});

 

//-- 방법3. 개행문자로 쪼갠 후 배열을 뒤집어서 insertNode 로 하나씩 추가하는 방법

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');

    var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);

    var selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();

    pasteValArr = pasteValArr.reverse();
    for( var i=0; i<pasteValArr.length; i++ ){
        
        pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
        if ( pasteValArr[i] == "" ) {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createElement("br"));
        } else {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createTextNode(pasteValArr[i]));
        }

        selection.getRangeAt(0).insertNode(newNode);
    }

    e.preventDefault();

});

 

//--방법4. 부모 노드에 appendChild로 추가하는 법 (노드중간에다가 추가할때 에러 발생)

$("#editor_area").on('paste', function (e) {
    
    var clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
    var pasteVal = clipboardData.getData('text');

    var pasteValArr = pasteVal.split(/\r\n|\r|\n/gi);

    var selection = window.getSelection();
    if (!selection.rangeCount) return false;
    selection.deleteFromDocument();
    for( var i=0; i<pasteValArr.length; i++ ){
        
        pasteValArr[i] = pasteValArr[i].replace(/<[^>]*>/g,"");
        if ( pasteValArr[i] == "" ) {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createElement("br"));
        } else {
            var newNode = document.createElement("div");
            newNode.appendChild(document.createTextNode(pasteValArr[i]));
        }                  
        selection.anchorNode.appendChild(newNode);
    }

    e.preventDefault();

});