개발 과정 리뷰 -23- Summernote에서 붙혀넣기 이벤트에 대해

엄청난 시간을 소요하고 있는 문제점이 있어 정리하려고 한다.

 

summernote에서 현재 붙혀넣기를 진행하면, 단순히 텍스트만 붙혀넣기 되는 것이 아니라 본래 복사한 텍스트의 디자인이 복사되어 아래와 같이 입력된다.

문서 디자인이 태그로 결정되는 현재 웹 특성상 당연히 이런 게 있어서는 안되고,

또 사용자 눈에 보이진 않지만 html로 보면 p 태그에 엄청나게 많은 CSS가 붙게 되어 짧은 텍스트가 어마어마하게 길어지는 비효율을 자랑했다.

 

따라서 텍스트만 붙혀넣기가 되도록 하기 위해

 

summernote에 onPaste 이벤트에서 텍스트를 추출해서 그 텍스트만 넣는 코드를 작성했다.

onPaste: function (e) {
    let bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('text');
    
    e.preventDefault();
    document.execCommand('insertText', false, newText);
}

 

처음에는 디자인 없이 텍스트만 잘 복사되어서 의도한대로 동작하는 줄 알았는데, 다른 문제가 생겼다.

 

단순이 붙혀넣기 이벤트로 textarea에 문자열을 삽입할 때는 '\n' 의 개행문자가 <p><br></p> 태그로 잘 치환되어서 들어가는데, execCommand 를 사용해서 넣었더니 개행문자를 <br> 태그로 치환하지 못 하는 버그가 생겼다.

 

따라서 다음과 같이 미리 \n 문자를 <br>문자로 치환해주고 삽입했더니

onPaste: async function (e) {
    let bufferText = await ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

    let newText = await bufferText.replace(/(\n|\r\n)/g, "<br>");
    e.preventDefault();
    document.execCommand('insertText', false, newText);
}

 

< > 문자의 html escape가 적용되어 <br> 이 문자열로 출력되는 결과가 발생했다.

 

이 해결방법이나 우회 방법을 찾기 위해 몇 시간 동안 summernote 코드를 뒤지고 붙혀넣기에 대한 기능적인 부분의 구글링을 진행했으나, 해결법을 찾지 못했다.

 

그러다가 execCommand에서 insertText로 했기 때문에 html escape가 발생했고, insertHtml을 사용하면 발생하지 않는다는 사실을 알았고 허무하게 해결되었다.

callbacks: {
    onPaste: async function (e) {
        let bufferText = await ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

        let newText = await bufferText.replace(/(\n|\r\n)/g, "<br>");

        //e.preventDefault();
        document.execCommand('insertHtml', false, newText);
    }
}

 

그리고 나와 같은 사람이 있는지 마지막으로 구글링해본 결과 스택 오버플로우에 정확히 내가 거친 일련의 해결 과정이 쓰인 답변이 있었다. ㅠㅠ

 

 

+ 추가적 문제

해결한 줄 알았는데 추가적인 문제가 발생했다.

insertHTML로 입력시 줄바꿈이 <br>로 이루어지자 원래 \n 이면 <p></p>로 분리되던 문장들이 하나로 합쳐졌다.

onPaste: async function (e) {
    let bufferText = await ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');

    let newText = await bufferText.replace(/(\n|\r\n)/g, "<p><br></p>");

    e.preventDefault();
    document.execCommand('insertHtml', false, newText);
}

 

일단 급하게 태그를 p로 감싸서 서로 분리시켜줬는데, 이렇게되면 붙혀넣기 한 문장은 한번 개행해서 바로 붙어있는 문장도 두번 개행을 한게 되버린다.

 

해결 방법을 생각중이다.