이거처럼 네이버에디터 펼침효과 주려면 어떻게해야하나요 ?
본문
http://www.wisa.co.kr/#/counsel/index/qna
위 사이트처럼 textarea 클릭시 나오게 하려면 어찌해야하나요?.
비슷하게해봣는데 저는,
스마트에디터 높이값을 인식을 못해버려서
ie에서 에디터가 가려지는 현상이 발생되는데..
에디터를 실제 노출시켜주는 스크립트는 어디에 잇나요 ?... 그부분을 수정해야겟죠 ?..
-----------------------
에디터 height 값을 고정으로 딱 지정해서 주려면 어떻게해야하나요 ?
지금은 textarea의 값을 가져오는거잖아요 ?
그냥 에디터 자체에높이값을 주고싶은데..
답변 1
일단 저런 방법 만들기 위해 참고할 것인데요.
function viewForm(idx) {
if(idx == undefined) idx='';
$('#counsel').find('.viewdiv'+idx).slideDown('fast');
seCall('content'+idx); }
위 스크립트가 적어주신 사이트에서 사용중인 글쓰기 버튼을 클릭시 작동하는 스크립트중 하나에요.(다른건 클릭시 자기자신을 숨기는것과 리턴펠스... 신경쓸건 아니고요. 그리고 카테고리,제목,파일업로드 이 3가지는 미리 생성해두고 display:none처리 해둔것 뿐이에요. 글쓰기 버튼을 누르면 display:block으로 바껴요.)
글쓰기 버튼의 viewForm을 실행시키는데 idx값을 넣지 않아요.
그래서 첫째줄은 무시하시고 두번째줄은 counsel이란 아이디값을 가진것에서 '.viewdiv'+idx를 찾아서 빠른속도로 슬라이드다운으로 숨겨진걸 모두 보여주는건데. idx값은 어ㅓㅂㅅ으니 counsel이란 아이디값을 가진 엘리먼트의 안쪽에 있는 viewdiv라는 클래스값을 가지는 것을 보여주는거고요.
3번째줄은 seCall(값)을 전해주는건데. 이건 특별한건 아니고 스마트에디터를 실행시켜주는거에요.
function seCall(contentId) {
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: contentId,
sSkinURI: "./smartEditor/SmartEditor2Skin.html",
htParams : {bUseToolbar : true,
fOnBeforeUnload : function(){
}
},
fOnAppLoad : function(){
},
fCreator: "createSEditor2"
});
}
원래 스마트에디터를 사용할때 펑션사용안하고 그냥 바로 실행시켜주는데 여기는 보여주기 위해서 글쓰기버튼을 클릭했을때 스마트에디터를 생성하도록 해준거더라고요.(스마트에디터 설치방법 찾아보시면 중간에 이스크립트를 넣으라고 나와요. 그걸 그냥 바로 활성화하지않고 원할때 활성화하려고 펑션으로 사용해준것뿐이에요.)
여기까지가 wisa에서 사용하는 글쓰기버튼이 돌아가는 방법 설명한거구요.
스마트에디터에서 높이값 바꾸고 싶으시면 여러가지방법이 있는데요. 폼페이지에서 스마트에디터를 넣을 곳인 textarea안에 직접 width,height값을 넣어주시거나 /SmartEditor2/js/HuskyEZCreator.js안에 80,80번째줄을 수정하시면 넣으실 수 있어요. 이 두가지가 제가 자주 사용하는 방법이고 다른 방법도 많아요.
끝...
아 ...무슨 말씀인지 이해됬어요!! 감사합니다 ㅠㅠ
그런데 그럼,,,config.php 에 잇는 스크립트를 없애야될까요!?
제가 유우니얌님 config.php안에 어떤 스크립트가 있는지 몰라서요 ㅜㅜ
그누보드5 그냥 다운받아서 경로찾기나 어떤소스인지 파악하는데만 써서... 제 config.php에는 스크립트가 없어요 ㅜㅜ
config.js 에 있는 아래
(function($){
$(document).ready(function() {
$(".smarteditor2").each( function(index){
var get_id = $(this).attr("id");
if( !get_id || $(this).prop("nodeName") != 'TEXTAREA' ) return true;
if(클릭해서 보여줄떄) {
editorGO(dddd)
}
else { editorGO(dddd)
}
});
function editorGO(dddd){
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: get_id,
sSkinURI: g5_editor_url+"/SmartEditor2Skin.html",
htParams : {
bUseToolbar : true, // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bUseVerticalResizer : true, // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
bUseModeChanger : true, // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
//aAdditionalFontList : aAdditionalFontSet, // 추가 글꼴 목록
fOnBeforeUnload : function(){
//alert("완료!");
}
}, //boolean
fOnAppLoad : function(){
//예제 코드
//oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
},
fCreator: "createSEditor2"
});
}
});
})(jQuery);
이런식으로하면 될까요...흠...
config.js 엿네요...스마트에디터폴더에 ㅠㅠ....ㅎㅎ
nhn.husky.EZCreator.createInIFrame
네 위에 있는게 실질적인 스마트에디터를 생성하는거에요.
elPlaceHolder에 들어가는 textarea의 클래스값과 그아래에 sSkinURI의 값이 정확하게 전달되도록 넣어주시면 되요.
글쓰기 버튼의 class값이 clickWrite이라면
$(".clickWrite").click(function(){
editorGO(전달값);
});
이렇게 해주시면 될것같아요~
끝...
