'API/NAVER 스마트 에디터'에 해당되는 글 1건

  1. [Editer] NAVER 스마트 에디터 세팅 2018.04.20

[Editer] NAVER 스마트 에디터 세팅[Editer] NAVER 스마트 에디터 세팅

Posted at 2018. 4. 20. 17:40 | Posted in API/NAVER 스마트 에디터




※ 참고 : 이 포스팅은 SmartEditor Basic을 기준으로 작성되었습니다.




■ 네이버 스마트 에디터 세팅하고 사용하기




01. https://github.com/naver/smarteditor2 사이트에 접속하여 smarteditor2-master.zip 파일을 다운로드 받는다.





02. 다운받은 smarteditor2-master.zip 파일의 압축을 해제한뒤 파일명을 smarteditor로 변경하였다.





03. 생성된 smarteditor 프로젝트에서 board.php 파일을 생성한다.





04. board.php 파일의 소스코드는 아래와 같다.

 board.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Naver :: Smart Editor 2</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function submitContents(elClickedObj) {

    // 에디터의 내용이 textarea에 적용됩니다.
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
   
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
    try {

        elClickedObj.form.submit();


    } catch(e) { }
}
</script>
</head>
<body>
<form action="view.php" method="post" accept-charset="utf-8">
&nbsp;<b>제목&nbsp;:</b>&nbsp;<input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once("./workspace/SmartEditor2.html");      // 스마트 에디터를 include 한다.
?>
<div style="height:20px;"></div>
<div align="center">
    <input type="button" value="등록" onClick="submitContents(this);"/>
</div>
</div>
</form>
</body>
</html>




05. 다음으로 workspace폴더로 이동하여  include를 사용하여 가져올 SmartEditor2.html 파일을 수정해야 한다.




06. SmartEditor2.html 파일의 수정사항은 아래와 같다.

 ① 파란색으로 강조되어 있는 부분은 수정한 내용이다.

 ② 빨간색으로 강조되어 있는 부분은 삭제해도 된다.

 SmartEditor2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>네이버 :: Smart Editor 2 &#8482;</title>

<!-- 인클루드를 할 것이기 때문에 HuskyEZCreator.js의 연결경로를 절대경로로 변경한다. -->

<script type="text/javascript" src="http://localhost/smarteditor/workspace/js/service/HuskyEZCreator.js" charset="utf-8"></script>
</head>
<body>
<!--form action="sample/viewer/index.php" method="post"-->
    <textarea name="ir1" id="ir1" rows="10" cols="100" style="width:766px;height:412px;display:none;"></textarea>
    <!--textarea name="ir1" id="ir1" rows="10" cols="100" style="width:100%; height:412px; min-width:610px; display:none;"></textarea-->
    <!--p>
        <input type="button" onclick="pasteHTML();" value="본문에 내용 넣기" />
        <input type="button" onclick="showHTML();" value="본문 내용 가져오기" />
        <input type="button" onclick="submitContents(this);" value="서버로 내용 전송" />
        <input type="button" onclick="setDefaultFont();" value="기본 폰트 지정하기 (궁서_24)" />
    </p-->
<!--/form-->

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

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 : "ir1"

    // 인클루드를 할 것이기 때문에 SmartEditor2Skin.html의 연결경로를 절대경로로 변경한다.

    , sSkinURI : "http://localhost/smarteditor/workspace/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["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
    }
    , fCreator : "createSEditor2"
});

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


/*
function showHTML() {
    var sHTML = oEditors.getById["ir1"].getIR();
    alert(sHTML);
}
*/


/*
function submitContents(elClickedObj) {
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
   
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
   
    try {
        elClickedObj.form.submit();
    } catch(e) {}
}
*/


/*
function setDefaultFont() {
    var sDefaultFont = "궁서";
    var nFontSize = 24;
    oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
}
*/

</script>

</body>
</html>




07. 다음으로 스마트 에디터의 스킨내용이 담겨있는 SmartEditor2Skin.html 파일을 수정한다.




08. SmartEditor2Skin.html 에서 수정할 내용은 화면에 띄워지는 스마트 에디터의 버전 정보를 삭제하는 것 뿐이다.

 SmartEditor2Skin.html


      ~ 기타 코드 생략 ~


<!--Remove End-->
</head>
<body>


<!-- 화면에 버전 정보가 표시되는것을 지운다. -->

<!--span id="rev">Version: 2.9.0.4a256db</span-->

<!-- SE2 Markup Start -->   
<div id="smart_editor2">
    <div id="smart_editor2_content"><a href="#se2_iframe" class="blind">글쓰기영역으로 바로가기</a>


      ~ 기타 코드 생략 ~





09. 마지막으로 smarteditor 폴더로 돌아와서 view.php 파일을 생성한다.




10. view.php 파일의 내용은 아래와 같다.

 view.php

<?php
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
?>




11. 이제 board.php 파일을 열고 정상적으로 작동되는지 테스트 해보자.





12. 그럼 아래와 같이 view.php에 작성내용이 정상적으로 나타나면서 작업이 완료 되었다.






'API > NAVER 스마트 에디터' 카테고리의 다른 글

[Editer] NAVER 스마트 에디터 세팅  (0) 2018.04.20

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기