PHP 네이버 스마트에디터 연동 방법

Web 프로그램/테이블, 게시판, 검색 2018. 4. 15. 06:54

728x90

PHP 에서 write.php 만들 때 textarea 만 포함하면 텍스트 형태로만 저장되어 표현의 다양성이 부족하다.

그래서 스마트에디터를 검색해보니 오픈소스인 네이버 스마트에디터(smart editor)를 연동하면 된다고 나온다.

자료를 많이 검색해도 잘 이해가 안되어 개념 잡는데 고생을 좀 했다.

네이버 스마트에디터(SmartEditor)는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기다.

연동에 필요한 사항 전부를 하나 하나 작성해둔다.

1. 네이버 스마트 에디터 다운로드

스마트에디터2.0 오픈소스는 github으로 이전했다.

https://github.com/naver/smarteditor2/releases 에서 받아야 한다.

스마트에디터3.0은 2.0버전과 동작방식이 전혀 다르고 설치형이 아니라 서비스형이다.

네이버는 오픈소스 계획이 없다.

2. 스마트 에디터 설치 준비

- 압축을 풀어서 plugin/editor/ 폴더에 복사를 한다.

다른 API 도 연동할 수 있으므로 plugin 폴더를 만들고 그 하위 폴더에 위치시켰다.

- readme.txt 파일을 보면 ....

      /css : 에디터에서 사용하는 css 파일
      /img : 에디터에서 사용하는 이미지 파일
      /js : 에디터를 적용할 때 사용하는 JS 파일
      /photo_uploader : 사진 퀵 업로더 팝업 UI를 구성하는 파일

3. 스마트 에디터 연동 과정

- smart editor 본문에 이미지를 추가하면 sample/photo_uploader/file_uploader.php 가 동작된다.

이미지가 file_uploader.php 에서 지정한 폴더에 저장된다.

- 원하는 폴더에 저장되게 하고 싶다면 file_uploader.php 를 수정한다.

- 이미지가 저장되면 코드가 자동으로 생성되어 smart editor 본문에 추가된다.

- 저장된 이미지의 경로명을 DB에 저장하고 싶다면 저장할 테이블을 만들고 아래 코드로 추출한다.

// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $getImageSrcPaths);

$b->bbs_imgSaveDB($getImageSrcPaths[1],$uid); // 이 코드는 개발자가 직접 구현 필요

4. 코드 예시

=== writeForm.php ===

<?php
require_once 'dbconnect.php'; // db접속
require_once 'phpclass/bbsClass.php'; // 게시판 클래스
$b = new bbsClass();

$uid = isset($_GET['uid']) ? $_GET['uid'] : '';
if($uid){
    $sql ="select * from table_name where id=".$uid;
    $rs = mysqli_query($dbconn,$sql);
    if($R = mysqli_fetch_array($rs)){

    }
}
?>

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript" src="plugin/editor/js/HuskyEZCreator.js"></script>
</head>
<body>
<div class="rdata_write">
   <form name="writeForm" id="writeForm" method="post" action="write.php">
   <input type="hidden" name="uid" value="<?php echo isset($R['uid'])? $R['uid']:'';?>">
   <table class="table" width="800">
       <tr>
           <td class="td1">제목</td>
           <td class="td2"><input type="text" name="subject" value="<?php echo isset($R['title'])? htmlspecialchars($R['title']):'';?>" />
           </td>
       </tr>

       <tr>
           <td class="td1">내용</td>
           <td class="td2">
           <textarea name="content" id="ir1" rows="20" style="width:100%;height400px;">
           <?php
               if(isset($R['content'])&& strlen($R['content'])){
                   echo $b->html_decode($R['content']);
               } else { echo '';}
           ?>
           </textarea>
           
           <script type="text/javascript" src="plugin/editor/js/se2_insert.js"></script>
           </td>
       </tr>

       <tr>
       <td colspan="2" align="center"><input type="button" id="savebtn" value="서버전송" class="btnblue" /></td>
       </tr>

   </table>
   </form>
</div>
</body>
</html>

=== se2_insert.js ===

$(function(){
    // 전역변수 선언
    var oEditors = [];
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: oEditors,
        elPlaceHolder: "ir1",
        // 스킨 경로명에 맞게 수정
        sSkinURI: "plugin/editor/SmartEditor2Skin.html",
        htParams : {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar : true,
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true,
            fOnBeforeUnload : function(){
                //alert("");
            }
        }, //boolean
        fOnAppLoad : function(){
            // 기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
        },
        fCreator: "createSEditor2"
    });

    function pasteHTML(str) { // 에디터에 내용 삽입
        sHTML = str;
        oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
    }

    function editerResetHTML() { // 에디터 내용 초기화
       oEditors.getById["ir1"].exec("SET_CONTENTS", [""]); // 내용초기화
    }

    function setDefaultFont() {
        var sDefaultFont = '돋움';
        var nFontSize = 11;
        oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
    }

    $("#savebtn").click(function(){
        // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어준다.
        if($("input[name='subject']").val() ==""){
            alert('제목을 입력하세요');
            $("input[name='subject']").focus();
            return false;
        }

        // 이부분에 에디터 validation 검증
        var ir1_data = oEditors.getById['ir1'].getIR();
        var checkarr = ['<p> </p>',' ','<p><br></p>','<p></p>','<br>'];
        if(jQuery.inArray(ir1_data.toLowerCase(), checkarr) != -1){
            alert("내용을 입력해 주십시오.");
            oEditors.getById["ir1"].exec('FOCUS');
            return false;
        }

        // id가 ir1인 에디터의 내용이 textarea에 적용됨
        oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

        //폼 submit
        $("#writeForm").submit();
    });
});

=== delete.php ===

<?php
if (!isset($_SESSION)) {
    session_start();
}

if($_SERVER['REQUEST_METHOD'] !== 'POST'){
   echo 0;
   exit;
}
extract($_POST);

// 업로드된 파일이 있다면 파일삭제
require_once 'dbconnect.php'; // db접속
require_once 'phpclass/bbsClass.php'; // 게시판 클래스
$b = new bbsClass();
if($uid){
    $b->bbs_imgDeleteDB($uid); // 이미지 DB 삭제 및 파일 삭제
   $sql ="delete from table_name where uid=".$uid;
   mysqli_query($dbconn,$sql);
   mysqli_close($dbconn);
}
?>

=== write.php ===

<?php
if (!isset($_SESSION)) {
    session_start();
}

if($_SERVER['REQUEST_METHOD'] !== 'POST'){
   echo 0;
   exit;
}
extract($_POST);
// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $getImageSrcPaths);

require_once 'dbconnect.php'; // db접속
require_once 'phpclass/bbsClass.php'; // 게시판 클래스
$b = new bbsClass();

$ip   = $_SERVER['REMOTE_ADDR'];
$agent = $_SERVER['HTTP_USER_AGENT'];

if($uid){
   $sql ="Update table_name SET content='".$b->html_encode($content)."', title='".$subject."' Where uid=".$uid;
   mysqli_query($dbconn,$sql);
    if(count($getImageSrcPaths[1])){
        $b->bbs_imgSaveDB($getImageSrcPaths[1],$uid);
    }
   echo 1;
} else {
   $sql ="INSERT INTO table_name (uid,title,content,d_regis) VALUES (NULL,'".$subject."','".$b->html_encode($content)."','".date("Y-m-d H:i:s")."')";
   mysqli_query($dbconn,$sql);
   $uid = mysqli_insert_id($dbconn);
    if(count($getImageSrcPaths[1])){
        $b->bbs_imgSaveDB($getImageSrcPaths[1],$uid);
    }
   echo 2;
}
?>

5. Smart Editor2에서 이미지 삽입 후 정렬이나 크기 조정 옵션을 설정 하는 방법
GitHub : https://github.com/naver/smarteditor2/issues/36 를 참고하라고 나오네요.(이건 테스트 안해봤음)

실력이 부족해서 여기까지 알아내는데도 많은 시간이 걸렸다.

이미지 저장 처리 함수는 여기에 적어두지 않는다. 그 부분은 직접 로직 설계를 하면서 구현 ....

728x90

저작자표시 비영리

'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글

bootstrap4 paging with PHP (0)	2022.02.27
XSS(cross-site scripting) filtering function in PHP (0)	2018.05.01
PHP 검색어 함수 (0)	2018.04.08
HTML 특수기호 (0)	2018.01.17
부트스트랩 기반 WYSIWYG editor summernote (2)	2017.03.19

Link2Me

일	월	화	수	목	금	토
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