웹에디터 크기조절 질문
- 작성자 :
- 조*진
- 작성일 :
- 2013-11-04 19:28:28
- 조회수 :
- 986
- 구분 :
- 공통컴포넌트
- 진행상태 :
- 완료
Q
경량화 포털 템플릿의 egovnoticeregist.jsp
공지사항 소스에 웹에디터를 추가하여 사용하려합니다
웹에디터 기능은 모두 작동하나
공지사항 양식에 들어간 웹에디터가 적절히 알맞게 들어가지않고
실제 폼을 벗어나며 깨지는(?) 현상이 발생합니다
이에 대한 이유를 잘모르겠는데 도움좀 부탁드릴게요
첨부된 이미지파일의 별표친 부분이 실제 폼을 벗어난 부분입니다
//웹에디터설정
_editor_area = "nttCn";
_editor_url = "<c:url value='/html/egovframework/com/cmm/utl/htmlarea3.0/'/>";
<tr><td class="td_width"><LABEL for="nttCn"><spring:message code="cop.nttCn" /></LABEL>
<img src="<c:url value='/'/>images/required.gif" alt="필수항목" title="필수항목" width="15" height="15"/></td> <td class="td_content" colspan="5"> <textarea id="nttCn" name="nttCn" class="textarea" cols="111" rows="22"></textarea>
<form:errors path="nttCn" /> </td></tr>
공지사항 소스에 웹에디터를 추가하여 사용하려합니다
웹에디터 기능은 모두 작동하나
공지사항 양식에 들어간 웹에디터가 적절히 알맞게 들어가지않고
실제 폼을 벗어나며 깨지는(?) 현상이 발생합니다
이에 대한 이유를 잘모르겠는데 도움좀 부탁드릴게요
첨부된 이미지파일의 별표친 부분이 실제 폼을 벗어난 부분입니다
//웹에디터설정
_editor_area = "nttCn";
_editor_url = "<c:url value='/html/egovframework/com/cmm/utl/htmlarea3.0/'/>";
<tr><td class="td_width"><LABEL for="nttCn"><spring:message code="cop.nttCn" /></LABEL>
<img src="<c:url value='/'/>images/required.gif" alt="필수항목" title="필수항목" width="15" height="15"/></td> <td class="td_content" colspan="5"> <textarea id="nttCn" name="nttCn" class="textarea" cols="111" rows="22"></textarea>
<form:errors path="nttCn" /> </td></tr>
A
안녕하세요. 표준프레임워크 센터입니다.
웹에디터 툴바 영역 너비를 조절하는 방법을 질의하셨는데, htmlarea.css 파일에서 아래의 속성을 지정해 보시기 바랍니다.
.htmlarea .toolbar {
width: 600px;
}
단, 위에서 지정한 너비는 툴바 전체 아이콘의 너비만큼만 줄일 수 있기 때문에 툴바 너비를 좀 더 줄이시려면 추가적인 수정이 필요합니다.
아래의 부분에서 padding, margin, width 속성을 수정하셔서 툴바 버튼 간격을 지금보다 더 작게 설정하셔서 툴바 전체의 너비를 최대한 줄이시는 방법을 이용하셔야 합니다.
.htmlarea .toolbar .button {
padding: 0px;
margin: 0px;
}
.htmlarea .toolbar .space {
width: 1px;
}
위와 같이 수정하셔도 원하시는 너비보다 툴바가 커질 경우 htmlarea.js 파일에서 다음 부분을 찾아서 툴바 아이콘을 3줄 또는 4줄로 변경하셔서 툴바 전체의 너비를 줄이실 수 있습니다.
(default는 2줄)
this.toolbar = [
[ "fontname", "space",
"fontsize", "space",
"formatblock", "space",
"bold", "italic", "underline", "strikethrough", "separator",
"subscript", "superscript", "separator",
"copy", "cut", "paste", "space", "undo", "redo", "space", "removeformat", "killword" ],
[ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
"lefttoright", "righttoleft", "separator",
"orderedlist", "unorderedlist", "outdent", "indent", "separator",
"forecolor", "hilitecolor", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator",
"popupeditor", "separator", "showhelp", "about" ]
];
감사합니다.
웹에디터 툴바 영역 너비를 조절하는 방법을 질의하셨는데, htmlarea.css 파일에서 아래의 속성을 지정해 보시기 바랍니다.
.htmlarea .toolbar {
width: 600px;
}
단, 위에서 지정한 너비는 툴바 전체 아이콘의 너비만큼만 줄일 수 있기 때문에 툴바 너비를 좀 더 줄이시려면 추가적인 수정이 필요합니다.
아래의 부분에서 padding, margin, width 속성을 수정하셔서 툴바 버튼 간격을 지금보다 더 작게 설정하셔서 툴바 전체의 너비를 최대한 줄이시는 방법을 이용하셔야 합니다.
.htmlarea .toolbar .button {
padding: 0px;
margin: 0px;
}
.htmlarea .toolbar .space {
width: 1px;
}
위와 같이 수정하셔도 원하시는 너비보다 툴바가 커질 경우 htmlarea.js 파일에서 다음 부분을 찾아서 툴바 아이콘을 3줄 또는 4줄로 변경하셔서 툴바 전체의 너비를 줄이실 수 있습니다.
(default는 2줄)
this.toolbar = [
[ "fontname", "space",
"fontsize", "space",
"formatblock", "space",
"bold", "italic", "underline", "strikethrough", "separator",
"subscript", "superscript", "separator",
"copy", "cut", "paste", "space", "undo", "redo", "space", "removeformat", "killword" ],
[ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
"lefttoright", "righttoleft", "separator",
"orderedlist", "unorderedlist", "outdent", "indent", "separator",
"forecolor", "hilitecolor", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator",
"popupeditor", "separator", "showhelp", "about" ]
];
감사합니다.
