웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
위지윅 테이블 컴포넌트 (테이블 수정 기능)
2009.04.02 16:46
정확히는 표 생성 애드온의 수정 입니다.
표 생성 애드온을 사용하면 표를 쉽게 생성할 수 있습니다.
하지만 처음에 가로 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> </td>';
}
}
}else{ // tr이 없다면 새로 생성
var tdtext = "<tr>";
for(j=0;j<parseInt(cols_count);j++){
tdtext += '<td> </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으로 입력 해보겠습니다.
위와 같이 입력했더니 본문의 내용은 그대로 유지 되면서 7/5의 테이블로 변했습니다.
요기서 아래 빨간 표시 underfined 를 주의 해주시면서 다시 표를 3/3 으로 수정 합니다.
원본내용을 유지한채로 3/3으로 바뀌었지만
underfined 가 하나더 추가 되어있네요.
표 수정 한번에 underfined 가 한번씩 나옵니다.
아직 수정하지 못한 버그인데요.
그냥 텍스트라서 지우면 되긴 하는데 찜찜하네요.
![table3.JPG](https://xe1.xpressengine.com/files/attach/images/121/555/901/017/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 표시 오류 수정 중이지만.. 그래도 잊기 전에 팁으로 공유해 봅니다.
제로님 가능하시면 위 기능 오류 없이 추가해서 배포해 주시면 감사하겠습니다 (__)
표 생성 애드온을 사용하면 표를 쉽게 생성할 수 있습니다.
하지만 처음에 가로 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> </td>';
}
}
}else{ // tr이 없다면 새로 생성
var tdtext = "<tr>";
for(j=0;j<parseInt(cols_count);j++){
tdtext += '<td> </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으로 입력 해보겠습니다.
위와 같이 입력했더니 본문의 내용은 그대로 유지 되면서 7/5의 테이블로 변했습니다.
요기서 아래 빨간 표시 underfined 를 주의 해주시면서 다시 표를 3/3 으로 수정 합니다.
원본내용을 유지한채로 3/3으로 바뀌었지만
underfined 가 하나더 추가 되어있네요.
표 수정 한번에 underfined 가 한번씩 나옵니다.
아직 수정하지 못한 버그인데요.
그냥 텍스트라서 지우면 되긴 하는데 찜찜하네요.
최초 원본 셀수를 기준으로 셀 추가만을 생각했던거라 "가로열 추가" / "세로열 추가" 라는 명칭으로 사용했지만
셀의 수가 줄어드는 경우가 생길 수도 있어서 그냥 숫자만큼 셀을 새로 생성하는 것으로 바꿨습니다.
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 표시 오류 수정 중이지만.. 그래도 잊기 전에 팁으로 공유해 봅니다.
제로님 가능하시면 위 기능 오류 없이 추가해서 배포해 주시면 감사하겠습니다 (__)
댓글 3
제목 | 글쓴이 | 날짜 |
---|---|---|
최근 이미지 위젯 noimage 표시..
[6]
![]() | 개돌 | 2009.04.10 |
IIS + PHP + MySQL5 설치 시 버젼 주의 [1] | 개돌 | 2009.04.10 |
요청하신 모듈을 찾을 수 없습니다 문제해결 방법 [2] | 반도체맨 | 2009.04.09 |
게시판형태를 달력게시판으로 못하나요?
[1]
![]() | 오늘하루는느느느 | 2009.04.09 |
이메일이 2개씩 보내질때 처치방법 [7] | 얼터1 | 2009.04.08 |
호스팅업체에서 rewrite mod를 지원하는데 사용할 수 없는 경우 [1] [1] | 엔하늘 | 2009.04.05 |
게시판 스타일이 안바뀌는 경우에 해보실 사항 [4] | coolsushi | 2009.04.04 |
클릭마다 조회수 올리기 [1.4.0]
[12]
![]() | 지B | 2009.04.04 |
관리자 아이디로 작성한 비밀글을 특정인이 볼수있도록 해주는 팁
[13]
![]() | Dreami | 2009.04.03 |
Cafe 운영시 조그만한 팁... [2] | 부푸러 | 2009.04.03 |
위지윅 테이블 컴포넌트 (테이블 수정 기능)
[3]
![]() | 개돌 | 2009.04.02 |
팁이라기엔 좀 그렇구요.. 초보자를 위한 파일업로드FTP보다 훨씬좋은.. [2] | 레드카라스 | 2009.04.02 |
xe 설치시 다음과 같은 오류가 생깁니다. | Seung Hur | 2009.04.02 |
Firebug와 FirePHP를 통한 XpressEngine의 디버깅
[6]
![]() | mooo | 2009.04.01 |
특정그룹 멤버 표시 위젯에서 이름 순 정렬하기
[2]
![]() | 이재한744 | 2009.03.30 |
특정 도메인의 메일 주소로만 가입 인증 메일 보내기 [3] | 박정욱 | 2009.03.28 |
1.2 업데이트후, 모듈 업데이트를 클릭해도 계속 업데이트 버튼이 남는 경우 [4] | heesang | 2009.03.27 |
홈페이지 접속 속도에 미치는 에드온. [2] | jih449 | 2009.03.27 |
게시판을 활용한 페이지 생성 및 관리 아이디어...(참고)
[5]
![]() | 빨간발 | 2009.03.27 |
제로보드 권한 설정 문제요~~ [1] | 매너굿남 | 2009.03.27 |