TinyMCE - 무료 wysiwyg 에디트 컨트롤

2007. 5. 4. 18:18 컴퓨터/컴퓨터 이야기

jwFreeNote를 만들다 보니 dhtml처럼 프로그램에 넣을 수 있는 웹 컨트롤에 관심이 갑니다. 그런다가 알게 된 것이 TinyMCE입니다. 무료 WYSIWYG 스타일의 html 편집 컨트롤입니다.

  • 자바스크립트로만 만들어져 있어서 플랫폼에 독립적이면,
  • 다른 프로그램을 설치할 필요가 없어 배포가 편합니다.
  • 다양한 서식을 지정할 수 있는 버튼을 제공하며,
  • 사용자 입맛에 따라 맞출 수 있는 테마를 설정할 수 있고,
  • 플러그인을 사용할 수 있습니다.
  • LGPL로 모든 소스가 공개되어 있습니다.

일단 데모를 보시죠.

  TinyMCE example

사용자 삽입 이미지

jwFreeNote에 적용하려 노력

TinyMCE를 이용하여 jwFreeNote를 만들어 보려고 시간이 날 때 마다 방법을 찾아 보았습니다. 이렇게 jwFreeNote에 적용하려는 이유는 위의 장점 외에도,

  • jwFreeNote가 사용한 dhtml 보다 문정의 서식을 지정하는 방법이 매우 다양하고,
  • 테이블을 쉽게 작성하고, 수정할 수 있으며,
  • 윈도즈 비스타에서도 이상없이 실행됩니다.

제가 만들어 본 샘플 프로그램을 캡쳐한 그림입니다.

사용자 삽입 이미지

그러나 결국 실패했습니다.

문제는 문서를 저장하는 것에서 걸렸습니다. 원래 TinyMCE는 웹 서버와 연동하는 프로그램으로 jwFreeNote처럼 컴퓨터의 하드디스크에 저장하는 일반 워드용이 아닙니다. 이러다 보니, 로컬 하드디스크에 있는 파일을 읽어들이는 것은 어떻게 구현했는데, 저장하는 것을 해결하질 못했습니다.

저 나름대로 해결하려 했던 방법은,

  1. 자바 스크립트 함수를 이용하여 TinyMCE에서 문서의 내용을 클립보드를 이용하여 프로그램에 넘겨 주는 방법입니다.
function jwDataToClipBoard()
{
   var inst = tinyMCE.getInstanceById('content');

   window.clipboardData.setData('Text', inst.getHTML());
}

그러나 문제는 문서의 내용이 조금만 커지면 시간이 너무 오래 걸린다는 것입니다. 이 문서에서 저 문서로 편하고 빠르게 선택하여 이동해야 하는데, 너무 느리네요.

  1. 자바스크립트에서 파일을 저장하는 방법입니다.
function jwSaveToFile( FileName)
{
   var inst = tinyMCE.getInstanceById('content');

	var a = fso.CreateTextFile( FileName, true);
  	a.Write(inst.getHTML());
	a.Close();
}

클립보드를 사용하는 것보다는 빠르지만 문제는 var a = fso.CreateTextFile( FileName, true); 을 수행할 때마다 아래와 같은 경고 메시지가 발생합니다.

사용자 삽입 이미지

또한 문서가 커지고, 저장하는 시간이 길어지면 다시 시간이 너무 걸린다며 취소를 묻는 대화상자가 출력됩니다.

그럼에도 TinyMCE를 소개해 드리는 이유는

혹, 이와 같은 컨트롤에 관심이 있으시거나 찾는 분이 계실지 몰라서이고, 또 TinyMCE에 대한 도움 글과 함께 제가 실패한 방법을 소개해 드림으로써, 이 글을 참고하여 다른 해결 방법을 찾는데 도움을 드리고자 합니다.

더욱이, 저는 자바나 Ajax에 대해서는 잘 알지 못하기 때문에 이렇게 좋은 컨트롤을 제대로 사용하질 못합니다. 또한 TinyMCE가 웹 전용 위지위그 에디터이기 때문에 저처럼 로컬 데이터용 사용하려 한다는 자체가 문제가 가 있고, 글 내용이 엉뚱할 수 있습니다만 모쪼록 필요하신 분께 조금이나마 도움이 되는 글이었으면 좋겠습니다.

이 댓글을 비밀 댓글로
    • 궁금이
    • 2007.05.04 22:42
    헛.. 멋집니다! 저는 나름대로 개인 웹사이트를 구축하려 준비하는 중인데, 사이트내의 게시판에 저런 위지윅 에디터를 적용한 게시판을 만들어보고자 여러모로 알아보고 있었습니다. jwmx님 덕분에 큰 도움을 받았네요! 감사합니다!
    • 그런 용도로 찾으신다면 정말 좋은 프로그램입니다.
      java script로만 작서되었기 때문에 플랫폼과
      브라우저 영향이 매우 적고,
      글을 작성하기도 매우 편리하더군요.
  1. jwFreenote 를 계속 사용해 오고 있는 제게는

    업데이트 비스므리한 소식만 들려도

    기분이 좋아지는 것이 사실입니다...^^


    다음에 또 어떤 업데이트를 내 놓으실지

    기대 됩니다..^^




    ^________^
    • 호박나무
    • 2007.07.02 12:09
    좋은거같네요 그래도 저장을 하려면 방법이 없진 않겠지만 무척 비효율적일거같네요
    저자체가 컨포넌트가아니니깐 아마 저 자체를 웹컨트롤러에 뛰워서 사용하시려고 하신게 맞겠죠?
    저장을 굳이 하려면 웹컨트롤러에서 컨텐츠내용을 읽어서 내용부만 파싱하던지 해서
    저장하거나 할수도있을듯은 한데 아무래도 깔끔한 프로그램이 되진않겠네요
    예상일뿐이긴하지만요
    • calmglow
    • 2008.02.24 02:11
    jwFreenote와 유사하지만 저 역시 비슷한 개념의 프로그램을 개발해서 혼자(?) 사용하고 있습니다. 물론 TinyMCE를 사용하고 있구요. 검색은 구글데스크탑 검색기능을 사용하고, tomcat 기반으로 작동하고 있어요. 어떻게 보면 개인 위키처럼 쓰고 있기는 한데 결국 저장 방식은 각 페이지마다 html로 저장하고 있지요. 확실히 TinyMCE를 이용하니까 문서 편집이 더할 나위없이 편합니다. 단축키도 마음대로 지정할 수 있어서 TinyMCE의 자바스크립트 소스 수정해서 자주 쓰는 건 단축키 걸어서 사용 중입니다.
    • 와우~ 대단하세요. calmglow님께서도 TinyMCE를 이용하여 로컬 디스크에
      html 파일로 저장하시는 것인가요?
      우~ 부럽습니다. 혹시 로컬 파일로 저장하는 방법을 부탁드릴 수 있을까요?
      본문에 말씀을 드린 것처럼 저는 포기했습니다.

      방법을 말씀 주시기 어려우시면 개발하신 프로그램을 사용할 수 있도록 공개해 주실 수 없을까요?
      진심으로 부탁을 드립니다. 정말 많은 분들이 원하실 거에요.

      jwFreeNote와 같이 트리 구조를 제공하면서 TiniMCE를 사용해서 로컬 드라이브로 저장하는
      프로그램이라면 당장이라도 사용하고 싶습니다.

      메일 주소라도 알려 주시면 말씀 나누고 싶은데 대신에 댓글로 올립니다.
      반가운 말씀을 다시 들을 수 있기를 간절히 기대합니다. ^^
    • calmglow
    • 2008.03.15 23:40
    헉. 너무 늦게 답변드려 죄송합니다. 개발한 방법은 간단합니다. 톰캣을 설치해서 tinymce에서 들어온 데이타를 servlet이 받아서 로컬 특정 디렉토리에 저장하는거죠. 읽을때는 서블릿이 다시 로컬에 있는 html을 읽어서 뿌려주고 tinymce로 수정하면 다시 로컬에 있던 html재저장하구요..검색을 할 땐 구글 데스크탑 검색api이용해서 그 특정 디렉토리에 있는 것들 검색해서 html로 보여주는거죠. 결국 tomcat, tinymce, google desktop의 매쉬업인 셈이죠.
    제 메일주소는 calmglow@쥐멜.컴입니다.
    • 좋은날
    • 2008.05.09 06:11
    전문가 이야기네요 ㅎㅎ