tinymce 에디터 사용법
나한테는 tinymce에디터가 편하게 사용되었다. 물론 단점이 있다면 초기 설정이 많음 ㅡㅡ;
아래는 tiny에디터의 그림.
이 에디터는 전세계적으로 많이 사용되는 에디터 중에 하나이다.
파폭 사파리 맥 윈맥 등등 모든 브라우저의 기능을 제공하고 있으며 HTML소스넣기부분도 크로스사이트스크립트 등 방지의 목적으로 자바스크립트를 소스에 넣게되면 자동 주석처리가 되어 들어가능 여러모로 편한점이 많다.
네이버 에디터도 간혹 사용해보기도 했지만 간혹 에디터의 고질적인 수정할때의 에디터로 포커스 이동문제등 몇몇 문제들때문에
난관에 부딪친경우도 있었다.
에디터는 http://tinymce.moxiecode.com/ 여기서 다운을 받으면 되고. 각종 팝업의 언어설정에 관한 한글 언어팩 등이 있으니.
플러그인에다 사용해서 넣으면된다.
최근에 다시 홈피에 접속해보니 jquery등 많은 UI부분에서 변경된걸 느낄수있었다.
다운을 받고 적당한 위치에 넣은다음 해당 경로에 맞게 작성 아래와 같이 작성한다.
<script type="text/javascript" src="/common/tinymce_3_2_2_3/jscripts/tiny_mce/tiny_mce.js">
<script language="javascript">
tinyMCE.init({
//실제 textarea의 class명
editor_selector : "editor_holder",
// General options
mode : "textareas",
theme : "advanced",
//skin : "o2k7",
language : "ko",
plugins : "safari,noneditable,advimage,fullpage",
theme_advanced_path : false,
//IE에서 한글입력 문제 해결을 위해서
forced_root_block : false,
//에디터 너비 높이 설정
height : "330",
width : "830",
// Theme options
/*
이건 각 버튼 영역이다 위의 그림을 보면 맨위에서부터 각각의 버튼 영역이 있다. 소스를 다운받으면 전체 버튼이 나오게 되는데
그중 간단히 쓸것만 아래처럼 변경한것임.
샘플 그대로 사용해서 그중 자기가 필요한거를 넣거나 빼면된다.
에디터상에 특정 아이콘을 이용해서 꾸미고싶다면. 아래 imagepop 을 참조해서 파일업로드해서 에디터에 넣는것을 추가했다.
서버 특성상 각각의 파일업로드 처리 팝업을 만들었다고 가정하고 설명하겠다. ('imagepop'은 기본에 없는 아이콘명)
별도의 동영상이나 네이버 지도 API를 이용해서 넣거나 등등 이런경우 사용하면된다.
*/
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor
,imagepop,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example word content CSS (should be your site CSS) this one removes paragraph margins
content_css : "css/content.css",
//에디터에 사용할 폰트 지정
theme_advanced_fonts : "굴림=굴림;굴림체=굴림체;궁서=궁서;궁서체=궁서체;돋움=돋움;돋움체=돋움체;바탕=바탕;바탕체=바탕체;Arial=Arial; Comic Sans MS='Comic Sans MS';Courier New='Courier New';Tahoma=Tahoma;Times New Roman='Times New Roman';Verdana=Verdana",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
},
/*
에디터 파일업로드 이미지및 스크립트 설정
위에서 설명한 에디터 아이콘명 추가. 사용할 아이콘명 아이콘 이미지 경로 클릭시 호출된 함수를 작성한다.
*/
setup : function(tinyMCE) {
// Register youtube button
tinyMCE.addButton('imagepop', {
title : 'imagepop',
image : '/image/common/ico_img.gif',
onclick : function() {
cmdImgUploadPop();
}
});
}
});
//이미지 버튼 클릭시 팝업 실제 파일업로드를 구성하여 링크할 경로를 작성한다( 아이콘클릭시 이 함수가 호출됨)
function cmdImgUploadPop(){
var win = window.open( "/board/board.do?cmd=editorImg",
"editor_win",
"toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,width=450,height=350,left=50,top=50"
);
win.focus();
}
// 파일업로드 완료후 opener.editorImgUploadComplete함수호출 되는 방식
function editorImgUploadComplete(fileStr, dir){
if( fileStr.length > 0 ){
fileStr = fileStr.substring(0, fileStr.length-1);
getObject("editorImgArrStr").value = fileStr;
fileArray = fileStr.split("^");
//3개가 한묶음
var strImg = "";
for( var i=0; i<fileArray.length; i+=3){
strImg += "<br><img src='<%= slssConfig.getNoticeEditorUrl() %>" + dir + "/" + fileArray[i+2] + "' border=0><br><br>";
}
//var contents = tinyMCE.activeEditor.getContent();
//tinyMCE.get('contents').getContent();
var contents = tinyMCE.activeEditor.getDoc().body.innerHTML;
tinyMCE.activeEditor.setContent( contents + strImg );
}
}
</script>
실제 에디터가 사용될부분에 아래와 같이 작성한다.
<textarea class="editor_holder" name="contents" style='width: 830px; height: 330px;'></textarea>
모든 에디터의 원리가 iframe으로 만들어지는 방식이기때문에 고질적인 문제가 iframe이 만들어지기전에
수정글을 넣을수가 없는 문제가 발생하기도한다. 그래서 그런경우에는
setup : function(tinyMCE) 설정 안에 아래와 같이 넣어주면 된다.
ed.onLoadContent.add(function(ed, o) {
ed.focus();
tinyMCE.activeEditor.setContent( 내용 );
});
이렇게 설정해야 할부분이 많다보니 ㅎㅎ 잘 간추려서 잘 사용하시기 바랍니다. ^^
출처 : http://goldenpig.egloos.com/2976788