아무래도 일반 <textarea>를 사용하는 것보단 예쁘고 깔끌하게 작성 글을 꾸밀 수 있는 적당한 웹에디터를 찾고 있었는데, 이번에 네이버에서 공개한 스마트 에디터가 눈에 띠더군요.
http://dev.naver.com/projects/smarteditor
지속적인 업데이트나 사후관리가 괜챦을 것 같아 한번 채용해봤습니다.
나름 괜챦습니다.
아직까지 약간의 버그들이 있어 보이지만, 실무에 적용하는데 큰 무리는 없어보이고
버그들에 대한 리포트와 그에 대응하는 디버깅도 빠른 편입니다.
파이어폭스와 적용에 약간의 문제가 있어 몇 번 문의를 했는데 잘 해결이 되었습니다.
사용방법도 간단합니다.
CSS와 자바스크립트를 상단에 넣어주고, 기존의 <textarea></textarea> 영역에 똑같이 스마트에디터를 삽입하고, 문서의 맨 마지막이나 onload 시에 스마트에디터를 생성하는 자바스크립트 소스만 넣어주면 끝입니다.
아래는 간단적용한 예입니다.
빨간색 부분에 유의하면 되고, 혹시라도 문서 내 동일한 id가 있으면 안됩니다.
<div id="contents"> 이런 식으로 쓰고 있는 곳이 있다면 제대로 나타나지 않습니다.
CSS에서 id는 유일한 값이기 때문에 문서에 딱 한번만 쓸 수 있기 때문입니다.
따라서 겹치지 않는 id값으로 적당히 알아보기 쉽게...
예제 파일에 포함된 이미지 등을 사용하니 깔끔하게 적용이 되었습니다. 이런 에디터 하나 개발하는데도 많은 노력과 시간이 필요한 만큼 직접 만들기 보단 그냥 가져다 쓰는 것이 속 편하네요.
보다 자세한 내용은 스마트에디터 홈페이지의 소스 파일 내에 데모 파일이 있으므로 확인 가능합니다.
http://dev.naver.com/projects/smarteditor
지속적인 업데이트나 사후관리가 괜챦을 것 같아 한번 채용해봤습니다.
나름 괜챦습니다.
아직까지 약간의 버그들이 있어 보이지만, 실무에 적용하는데 큰 무리는 없어보이고
버그들에 대한 리포트와 그에 대응하는 디버깅도 빠른 편입니다.
파이어폭스와 적용에 약간의 문제가 있어 몇 번 문의를 했는데 잘 해결이 되었습니다.
사용방법도 간단합니다.
CSS와 자바스크립트를 상단에 넣어주고, 기존의 <textarea></textarea> 영역에 똑같이 스마트에디터를 삽입하고, 문서의 맨 마지막이나 onload 시에 스마트에디터를 생성하는 자바스크립트 소스만 넣어주면 끝입니다.
아래는 간단적용한 예입니다.
빨간색 부분에 유의하면 되고, 혹시라도 문서 내 동일한 id가 있으면 안됩니다.
<div id="contents"> 이런 식으로 쓰고 있는 곳이 있다면 제대로 나타나지 않습니다.
CSS에서 id는 유일한 값이기 때문에 문서에 딱 한번만 쓸 수 있기 때문입니다.
따라서 겹치지 않는 id값으로 적당히 알아보기 쉽게...
<html>
<head>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/HuskyEZCreator.js" charset="utf-8"></script>
</head>
<body>
<form name="form" action="ok.php" method="post">
<head>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/HuskyEZCreator.js" charset="utf-8"></script>
</head>
<body>
<form name="form" action="ok.php" method="post">
<textarea name="contents" id="contents" style="width:500px; height:300px"></textarea>
<input type="submit" value="작성" />
</form>
</body>
<script>
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "contents", "SEditorSkin.html", "createSEditorInIFrame", null, false);
oEditors[0].exec("UPDATE_IR_FIELD", []);
</script>
</html>
<input type="submit" value="작성" />
</form>
</body>
<script>
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "contents", "SEditorSkin.html", "createSEditorInIFrame", null, false);
oEditors[0].exec("UPDATE_IR_FIELD", []);
</script>
</html>
예제 파일에 포함된 이미지 등을 사용하니 깔끔하게 적용이 되었습니다. 이런 에디터 하나 개발하는데도 많은 노력과 시간이 필요한 만큼 직접 만들기 보단 그냥 가져다 쓰는 것이 속 편하네요.
보다 자세한 내용은 스마트에디터 홈페이지의 소스 파일 내에 데모 파일이 있으므로 확인 가능합니다.
'네이버 스마트에디터' 카테고리의 다른 글
| 네이버 오픈소스 스마트에디터 이미지 업로드 방법 (1) | 2012.09.21 |
|---|---|
| 네이버 스마트 에디터에 이미지 삽입하기 (2) | 2010.07.13 |
| 네이버 스마트에디터 풍부한 스타일을 사용하려면 (0) | 2009.02.11 |
| 네이버 스마트에디터 사용 중에... (2) | 2009.02.04 |
