지난번에 말씀드린 HR 태그 삽입 후 에디터 모드 전환시 버그... 이것 해결할 방법 없을까요? 블록

제가 오픈소스 게시판 수정증보판을 만들면서 WYSIWYG(위지윅) 에디터에서 처음에 아이콘을 삽입하고 <HR> 삽입 버튼으로 한 줄을 넣고 아무 문자나 다음 줄에 한글을 입력하고 텍스트 모드로 서로 전환하면 이상하게 위지윅 에디터 모드로 전환될 때 HR 라인과 한글 사이에 한줄이 계속 전환할 때마다 추가가 된다는 사실을 지난 번 포스트에서 말씀드렸는데요 이 문제 해결하려고 <br> 태그와 <br /> 태그를 모두 검색해 자바스크립트로 빈 문자열로 치환해 주는 명령어를 써보아도 도무지 추가된 줄이 없어지질 않습니다. 이게 크롬과 파이어팍스에선 증상이 없는데 IE에서만 꼭 그렇습니다. 이 문제점을 꼭 해결해 보고 싶은데 혹시 힌트를 알고 계신 분 안계신가요?

참고로 소스를 보여드리면...

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// JavaScript Code
 
var iePattern = /<br[^>]*?><(P|DIV|\/PRE|HR|LI|OL|O:P|UL|TABLE|TBODY|TR|TD|TH|CENTER|H1|H2|H3|H4)([^>]*?)>/gi;
var iePattern2 = /<(HR)([^>]*?)><br[^>]*?>/gim;
 
..
..
..
function brAddFix(str,use_html) {
    if(use_html < 2) {
        if(typeof window.getSelection != "undefined"//FF
        {
            str = str.replace(/\n/gi,"<br />");
            str = str.replace(ffPattern,"<$1$2>");
        }
        else if(typeof document.selection != "Control"//IE
        {
            str = str.replace(/\n/gi,"<br />");
            str = str.replace(iePattern,"<$1$2>");
            str = str.replace(iePattern2,"<$1$2>");
        }
    }
    return str;
}
 
function brRemove(str,use_html) {
    if(use_html < 2) {
        str = str.replace(/<br \/>|<br>/gi,"\n");
    }
    return str;
}
 
function memo2memoi(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 = "", temp, pt = 0;
    if(str.match(pattern) == null) {
        memo = brAddFix(str,e_use_html);
    } else {
        while((matchArray = pattern.exec(str)) != null){
            temp = str.substring(pt,matchArray.index);
            if(pattern2.test(matchArray[0]) == true) {
                temp = htmlspecialchars_encode(temp);
                temp = brAddFix(temp,e_use_html);
            } else {
                temp = brAddFix(temp,e_use_html);
            }
            memo += temp + matchArray[0];
            pt = matchArray.index + matchArray[0].length;
        }
        temp = str.substring(pt)
        memo += brAddFix(temp,e_use_html);
    }
    if(e_use_html < 2) {
        memo = memo.replace(/  /g,'&nbsp;&nbsp;');
        memo = memo.replace(/\t/g,'&nbsp;&nbsp;&nbsp;&nbsp;');
    }
 
    return memo;
}
 
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 = "", 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 = htmlspecialchars_decode(temp);
            } else {
                temp = brRemove(temp,e_use_html);
            }
            memo += temp + matchArray[0];
            pt = matchArray.index + matchArray[0].length;
        }
        temp = str.substring(pt)
        memo += brRemove(temp,e_use_html);
    }
 
    return memo;
}
 


이와 같이 4행, 20행에서 m 플래그를 사용해도 안됩니다. 지난번에 핵사에디터로 HR 태그 끝과 다음줄 <br> 태그 사이에 개행문자가 들어가 있다는 사실은 알아냈는데 예전 덧글에서 해결된 것처럼 보였던 것은 html적용을 2(줄바꿈을 br 태그로 바꾸지 않음)로 설정했을 때 이야기이고 0이나 1(줄바꿈을 br태그로 변환)로 설정하면 여전히 빈줄 삽입 증상이 있습니다. 여전히 새 패턴(iePattern2)으로 줄바꿈을 치환할 수 없습니다. html적용을 2로 설정했을 때는 현재 소스에서도 빈줄 삽입이 되지 않습니다. 이 버그 해결할 방법이 없나요? 오픈소스 게시판 수정증보판에서 IE 상 발생하는 이 버그만 수정하면 에디터 모드 전환할 때 일부 행 마지막에 공백 추가되는 문제만 빼고 다 해결되는 건데 정말 해결하고 싶네요. 고수님들의 조언 부탁드립니다. 제가 배포하는 소스의 bbs/skin/f2plus_gallery_3_0/swe/edit.js 파일을 참고하셔도 됩니다.

계층형 덧글을 다 완성하고 나니 이 버그가 자꾸 신경이 쓰이네요. 도움을 얻고 싶습니다.

덧글

  • 희망의빛™ 2014/09/10 15:02 # 답글

    참고로 증상을 확인해 보고 싶으신 분은 http://www.blrun.net/bbs/zboard.php?id=add1 이곳 게시판에서 덧글이나 익명 글쓰기의 위지윅 에디터에서 말씀드린 절차로 <HR> 태그 삽입 후 에디트 모드 전환으로 테스트해 보시면 압니다.
  • 희망의빛™ 2014/09/10 18:30 # 답글

    구글링 해서 겨우 찾았네요. ㅎㅎ

    var iePattern2 = /<(HR)([^>]*?)>\s*?<br[^>]*?>/gi;

    와 같이 \s 로 개행문자를 포함한 공백 와일드카드를 사용하면 됩니다. 휴 고질적인 버그 하나 잡았네요. ^^ 이번엔 진짭니다. 이젠 제대로 동작합니다. 줄 끝에 공백 하나가 붙는 문제만 남았네요. ㅋㅋ
  • 희망의빛™ 2014/09/10 18:22 # 답글

    이젠 IE에서 일부 태그 입력하고 에디터 모드 변경할 때 줄 끝에 공백 하나가 붙는 게 문제네요. 이거 "공백+줄바꿈문자" 찾아서 "줄바꿈문자" 로 치환해 주려고 하는데 잘 안되네요. 이것도 쉽지 않네요. 헐~

    var iePattern3 = / ([\r|\n])/g;
    str = str.replace(iePattern3,"$1");

    이렇게 했는데 치환이 안됩니다. 이것도 죽갔네. ㅡ_ㅡ;
    이것만 고치면 되는데 구글링에서도 나오지만 줄바꿈문자 치환하는 게 쉽지 않다고 하던데 거기에 나온대로 하면 치환이 안됩니다. 미치겠네요.
  • 희망의빛™ 2014/09/11 09:00 #

    http://bit.ly/WWpUah

    여기에 해결점이 나오네요. ㅎㅎ. 이것도 결국 해결했네요.

    var iePattern3 = / (?:\r\n|\r|\n)/g;
    str = str.replace(iePattern3,"");

    이렇게 해주고 brRemove() 함수 쪽에도

    str = str.replace(iePattern3,"\n");

    를 적어주면 완벽하게 위지윅 에디터가 동작합니다. 와 중요한 버그는 다 잡았네요. ^^;
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색