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> <!-- 네이버 스마트에디터 스크립트 include --> <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 를 참고하라고 나오네요.(이건 테스트 안해봤음)
실력이 부족해서 여기까지 알아내는데도 많은 시간이 걸렸다.
이미지 저장 처리 함수는 여기에 적어두지 않는다. 그 부분은 직접 로직 설계를 하면서 구현 ....
'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
