메뉴 건너뛰기

XE : Xpress Engine


XE에 대한 생각! XE에 대한 공감! - XE를 사용하는 다른 사람들과 의견을 나눌 수 있는 곳입니다. 많은 의견 공유로 더 좋은 XE를 만들어 주세요.


XE 사용팁

정확히는 표 생성 애드온의 수정 입니다.

표 생성 애드온을 사용하면 표를 쉽게 생성할 수 있습니다.
하지만 처음에 가로 4에 세로 5로 생성을 하였다면 이 열과 행의 숫자는 직접 HTML 태그를 수정하지 않는 한 바뀌지가 않더군요.

그래서 스크립트를 조금 건드려 봤습니다.

XE 1.2 기준으로 작업하였습니다.

1./xe/modules/editor/components/table_maker/lang/ko.lang.php

line 14 ~15 추가
    $lang->table_cols_add = "가로열 추가";
    $lang->table_rows_add = "세로열 추가";

2. /xe/modules/editor/components/table_maker/tpl/popup.html
테이블 생성 애드온버튼 클릭 시 표시되는 팝업 창
line 35 ~46  추가
<table cellpadding="0" class="rowTable" id="table_add_area">
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <col width="25%" />
                <tr>
                    <th scope="row"><div>{$lang->table_cols_add}</div></th>
                    <td><input type="text" class="inputTypeText" size="2" id="cols_add" value="2" /></td>
                    <th scope="row"><div>{$lang->table_rows_add}</div></td>
                    <td><input type="text" class="inputTypeText" size="2" id="rows_add" value="1" /></td>
                </tr>
            </table>

// 가로열 추가 / 세로열 추가 인풋 박스를 추가합니다.

3. /xe/modules/editor/components/table_maker/tpl/popup.js
 line 68 ~ 73 수정
        if(!table_obj)  xGetElementById("col_row_area").style.display = "block";
        else {
            xGetElementById("col_row_area").style.display = "none";   
==>
        if(!table_obj) {
            xGetElementById("col_row_area").style.display = "block";
            xGetElementById("table_add_area").style.display = "none";
        }
else {
            xGetElementById("col_row_area").style.display = "none";   
            xGetElementById("table_add_area").style.display = "block";

// 위에popup.html 파일에 추가한 부분을 보이고 가리는 설정입니다.

line 111 ~ 114
            xGetElementById("width").value = width;
            xGetElementById("border").value = border;
            xGetElementById("inner_border").value = inner_border;
            xGetElementById("cellspacing").value = cellspacing;
            xGetElementById("cellpadding").value = cellpadding
            tr_len = table_obj.childNodes[0].childNodes.length;
            td_len = table_obj.childNodes[0].childNodes[0].childNodes.length;
            xGetElementById("cols_add").value = td_len;
            xGetElementById("rows_add").value = tr_len;
// tr_len, td_len 은 해당 테이블의  tr 갯수와  td 갯수를 구해서 각각 가로 추가 / 세로 추가 폼에 넣어줍니다.


line 178 ~ 256
// 테이블 수정일 경우
    } else if(xGetElementById("table_attribute_select").checked && table_obj) {
        var cols_count = parseInt(xGetElementById("cols_add").value,10);
        var rows_count = parseInt(xGetElementById("rows_add").value,10)+1;

        // 가로 갯수, 세로 갯수를 받아옵니다.

        var width = parseInt(xGetElementById("width").value,10);
        var width_unit = "%";
        if(xGetElementById("width_unit_pixel").checked) width_unit = "px";
        var border = parseInt(xGetElementById("border").value,10);
        var inner_border = parseInt(xGetElementById("inner_border").value,10);
        var cellspacing = parseInt(xGetElementById("cellspacing").value,10);
        var cellpadding = parseInt(xGetElementById("cellpadding").value,10);
        var border_color = xGetElementById("border_color_input").value;
        if(border_color.length!=6) border_color = "000000";

        var bg_color = xGetElementById("bg_color_input").value;
        if(bg_color.length!=6) bg_color = "FFFFFF";

        //table_obj.style.width = width+width_unit;
        //if(width_unit=="px") table_obj.setAttribute("width", width);
        //else table_obj.setAttribute("width", width+width_unit);
        //table_obj.setAttribute("border", inner_border);
        //table_obj.setAttribute("cellspacing", cellspacing);
        //table_obj.setAttribute("cellpadding", cellpadding);
        //table_obj.style.border = border+"px solid #"+border_color;
        //table_obj.style.backgroundColor = "#"+bg_color;

        // 테이블 스타일 변경을 주석 처리 하고 테이블 신규 생성으로 바꿨습니다.

        tableText = table_obj.innerHTML;    // 기존 테이블의 내용을 읽어옵니다.
        text += "<table width=\""+width+width_unit+"\" border=\""+inner_border+"\" cellspacing=\""+cellspacing+"\" cellpadding=\""+cellpadding+"\" ";
        if(border>0) text += " style=\"border:"+border+"px solid #"+border_color+";background-color:#"+bg_color+"\" ";
        text +=">";

        var tr = tableText.split('</TR>',rows_count);   // tr단위로 나누기
        var tr_len = tr.length;
        for(i=0;i<parseInt(rows_count);i++) {
            if(i==tr_len-1){ }   // </tbody></table> 소스 부분은 그냥 패스...
            else{
                if(tr[i]){    // 기존의 tr 내용이 있다면...
                    var td = tr[i].split('</TD>',cols_count);   //td 단위로 나누기.
                    var tdtext = '';
                    for(j=0;j<parseInt(cols_count);j++){    
                        if(td[j]){       // 기존의 td 내용이 있다면
                            tdtext += td[j]+'</td>';
                        }else{   // td 가 없다면 새로 생성
                            tdtext += '<td>&nbsp;</td>';
                        }
                    }
                }else{   // tr이 없다면 새로 생성
                    var tdtext = "<tr>";
                    for(j=0;j<parseInt(cols_count);j++){
                        tdtext += '<td>&nbsp;</td>';
                    }
                }
                text += tdtext +'</tr>';
            }
        }
        text += '</tbody></table>';
        table_obj.outerHTML = '';    //수정 될 내용의 외부 태그 삭제..
        var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl);
        opener.editorReplaceHTML(iframe_obj, text);   // 내용 추가  ;

       
    // cell의 수정일 경우
    } if(xGetElementById("cell_attribute_select").checked && selected_node) {
        var cell_width = parseInt(xGetElementById("cell_width").value,10);
        var cell_width_unit = "%";
        if(xGetElementById("cell_width_unit_pixel").checked) cell_width_unit = "px";
        var cell_height = parseInt(xGetElementById("cell_height").value,10);

        var bg_color = xGetElementById("bg_color_input").value;
        if(bg_color.length!=6) bg_color = "FFFFFF";

        selected_node.style.width = cell_width+cell_width_unit;
        selected_node.style.height = cell_height+"px";
        selected_node.style.backgroundColor = "#"+bg_color;
    }

    window.close();
}








=======================================================================================================
최초 5 X 2 테이블을 생성 후 아무 셀이나 더블클릭 후 표 수정 페이지를 열었습니다.

보시는것처럼 가로열 추가 / 세로열 추가 항목이 있으며 7/5으로 입력 해보겠습니다.

table1.JPG

위와 같이 입력했더니 본문의 내용은 그대로 유지 되면서 7/5의 테이블로 변했습니다.
요기서 아래 빨간 표시 underfined 를 주의 해주시면서 다시 표를 3/3 으로 수정 합니다.
table2.JPG

원본내용을 유지한채로 3/3으로 바뀌었지만
underfined 가 하나더 추가 되어있네요.
표 수정 한번에 underfined 가 한번씩 나옵니다.
아직 수정하지 못한 버그인데요.
그냥 텍스트라서 지우면 되긴 하는데 찜찜하네요.

table3.JPG



최초 원본 셀수를 기준으로 셀 추가만을 생각했던거라 "가로열 추가" / "세로열 추가" 라는 명칭으로 사용했지만
셀의 수가 줄어드는 경우가 생길 수도 있어서 그냥 숫자만큼 셀을 새로 생성하는 것으로 바꿨습니다.

IE6, IE8 기준으로 작업하였으며 파이어 폭스의 경우
table_obj.outerHTML = '';    //수정 될 내용의 외부 태그 삭제..
        var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl);
        opener.editorReplaceHTML(iframe_obj, text);   // 내용 추가  ;

소스를
       table_obj.outerHTML = '';    //수정 될 내용의 외부 태그 삭제..
       table_obj.innerHTML = text;
로 수정하시면 적용됩니다.(대신 IE에서 오류가 ;;)

현재는 underfined 표시 오류 수정 중이지만.. 그래도 잊기 전에 팁으로 공유해 봅니다.
제로님 가능하시면 위 기능 오류 없이 추가해서 배포해 주시면 감사하겠습니다 (__)
번호 제목 글쓴이 날짜 조회 수
공지 질문은 묻고 답하기로~ TSCMD 2012.02.03 10552
55 2003 + RWAPM + faceOff + IE7 = rewrite mod 에러 [레벨:1]neotec 2009.03.03 3831
54 이슈 트래커 소유자 변경 시 그룹별 선택 기능 file [레벨:6]개돌 2009.03.05 4160
53 사진이 떳다 사라지는 문제 해결법 [2] [레벨:2]현진 2009.03.07 3363
52 svn 업으로 xe 최신본 유지하기 [2] file [레벨:8]e~세상쉼터 2009.03.08 5063
51 Faceoff 버젼에서 확장변수 마음대로 배치하기 ^^ [레벨:5]파파민 2009.03.13 1715
50 게시물 가운데 정렬 문제 임시해결법 [레벨:1]한신일 2009.03.15 3724
49 1.2.0 설치 후 페이지모듈에 위젯사용시 문제 [2] [레벨:0]Digitalife 2009.03.17 3632
48 브라우저 크기에 따라 본문 가로 크기 자동 조절 [1] [레벨:6]개돌 2009.03.18 5042
47 미국 야후 호스팅 쓰시는 분들 보세요(이미지 퍼미션) [레벨:3]텍사수 2009.03.21 4142
46 제로보드 XE나 개인 블로그에 GPS 로그(궤적)를 나타낸 구글맵 삽입하기 [레벨:4]상오기 2009.03.21 5026
45 1.2.0 업뎃후 위젯 문제 [1] [레벨:2]♡不明♡ 2009.03.22 1486
44 각종 좌절 금지 그림들 [2] file [레벨:3]winter548 2009.03.23 3858
43 xe 설치시 다음과 같은 오류가 생깁니다. [레벨:1]Seung Hur 2009.04.02 3792
» 위지윅 테이블 컴포넌트 (테이블 수정 기능) [3] file [레벨:6]개돌 2009.04.02 4023
41 게시판형태를 달력게시판으로 못하나요? [1] file [레벨:0]오늘하루는느느느 2009.04.09 4245
40 비밀글 댓글이 최신댓글 위젯에 노출되는 문제 수정방법 [레벨:2]얼터1 2009.04.10 4030
39 [1.2.0] content 위젯 사용시 rss리더 새창에 뛰우기 [레벨:2]늘같이 2009.04.10 4145
38 해당 Cafe 회원에 가입후 Cafe 회원목록에 나타나지 않음...... [레벨:1]뉴욕에서 2009.04.16 3843
37 XpressEngine 1.2.1 r6096 트리거 목록 [2] [1] [레벨:4]mooo 2009.04.13 4164
36 Zbxe 서버 이전하기 [4] [레벨:10]팔공산 2007.08.22 8889