카테고리 없음2011. 1. 6. 00:19

스마트에디터 너비 제어

아무리 뒤져도 없길래 이런 방법도 있다고.. 올립니다.

---

스마트에디터 http://dev.naver.com/projects/smarteditor/ 를 사용하고 있는데, 초기에 주어진 높이와 너비대로 에디터를 생성하는 것은 문제가 없지만, 사용자가 원할때 높이나 너비를 조정해야 할일이 있었다.

에디터의 높이를 조절하는 코드는 잘 동작하는데, 너비는 제어가 되질 않았다. 높이 제어는 이 코드로 잘 동작했다.
oEditors.getById["content"].exec("MSG_EDITING_AREA_RESIZE_STARTED", []);
oEditors.getById["content"].exec("RESIZE_EDITING_AREA_BY", [newidth, newheight]);
oEditors.getById["content"].exec("MSG_EDITING_AREA_RESIZE_ENDED", []);
view raw height.js hosted with ❤ by GitHub

?
1
<span class="Apple-style-span" style="font-family: 굴림; white-space: normal; ">저 newheight 부분에 값을 적어주면 끝, 하지만, newwidth 에 값을 적어주어도, 너비는 그대로였다.</span>

소스를 뒤져서 동작하게했다. 이렇게 하는게 맞는지 어쩐지 잘 모르겠다. 어쨌든 두줄만 고쳤고, 동작한다.

먼저, HuskyEZCreator.js 에서
?
1
2
3
4
5
6
7
8
var elIFrame;<br>
try{
     elIFrame = document.createElement("<IFRAME frameborder=0 scrolling=no>");
}catch(e){
     elIFrame = document.createElement("IFRAME");
     elIFrame.setAttribute("frameborder", "0");
     elIFrame.setAttribute("scrolling", "no");
}

을 찾아서 아래처럼 고칩니다.
?
1
2
3
4
5
6
7
8
9
var elIFrame;
try{
    elIFrame = document.createElement("<IFRAME id='huskey_editor_jinto_set_id' frameborder=0 scrolling=no>");
}catch(e){
    elIFrame = document.createElement("IFRAME");
    elIFrame.setAttribute("frameborder", "0");
    elIFrame.setAttribute("id", "huskey_editor_jinto_set_id");
    elIFrame.setAttribute("scrolling", "no");
}
(물론 huskey_editor_jinto_set_id 는 원하시는 문자열로.. 바꾸셔도 됩니다요.. ^^)


에디터의 너비를 제어하는 코드 (textarea의  id 가 "textarea_id"라고 가정하고, 에디터생성할때 아이디는 my_content라고 주었다고 가정. 그리고, jquery를 사용)를 이렇게 만들어주시면 됩니다.

?
1
2
3
4
5
6
7
8
ㅌvar width=670; // 원하는 너비
$("#textarea_id").css('width',width);
$("#textarea_id").outerWidth(width+20); // 이건 없어도 상관없슴. 테두리따위때문에 필요한 분이 있을 수도.
$("#huskey_editor_jinto_set_id").css('width',width);
$("#huskey_editor_jinto_set_id").outerWidth(width+20);   // 이건 없어도 상관없슴.
oEditors.getById["my_content"].exec("MSG_EDITING_AREA_RESIZE_STARTED", []); // 이 코드는 없어도 될지도.
oEditors.getById["my_content"].exec("RESIZE_EDITING_AREA_BY", [0, 0]); // 이 코드는 없어도 될지도.
oEditors.getById["my_content"].exec("MSG_EDITING_AREA_RESIZE_ENDED", []); // 이 코드는 없어도 될지도.


이상입니다~.

검색하는 분들을 위해 - 스마트에디터,넓이,너비,폭,width,제어,조작,동적
저작자표시
Posted by jintopark

 

 
«이전  1 2 3 4 5 ··· 49  다음»

티스토리툴바