2015. 4. 1. 18:40ㆍ공부/기타
취미로다가 웹 사이트를 하나 만들고 있습니다.
옛날 웹사이트에는 그냥 텍스트 입력만 되어도 상관없었지만..
요즘은 간지(?)나게 웹 에디터 하나 정도는 붙여줘야 좀 있어보이죠
그래서 여기저기 이곳저곳 찾아다니며 쓸만한 웹 에디터를 찾아보았는데...
심플하니 괜찮은 녀석을 찾기가 힘들었습니다.
외국 사이트에도 좀 보이고.. 국내에는 다음 웹 에디터 같은게 보였는데.. 좀 무거운 듯 보이고..
그러다 찾은 네이버 스마트 에디터..
네이버라 별로 찾아보지 않았었는데..
심플하니 괜찮군요...
개발하고 있는 페이지에 붙여본 모습인데..
우측이 약간 잘리네요 ㅠㅠ
그래도 이걸 받아서 적용하는데 30분도 안 걸렸습니다....
네이버 스마트 에디터 페이지에 들어가면
우측에 다운로드할 수 있는 링크가 있습니다.
다운로드 받아서 파일들을 프로젝트에 위치시키고...
<textarea class="col-md-12" placeholder="내용을 입력해주세요." name="post" id="post"></textarea>
위와같은 textarea 에 에디터를 적용하고자 한다면..
위 태그가 있는 페이지에
id = "post" 를 아래 아래 스크립트에서 사용합니다.
<script type="text/javascript" src="/se2/js/HuskyEZCreator.js" charset="utf-8"></script>
위처럼 HuskyEZCreator.js 파일을 포함시키고..
src 의 위치는 프로젝트의 위치를 잘 선택해야겠죠.
<script type="text/javascript">
var oEditors = [];
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: "post",
sSkinURI: "/se2/SmartEditor2Skin.html",
fCreator: "createSEditor2"
});
위와 같은 스크립트를 추가해줍니다.
위 위의 id="post" 의 post 를 elPlaceHolder 의 값으로 세팅하고
sSkinURI 의 SmartEditor2Skin.html 은 download 받은 위치에 있습니다. 위치 설정 하구요.
끝이네요...
여기까지 하면.. 화면에 에디터가 그려지고...
function doPost()
{
// 에디터의 내용을 실제 Textarea 로 가져옴
oEditors.getById["post"].exec("UPDATE_CONTENTS_FIELD", []);
submit();
}
실제로 글쓰기 '확인'을 누르면 호출하는 마지막 스크립트 코드에
아래 코드를 삽입해줍니다.
oEditors.getById["post"].exec("UPDATE_CONTENTS_FIELD", []);
이리하면. 에디터에서 작성한 내용이 id="post" 인 textarea 에 복사가 되죠..
서버측 프로그램에서는 그냥 form 데이터를 읽어드리면 끝..
참 쉽네요..
설명서도 한글로 잘 되어 있으므로 추가적인 기능이나 의문점들은 찾아보면 됩니다.
네이버 스마트 에디터 덕분에
꽤 오랫동안 고민하던 고민거리를 해결했네요