본문으로 바로가기
homeimage
  1. Home
  2. 컴퓨터/컴퓨터 이야기
  3. TinyMCE - 무료 wysiwyg 에디트 컨트롤

TinyMCE - 무료 wysiwyg 에디트 컨트롤

· 댓글개 · 바다야크

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가 웹 전용 위지위그 에디터이기 때문에 저처럼 로컬 데이터용 사용하려 한다는 자체가 문제가 가 있고, 글 내용이 엉뚱할 수 있습니다만 모쪼록 필요하신 분께 조금이나마 도움이 되는 글이었으면 좋겠습니다.

SNS 공유하기
💬 댓글 개
최근글
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.