WYSIWYG 에디터에서 </div> 끝태그가 완전하게 닫히지 않는 문제 해결했습니다. 블록

제가 지난번에 올려드린 소스 공개하면서 WYSIWYG 에디터 사용시 text 모드에서 소스코드 삽입 후 html 모드로 전환한 다음 소스코드 앞뒤에 글을 입력하고 딜리트키나 백스페이스키, 엔터키 등으로 텍스트나 소스코드 편집을 시도하면 소스코드 수정은 제대로 되지만 </div> 끝태그가 짝이 맞게 닫히지 않는다고 말씀드렸는데요 오늘 회사 다녀와서 이 버그를 완벽하게 수정했습니다. 아래 소스를 보시면 알겠지만 70행과 76행이 추가됐고(이 부분이 핵심입니다) eRemove() 함수를 호출하는데 인자 memo2 가 추가됐습니다. 원리는 에디터 내용인 memo에서 소스코드를 제외한 파트를 모두 합친 memo2 를 eRemove() 함수의 인자로 전달해서 eRemove() 함수에서 <div> 태그와 </div> 태그 갯수를 세어 </div> 태그 갯수가 더 크면 열고 닫은 태그의 갯수가 같아질 때까지 인자로 전달받은 str(temp로 전달한 전체 memo 변수) 끝에 존재하는 </div> 태그를 삭제하는 것입니다.

이렇게 하면 WYSIWYG 에디터에 소스코드를 삽입하고 html 모드에서 마음대로 편집하고 text 모드로 전환하더라도 소스코드가 그대로 보존되고 또 글을 올리고 나서도 소스코드가 깨지지 않으면서 잡태그가 생성되지 않습니다. 엄청 기발한 아이디어 아닙니까? 제가 오늘 회사 가면서 이 버그를 어떻게 잡을까 고민하다가 이렇게 하면 되겠다 싶어 집에 온 다음 바로 수정해 봤는데 모든 브라우저에서 완벽하게 동작했습니다. 음하하하~~~ 기분 좋네요. ^^;

다른 분들도 참고 바랍니다.

[자바스크립트 - edit.js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
function pRemove(str,use_html) {
    if(use_html < 2) {
        if(re2.exec(uAgent) != null) { //IE8
            str = str.replace(/<\/p>|<\/div>/gi,"");
            str = str.replace(/<p>\n|<div>\n/gi,"\n");
            str = str.replace(/<p>|<div>/gi,"");
        } else { //Chrome & Opera
            str = str.replace(/<p>\n<\/p>|<div>\n<\/div>/gi,"\n");
            str = str.replace(/\n<\/p>|\n<\/div>/gi,"\n");
            str = str.replace(/<\/p>|<\/div>/gi,"\n");
            str = str.replace(/\n<p>|\n<div>/gi,"\n");
            str = str.replace(/<p>|<div>/gi,"\n");
            str = str.replace(/<span[^>]*?>|<\/span>/gi,"");
        }
        str = str.replace(/&nbsp;/gi," ");
    }
    return str;
}
 
function eRemove(temp,str,use_html) {
    // Chrome & Opera 에서 끝 </div> 태그 제거하는 루틴
    var len1, len2;
    if(use_html < && re2.exec(uAgent) == null) {
        if(temp.match(/<div[^>]*?>/gi) == null)
            len1 = 0;
        else
            len1 = temp.match(/<div[^>]*?>/gi).length;
        if(temp.match(/<\/div>/gi) == null)
            len2 = 0;
        else
            len2 = temp.match(/<\/div>/gi).length;
        while(len1 < len2) {
            str = str.replace(/<\/div>$/gi,"");
            if(temp.match(/<div[^>]*?>/gi) == null)
                len1 = 0;
            else
                len1 = temp.match(/<div[^>]*?>/gi).length;
            if(temp.match(/<\/div>/gi) == null)
                len2 = 0;
            else
                len2 = temp.match(/<\/div>/gi).length;
        }
    }
    return str;
}
 
function memoi2memo(str){
 
    if(sw_edit_use == "write")
        e_use_html = parseInt(document.getElementById("use_html").value);
    else
        e_use_html = parseInt(document.getElementById("use_html2").value);
 
    var memo = "", memo2 = "", temp, pt = 0;
    if(e_use_html < 2) {
        str = str.replace(/&nbsp;&nbsp;&nbsp;&nbsp;/gi,'\t');
        str = str.replace(/&nbsp;&nbsp;/gi,'  ');
    }
    if(str.match(pattern) == null) {
        memo = brRemove(str,e_use_html);
    } else {
        while((matchArray = pattern.exec(str)) != null){
            temp = str.substring(pt,matchArray.index);
            if(pattern2.test(matchArray[0]) == true) {
                temp = brRemove(temp,e_use_html);
                temp = pRemove(temp,e_use_html);
                temp = htmlspecialchars_decode(temp);
            } else {
                temp = brRemove(temp,e_use_html);
                memo2 += temp;
            }
            memo += temp + matchArray[0];
            pt = matchArray.index + matchArray[0].length;
        }
        temp = str.substring(pt);
        memo2 += temp;
        temp = eRemove(memo2,temp,e_use_html);
        memo += brRemove(temp,e_use_html);
    }
 
    return memo;
}
cs

덧글

  • 차범근 2015/05/11 21:52 # 삭제 답글

    회사...를... 다녀요?
  • ff 2015/05/11 23:50 # 삭제 답글

    이 양반 글이 인기글인거 보면 이글루스 it밸리 유저들이 얼마나 웃음을 원하는지 알 수 있는것인데..
    다음에 더 재밌는 글 기대하겠습니다
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색