Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[PHP, Javascript] 네이버 스마트에디터2 - 에디터 여러개 달기 본문

javascript

[PHP, Javascript] 네이버 스마트에디터2 - 에디터 여러개 달기

http://portfolio.wonpaper.net 2019. 1. 3. 11:00

 

상기 화면과 같이 2개의 에디터를 다중으로 설치하고자 한다.

 

[글쓰기]

 



<script type="text/javascript" src="/smarteditor2/js/HuskyEZCreator.js"></script>


    <span style="color:blue;">韓</span> <textarea name="content" id="content" rows="10" cols="100" style="width:680px; height:300px; display:none;"></textarea>
    <span style="color:red;">中</span> <textarea name="content_chn" id="content_chn" rows="10" cols="100" style="width:680px; height:300px; display:none;"></textarea>


<script language="javascript">
var oEditors = [];
var oEditors2 = [];
var sLang = "ko_KR"; // 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR

// 추가 글꼴 목록
//var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]];

nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors,
 elPlaceHolder: "content",
 sSkinURI: "/smarteditor2/SmartEditor2Skin.html", 
 htParams : {
  bUseToolbar : true,    // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseVerticalResizer : true,  // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseModeChanger : true,   // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
  //bSkipXssFilter : true,  // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
  //aAdditionalFontList : aAdditionalFontSet,  // 추가 글꼴 목록
  fOnBeforeUnload : function(){
   //alert("완료!");
  },
  I18N_LOCALE : sLang
 }, //boolean
 fOnAppLoad : function(){
  //예제 코드
  //oEditors.getById["content"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
 },
 fCreator: "createSEditor2"
});


nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors2,
 elPlaceHolder: "content_chn",
 sSkinURI: "/smarteditor2/SmartEditor2Skin.html", 
 htParams : {
  bUseToolbar : true,    // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseVerticalResizer : true,  // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseModeChanger : true,   // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
  //bSkipXssFilter : true,  // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
  //aAdditionalFontList : aAdditionalFontSet,  // 추가 글꼴 목록
  fOnBeforeUnload : function(){
   //alert("완료!");
  },
  I18N_LOCALE : sLang
 }, //boolean
 fOnAppLoad : function(){
  //예제 코드
  //oEditors2.getById["content_chn"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
 },
 fCreator: "createSEditor2"
});


function pasteHTML(filepath) {
// var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
 var sHTML = '<span style="color:#FF0000;"><img src="'+filepath+'"></span>';
 oEditors.getById["content"].exec("PASTE_HTML", [sHTML]);
 oEditors2.getById["content_chn"].exec("PASTE_HTML", [sHTML]);
}


function showHTML() {
 var sHTML = oEditors.getById["content"].getIR();
 alert(sHTML);
}
 
function submitContents(elClickedObj) {
 oEditors.getById["content"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.
 oEditors2.getById["content_chn"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.
 
 // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("content").value를 이용해서 처리하면 됩니다.
 try {
  var form2 = document.f;
  if (!form2.name.value) {
   alert("작성자 이름을 입력해 주십시오");
   form2.name.focus();
   return;
  }
  if (!form2.subject.value) {
   alert("글제목을 입력해 주십시오.");
   form2.subject.focus();
   return;
  }
  if (document.getElementById("content").value=="<p><br></p>") {
   alert("내용을 입력해 주세요.");
   oEditors.getById["content"].exec("FOCUS",[]);
   return;
  }
  form2.action="notice_write_ok.php";
  //elClickedObj.form.submit();
  form2.submit();
 } catch(e) {alert(e);}
}


function setDefaultFont() {
 var sDefaultFont = '궁서';
 var nFontSize = 24;
 oEditors.getById["content"].setDefaultFont(sDefaultFont, nFontSize);
 oEditors.getById["content_chn"].setDefaultFont(sDefaultFont, nFontSize);
}

function writeReset() {
 document.f.reset();
 oEditors.getById["content"].exec("SET_IR", [""]);
 oEditors2.getById["content_chn"].exec("SET_IR", [""]);
}
</script>

 

상기 화면과 같이 2개의 에디터를 동시에 적용하는 소스이다.

녹색 색깔의 소스 부분을 중점적으로 살펴 보면 어렵지 않을 것이다.

 

[글수정]

 



<script type="text/javascript" src="/smarteditor2/js/HuskyEZCreator.js"></script>


<?
$content = preg_replace("/\r\n|\n/",'',stripslashes($row[content]));
$content = str_replace("'","\'",$content);
$content = str_replace('"','\"',$content);
$content_chn = preg_replace("/\r\n|\n/",'',stripslashes($row[content_chn]));
$content_chn = str_replace("'","\'",$content_chn);
$content_chn = str_replace('"','\"',$content_chn);
?>


    <span style="color:blue;">韓</span> <textarea name="content" id="content" rows="10" cols="100" style="width:680px; height:300px; display:none;"></textarea>
    <span style="color:red;">中</span> <textarea name="content_chn" id="content_chn" rows="10" cols="100" style="width:680px; height:300px; display:none;"></textarea> 


<script type="text/javascript">
var oEditors = [];
var oEditors2 = [];


var sLang = "ko_KR"; // 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR
// 추가 글꼴 목록
//var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]];


nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors,
 elPlaceHolder: "content",
 sSkinURI: "/smarteditor2/SmartEditor2Skin.html", 
 htParams : {
  bUseToolbar : true,    // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseVerticalResizer : true,  // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseModeChanger : true,   // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
  //bSkipXssFilter : true,  // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
  //aAdditionalFontList : aAdditionalFontSet,  // 추가 글꼴 목록
  fOnBeforeUnload : function(){
   //alert("완료!");
  },
  I18N_LOCALE : sLang
 }, //boolean
 fOnAppLoad : function(){
  //예제 코드
  oEditors.getById["content"].exec("PASTE_HTML", ["<?=$content?>"]);
 },
 fCreator: "createSEditor2"
});

nhn.husky.EZCreator.createInIFrame({
 oAppRef: oEditors2,
 elPlaceHolder: "content_chn",
 sSkinURI: "/smarteditor2/SmartEditor2Skin.html", 
 htParams : {
  bUseToolbar : true,    // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseVerticalResizer : true,  // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
  bUseModeChanger : true,   // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
  //bSkipXssFilter : true,  // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
  //aAdditionalFontList : aAdditionalFontSet,  // 추가 글꼴 목록
  fOnBeforeUnload : function(){
   //alert("완료!");
  },
  I18N_LOCALE : sLang
 }, //boolean
 fOnAppLoad : function(){
  //예제 코드
  oEditors2.getById["content_chn"].exec("PASTE_HTML", ["<?=$content_chn?>"]);
 },
 fCreator: "createSEditor2"
});


function pasteHTML() {
 var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
 oEditors.getById["content"].exec("PASTE_HTML", [sHTML]);
}
function showHTML() {
 var sHTML = oEditors.getById["content"].getIR();
 alert(sHTML);
}
 
function submitContents(elClickedObj) {
 oEditors.getById["content"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.
 oEditors2.getById["content_chn"].exec("UPDATE_CONTENTS_FIELD", []); // 에디터의 내용이 textarea에 적용됩니다.
 
 // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("content").value를 이용해서 처리하면 됩니다.
 try {
  var form2 = document.f;
  if (!form2.name.value) {
   alert("작성자 이름을 입력해 주십시오");
   form2.name.focus();
   return;
  }
  if (!form2.subject.value) {
   alert("글제목을 입력해 주십시오.");
   form2.subject.focus();
   return;
  }
  if (document.getElementById("content").value=="<p><br></p>") {
   alert("내용을 입력해 주세요.");
   oEditors.getById["content"].exec("FOCUS",[]);
   return;
  }
  form2.action="notice_modify_ok.php";
  //elClickedObj.form.submit();
  form2.submit();
 } catch(e) {alert(e);}
}


function setDefaultFont() {
 var sDefaultFont = '궁서';
 var nFontSize = 24;
 oEditors.getById["content"].setDefaultFont(sDefaultFont, nFontSize);
 oEditors.getById["content_chn"].setDefaultFont(sDefaultFont, nFontSize);
}

function writeReset() {
 document.f.reset();
 oEditors.getById["content"].exec("SET_IR", ["<?=$content?>"]);
 oEditors.getById["content_chn"].exec("SET_IR", ["<?=$content_chn?>"]);
}

</script>

 

 

 

 

 

 

 

'javascript' 카테고리의 다른 글

안드로이드, IOS 로 분개시키기  (0) 2019.03.08
[Javascript] 보안서버 특정 도메인으로 강제이동시키기 (리다이렉션하기)  (0) 2019.01.26
[PHP, Javascript] 네이버 스마트에디터2 - 사진첨부 기능 포함(PHP업로드) , 글수정파일  (0) 2019.01.03
[PHP, Javascript] 네이버 스마트에디터2 - 사진첨부 기능 포함(PHP업로드) , 글쓰기파일  (0) 2019.01.03
현재 GPS 좌표값 얻기 3 - navigator.geolocation [다음지도 표시]  (2) 2018.12.29
'javascript' Related Articles more
Comments