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