드디어 WYSIWYG 에디터에서 잡태그가 생성되지 않게 고쳤습니다. ^^; 블록

제 오픈소스 게시판 수정증보판의 text 모드에서 소스코드 삽입 후 html로 전환하고 나서 백스페이스나 딜리트키, 엔터키 등으로 소스코드를 수정하더라도 p 태그나 div 태그, span 태그 등이 생성되지 않도록 고쳤습니다. 제 사이트 [광고게시판] 에서 테스트하기 위해서 소스코드 삽입 후 함 이용해 보시면 익스플로어, 크롬, 스윙브라우저, 파이어팍스, 오페라, 사파리, IE11 등에서 WYSIWYG html 모드에서도 소스코드 수정이 제대로 된다는 것을 확인하실 수 있을 겁니다. ^^; 즉 소스코드 수정하면서 text, html 모드간 전환하더라도 Syntaxhighlighter 에 잡태그가 삽입되지 않습니다.

제가 이거 고치느라고 자바스크립트 정규식을 정교하게 적용했는데 이게 방법이 있긴 있더라구요. ㅎㅎ
제가 해당되는 bbs/skin/f2plus_gallery_3.0/swe 폴더 edit.js 파일에서 관련된 소스를 공개합니다. 제껀 소스코드 수정 부분만 적용되도록 했는데 만약 이글루스 등에서 전체 html 소스로 적용하고 싶다면 함수 if 문의 use_html 부분을 없애고 pRemove() 함수와 eRemove() 함수를 적당한 위치에서 호출해 주면 됩니다.

많은 도움이 되실겁니다. 고질적인 문제를 해결해서 너무나 기분이 좋네요. ^^;
제가 어제 오늘 수정한 부분만 올려드립니다. 오픈소스 게시판 수정증보판 1.2.2.1634 버전에 적용시켰습니다.

[자바스크립트 - 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
83
84
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 & FF
            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(str,use_html) {
    // Chrome & FF 에서 끝 </div> 태그 제거하는 루틴
    var len1, len2;
    if(use_html < && re2.exec(uAgent) == null) {
        if(str.match(/<div[^>]*?>/gi) == null)
            len1 = 0;
        else
            len1 = str.match(/<div[^>]*?>/gi).length;
 
        if(str.match(/<\/div>/gi) == null)
            len2 = 0;
        else
            len2 = str.match(/<\/div>/gi).length;
 
        while(len1 < len2 && !str.match(/<div[^>]*?>.*?<\/div>$/gi)) {
            str = str.replace(/<\/div>$/gi,"");
 
            if(str.match(/<div[^>]*?>/gi) == null)
                len1 = 0;
            else
                len1 = str.match(/<div[^>]*?>/gi).length;
 
            if(str.match(/<\/div>/gi) == null)
                len2 = 0;
            else
                len2 = str.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 = "", 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);
            }
            memo += temp + matchArray[0];
            pt = matchArray.index + matchArray[0].length;
        }
        temp = str.substring(pt);
        temp = eRemove(temp,e_use_html);
        memo += brRemove(temp,e_use_html);
    }
 
    return memo;
}
cs

덧글

  • 궁금한게.. 2015/05/10 15:30 # 삭제 답글

    궁금한게 있는데요.

    윤찬님 제외하고

    이 게시판 쓰는 사람이 전세계에 한명이라도 있나요??

  • 절망의빛 2015/05/10 17:20 # 삭제

    이거 그냥 자위용인 것 같아요
  • 희망의빛™ 2015/05/10 19:50 # 답글

    방금 본문 소스 34행 부분을 수정했는데요 이게 소스코드와 일반 html 코드를 혼합해 사용하다 보면 소스코드가 기술되기 이전 부분과 이후 부분에 걸쳐 div 태그가 적용이 될 때가 많기 때문에 단순히 끝태그를 소스 코드 기술 이후 부분의 <div> 태그와 </div> 태그 갯수를 세어서 </div> 태그를 삭제해 주는 방법 가지고는 완벽하게 </div> 태그를 닫을 수 없습니다. 그래서 소스 코드 기술 이후 끝 부분에 div 태그가 열리고 닫혔는지를 검사해서 그렇지 않을 때만 갯수를 세어 </div> 태그를 삭제해 주고 있습니다. 근데 이것도 끝 부분에 꼭 div 태그 짝이 온다는 보장이 없어서 </div> 태그로 마감돼야 할 태그를 삭제시키는 버그가 있습니다.

    이건 어떻게 할 방법이 없어서 난감하더라구요. 그래서 본문의 "완벽하게" 수정된다는 표현을 "제대로" 수정된다는 표현으로 바꾸었습니다. 이게 완벽하지가 않네요. 쩝~~
    좋은 방법 없을까요? 완벽하게 태그를 닫으려면 코드가 엄청 지저분해질 것 같아서 이 정도 선에서 멈추었습니다. ㅡ_ㅡ;
  • 희망의빛™ 2015/05/11 18:21 #

    이 버그는 2015년 5월 11일자로 완벽하게 해소하였습니다. 오픈소스 섹션에 올라가 있는 다운로드 파일을 다운받으시면 됩니다. ^^;
댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


웹로그 검색