designMode 사용예제 네이버에서 하는 방식 엔터쳤을경우 위아래 간격조정
페이지 정보
작성자 서방님 댓글 0건 조회 170회 작성일 07-08-08 10:52본문
얼마전 부터 네이버 카페와 브롤그에서 사용되는 에디터에 관한 질문이 올라왔었습니다.
음 모두 같은 질문인걸로 생각되는데요. 질문은 '사진올리기'를 이용해서 사진을 올리면 글을 쓰고 있는 곳에 올린 사진이 표시가 되는 기능을 묻는 질문이었습니다.
이 부분은 생각보다 간단한 기능이고 한가지 속성만 알면 모두 쉽게 풀리는 부분이랍니다.
그럼 그 속성은? designMode 라는 속성입니다.
위 속성을 간단한 예제를 통해 알아보겠습니다.
<script language="Javascript">
<!--
function init(obj) {
obj.document.designMode="On";
}
//-->
</script>
<iframe id="tmp_content" src="about:blank" scrolling="auto" frameborder=0 style="width:568px;height:370px;border:1 solid C4CAD1;"></iframe>
<script language="Javascript">
<!--
init(tmp_content);
//-->
</script>
위 소스를 실행시켜 보시면 일반 입력폼과 같이 입력이 되는 것을 알 수 있습니다.
하지만 네이버 에디터와 같이 드레그엔드랍도 적용이 되는 것을 알수 있죠.
단지 designMode = "On" 을 지정한 것만으로 iframe을 이용해 표시하는 페이지를 에디터로 변경할 수 있다는 것입니다.
이렇게 되면 드림위버나 나모와 같은 디자인툴과 비슷하게 사용할 수 있다는 장점이 생기게 됩니다. 인터넷상에 있는 이미지 주소를 이용해서 img 태그를 입력하면 이미지가 출력된다는 것이죠.
하지만 직접 사용자가 html을 입력할 수는 없습니다. 단 프로그램적으로 html을 입력할 수 있도록 제공할 수는 있죠.
네이버에서는 html은 입력할 수 없게 했지만 가장 필요한 기능을 따로 구현해 놨습니다.
(사진올리기, 파일올리기, 멀티미디어걸기 등등)
위 기능들 중에 질문이 많은 사진올리기를 간단히 설명해 보겠습니다.
우선 사진올리기를 클릭하면 새창이 뜹니다. 그 새창에서 업로드를 하게끔 해놨지요. 이것이 가장 중요한 포인트라 할 수 있습니다.
새창에서 이미지를 업로드 시키면 그 이미지는 업로드 처리가 끝남과 동시에 인터넷 주소를 이용해서 브라우저로 확인이 가능하다는 것입니다. 그럼 업로드 처리하는 부분에서 업로드가 정상적으로 이루워 졌으면 이미지 주소를 이용해서 간단한 img 태그를 만들고 이걸 opener 의 에디터에 입력시키는 방식입니다. 그럼 이미지가 에디터에 출력됩니다.
위에 있던 예제를 좀더 네이버 방식으로 변경을해 보면 아래와 같이 됩니다.
아래 소스의 핵심은 그냥 designMode="On" 만 해주면 글을 입력하다가 Enter 를 입력하게 되면 에디터는 새로운 중을 <p> 태그를 이용해서 시작하게 됩니다. 그럼 줄간격이 엄청나게 벌어지게 되죠. 이 문제를 해결하기 위해선 <p> 태그의 줄간격을 좁혀주는 방법을 쓰면 간단하겠지요...^^
<script language="Javascript">
<!--
var sObj;
function init(obj) {
sObj = obj;
obj.document.designMode="On";
obj.document.open("text/html");
obj.document.write("<html><head><style>body {font-size:9pt;font-family:돋움;}; P {margin-top:2px;margin-bottom:2px;}; table {border:1 solid C6C3C6};</style></head><body></body></html>");
obj.document.close();
}
//-->
</script>
<iframe id="tmp_content" src="about:blank" scrolling="auto" frameborder=0 style="width:568px;height:370px;border:1 solid C4CAD1;"></iframe>
<script language="Javascript">
<!--
init(tmp_content);
//-->
</script>
위 소스에서 빨간색 부분이 에디터에 기본 태그와 스타일을 지정하는 부분입니다.
(네이버에서 쓰는 방법입니다.)
그리고 참고로 볼드 처리된 부분은 앞으로 에디터에 접근한 일이 많이 때문에 sObj 이란 변수에 저장을 해놓고 앞으로는 sObj 을 통해서 tmp_content 에 접근을 하기 위함입니다.
댓글목록
등록된 댓글이 없습니다.
