WYSIWYG Editer in textarea
WYSIWYG What You See It, What You Get!!
맞나?? ㅡㅡㅋ
하여간 웹 입력 페이지에서 내용을 쉽게 넣어 주는 툴을 말합니다.
잠시 서핑 하다 좋은 WYSIWYG Editer 를 보아서... 백업차원에서 WYSIWYG Editer 를 적어 봅니다.
갠적으로 FCKeditor, SPAW, aynHTML 정도가 맘에 드는 군요
1. HTMLArea - http://www.htmlarea.com/
* ImageManager + Editor for HTMLArea - http://sourceforge.net/projects/imgmngedt/
Demo: http://www.htmlarea.com/htmlarea_2/
http://www.dynarch.com/projects/htmlarea/
No longer maintained HTMLArea-3.0-last-20071025.zip
2. FCKeditor - http://www.fckeditor.net/ http://sourceforge.net/projects/fckeditor/
Demo: http://www.fckeditor.net/demo/default.html
3. SPAW - http://www.solmetra.com
Demo: http://www.solmetra.com/spaw/demo/demo.php
4. HyperTextArea - http://hypertextarea.sourceforge.net/ http://sourceforge.net/projects/hypertextarea/
Demo: http://hypertextarea.sourceforge.net/javascript/demo.html
5. aynHTML - http://www.aine.be/aynhtml/ http://sourceforge.net/projects/aynhtml/
Demo: http://www.aine.be/aynhtml/editor.html
6. Richtext editor - http://www.richtext.org.uk/ http://sourceforge.net/projects/richtext/
Demo: http://www.richtext.org.uk/rt-0.3/help/samples/test_embedded.asp
7. CHEditor - http://www.chcode.com/products/cheditor.shtml
Demo: http://www.chcode.com/cheditor/demo.html
상용 도메인 당 33,000원
8. TinyMCE - http://tinymce.moxiecode.com/
Demo: http://tinymce.moxiecode.com/example_full.php?example=true
9. WysiwygPro - http://www.wysiwygpro.com/
상용으로 외국 소스이고 엄청난 기능으로 무장하고 있습니다. 너무 필요 없는 기능이 많네요. 조금 무겁고...
Demo: http://wysiwygpro.com/index.php?id=337
10. JwebEditor™ - http://www.jjaekim.com/
jjaekim님이 만드신 에디터로 상당히 깔끔한 편입니다.
Demo: http://www.jjaekim.com/Jweb/products/Jweb_edit_ver1.x/Jweb_edit.html
11. KNEditor - http://knhead.pe.kr/
현재 제작자 사이트는 닫혀 있네요.
별다른 기능은 없고 딱 쓸것만 있습니다. 공부하는 데는 딱일것 같네요.
--------------------------------------------------------------------------------------
추가 :
알디터 - http://www.alik.info
Demo: http://www.alik.info/alditor/sample.html
위지윅 하비에디터 V_96_4F 20070205 - http://fiesole.dothome.co.kr/
레인에디터 - http://cafen.net/
미니위니 에디터 - http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=3012
미니위니의 게시물 입력툴을 타게시판에 붙여봅니다.
가장 많이 쓰시는 제로보드를 기준으로 설명합니다.
작동 원리
TEXTAREA 형식으로 된 입력툴의 FORM 정보를 이용, 동적으로 contentEditable을 이용한 위지윅 에디터로 "덮어"쓰는 방식입니다.
사용방법
1. 다운받은 파일을 압축 푸시고
2. miniwini.visualEditor.conf.php 파일을 여신 후에 필요한 부분을 수정합니다. (제로보드의 경우는 별도의 수정이 필요없습니다)
3. 게시판이 설치된 디렉토리에 업로드합니다.
4. 게시물 입력 부분이 들어가있는 파일 (제로보드의 경우 write.php)을 열어서, 입력폼이 나오는 밑부분에
include(dirname(__FILE__)."/miniwini.visualEditor.php");
라고 한줄 추가해 줍니다.
아래는 제로보드의 write.php 파일을 수정하는 예입니다.
include $dir."/write.php";
include(dirname(__FILE__)."/miniwini.visualEditor.php");
6. 글을 써봅니다.
주의 사항
- miniwini.visualEditor 디렉토리 밑에 emoticons 라는 디렉토리를 만드시고 이모티콘 파일을 몰아 넣으시면 이모티콘 버튼 클릭시 이모티콘들이 나오게 됩니다.
- 위의 파일은 입력부분에 있어서 자유로운 HTML 입력을 허용하는 것입니다. 각 게시판마다 DB입력시 체크하는 부분은 알아서 수정하시기 바랍니다. (DB에서 별다른 체크를 하지 않는 경우, 모든 HTML 태그가 DB로 들어갑니다. 반드시 strip_tags() 등으로 한번 걸러내시기 바랍니다.)
- 다운로드 파일의 직접 링크는 허용하지 않습니다.
- miniwini.visualEditor.css 파일의 내용을 원래 쓰시던 css 파일에 넣으셔야 링크 색상이 제대로 표시됩니다.
- "바로 재생"은 별도의 Javascript 함수를 호출합니다. 아래의 함수를 원래 쓰시던 .js 파일에 추가하세요.
playMultimediaFile() 함수
---------------------------------------------------
function playMultimediaFile(sUri,obj)
{
var nPlayState = obj.getAttribute("isPlaying");
if (nPlayState==0)
{
el = obj.previousSibling;
while (el.tagName!="A")
el = el.previousSibling;
var oMedia = document.createElement("EMBED");
oMedia.style.display = "block";
oMedia.src = sUri;
oMedia.autostart = true;
obj.parentNode.appendChild(oMedia);
obj.setAttribute("isPlaying",1);
}
else
{
alert("이미 재생중입니다");
return;
}
}
---------------------------------------------------
CHANGELOG
1.0.0.1
- 에디터에 포커스가 가있지 않은 경우 문제 수정
- Firefox에서 입력 후 내용이 없다는 오류 메시지가 나오는 문제 수정
- "텍스트 사용","자동으로 BR 생성" 체크박스 관련 항목 추가
- miniwini.visualEditor.conf.php 에 간단한 주석 첨가
- 링크 추가 대화창에 "바로 재생" 옵션 추가
1.0.0.0
- Superscript 수정
- StrikeThrough 가능한 듯 해서 수정
- 게시물 수정시 이모티콘 경로 깨짐 문제 수정 - special thanks to kimbilly :)
- 게시물 수정시 출력할 원문 정보 변수 추가
- 글 수정의 경우($mode=="modify") 원본글이 미리 입력되어 있게 수정
- 글자 색깔 오류 수정