HTML로 위지윅 에디터 구현하기

[ㅅㅅㅅ(125.128)]

밑에 누가 찾는 사람이 있는 거 같아서 간단하게 구현해 봄.

http://jsfiddle.net/wor375j8/

다만 크로스 브라우저 호환성을 철저히 검토해 봐야 할 듯...

순수 DOM으로만 코딩해서...

호환성도 보장하면서 가장 간단하게 에디터를 넣는 방법은 네이버 스마트에디터나 다음 에디터 같은

이미 개발된 COTS 위지윅 에디터를 그냥 가져다가 쓰는 거임.

[ㅅㅅㅅ(125.128)]

내가 만든 건 보여주려고 만든 거지 가져다가 쓰라고 만든 건 아니다. 이런 식으로 구현할 수 있다는 걸 보여주는 PoC(Proof of Concepts; 개념 증명) 수준의 예제다. 실제 서비스에 적용하려면 인터페이스를 좀 더 다듬고 크로스 브라우저 호환성도 확인해야 될 거야.

[ㅅㅅㅅ(125.128)]

구현의 핵심은 IFRAME의 내부 document는 frame_object.contentDocument 식으로 접근할 수 있고, 어떤 문서의 designMode에 "on" 속성을 주면 그 문서는 편집 가능 상태가 됨. (간단히 네이버 들어가서 주소창에 ja\0vas\0cr\0ipt:document.designMode = "on"; 을 쳐 볼 것) 그 후 document.execCommand() 함수로 현재 선택된 영역을 이리저리 요리할 수 있음.

[ㅅㅅㅅ(125.128)]

아 네이버 들어가서 주소창에 이렇게 쳐야지 되겠다. java\0s\0cript:void(document.designMode = "on");

[ㅅㅅㅅ(125.128)]

너가 직접 주소창에 쳐 보면 알겠지만 주소창에 javas\0cript:로 스크립트 코드를 쓸 경우 그게 값을 리턴하지 않는 식이라면(예: javas\0cript:alert('hello');) 페이지에 아무런 영향도 주지 않지만 값을 리턴하는 식이면 문서 전체가 내용이 그 값으로 바뀜. 간단하게 javas\0cript:1; 만 해 봐도 알 거임. 그래서 void() 함수로 값을 없애준 거임. void 함수는 리턴값이 없는 그냥 더미 함수니깐.

[ㅅㅅㅅ(125.128)]

아 문자열인 경우에만 바뀌네. javas\0cript:"on"; 처럼. 암튼 document.designMode = "on"라는 대입문은 그 자체로 "on"이라는 값을 가지기 때문에 문서 내용이 다 날라가고 on이라는 글자만 뜨는 대참사(?)가 발생함.

[vv(59.14)]

http://autogram.tk/이
중고차 어플리케이션 어떤가요?