부트스트랩 기반 WYSIWYG editor 인 summernote 기능을 익혀 보는데 쉽지 않았다.
구글링을 통해 많은 예제를 참고하면서 테스트를 해봤다.
http://summernote.org/ 에서 summernote 파일을 다운로드 받아서 설치한다.
summernote 에디터에 이미지를 첨부하게 되면, 이미지가 지정된 폴더에 업로드되고 그 결과가 editor 화면에 보여지게 된다.
이미지는 하나를 업로드 하고 다시 선택해서 업로드를 해보니 업로드는 잘 되고 두개 모두 에디터에 보여진다.
설명보다 받아서 테스트해보고 내것으로 소화하면 될 거 같다.
==== summernote.php ====
<?php
require_once 'connect.php'; // db접속 성공
require_once 'phpclass/boardClass.php'; // 게시판 클래스
if(isset($_GET['uid']) || empty($_GET['uid'])){
$_GET['uid'] = '';
}
$uid = $_GET['uid'] ? $_GET['uid'] : '';
$b = new boardClass();
$R = $b->rdata_array($uid); // 배열함수
if($R == 0){
$R = array();
$R['uid'] = '';
$R['subject']= '';
$R['content'] = "DB에서 값을 가져온다고 가정";
//$R['content'] = '';
}
?>
<!DOCTYPE html>
<head>
<meta charset=UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<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" />
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="plugin/bootstrap/js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="plugin/summernote/summernote.css" rel="stylesheet">
<script src="plugin/summernote/summernote.js"></script>
<script src="plugin/summernote/lang/summernote-ko-KR.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
minHeight: null,
maxHeight: null,
lang : 'ko-KR',
callbacks: {
onImageUpload : function(files, editor, welEditable) {
console.log('image upload:', files);
sendFile(files[0], editor, welEditable);
},
}
});
// summernote 에 값을 기록(set)
// var markupStr = 'hello world';
// $('.summernote').summernote('code', markupStr);
// summernote 에디터에 이미지 업로드
function sendFile(file,editor,welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
url: "saveimage.php", // image 저장 경로
data: data,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
type: 'POST',
success: function(data){
var obj = JSON.parse(data);
if (obj.success) {
var image = $('<img>').attr('src', '' + obj.save_url); // 에디터에 img 태그로 저장
$('.summernote').summernote("insertNode", image[0]); // summernote 에디터에 img 태그를 보여줌
} else {
switch(parseInt(obj.error)) {
case 1: alert('업로드 용량 제한에 걸렸습니다.'); break;
case 2: alert('MAX_FILE_SIZE 보다 큰 파일은 업로드할 수 없습니다.'); break;
case 3: alert('파일이 일부분만 전송되었습니다.'); break;
case 4: alert('파일이 전송되지 않았습니다.'); break;
case 6: alert('임시 폴더가 없습니다.'); break;
case 7: alert('파일 쓰기 실패'); break;
case 8: alert('알수 없는 오류입니다.'); break;
case 100: alert('허용된 파일이 아닙니다.'); break;
case 101: alert('0 byte 파일은 업로드할 수 없습니다.'); break;
}
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus+" "+errorThrown);
}
});
}
$("#savebtn").click(function(){
if($("input[name='subject']").val() ==""){
alert('제목을 입력하세요');
$("input[name='subject']").focus();
return false;
}
var contents = $('.summernote').summernote('code');
//alert(contents.length);
if(contents.length < 12){ // 소스보기로 보면 <p><br></p> 가 기본으로 있음
window.alert('내용을 입력하세요');
$('.summernote').summernote('focus');
return false;
}
$("#writeForm").submit();
});
});
</script>
</head>
<body>
<div class="rdata_write">
<form name="writeForm" id="writeForm" action="write.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="uid" value="<?php echo $R['uid'];?>">
<table class="table" width="1000">
<tr>
<td class="td1">No</td>
<td class="td2"><?php if($R['uid']):?><?php echo $R['uid'];?><?php endif;?></td>
</tr>
<tr>
<td class="td1">제목</td>
<td class="td2"><input type="text" name="subject" value="<?php echo htmlspecialchars($R['subject']);?>" style="width:98%;" />
</td>
</tr>
<tr>
<td class="td1">내용</td>
<td class="td2"><!-- summernote editor -->
<textarea class="summernote" name="content" rows="10"><?php echo htmlspecialchars($R['content']);?></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" id="savebtn" value="서버전송" class="btn btn-danger" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
==== saveimage.php ====
<?php
$allowed = array("jpg", "png", "gif", "zip");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
if ($_FILES['file']['name']) {
$tmpname = $_FILES['file']['tmp_name'];
$realname = $_FILES['file']['name'];
if (!$_FILES['file']['error']) { // 오류 없이 파일 업로드 성공
if(! in_array(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION), $allowed) ){
@unlink($tmpname);
echo json_encode(array('success' => false, 'error' => 100));
} else if (!getimagesize($tmpname)) {
@unlink($tmpname);
echo json_encode(array('success'=> false, 'error' => 101));
} else {
$fileExt = getExt($realname);
$filename = date("Ymd").md5(uniqid($tmpname)) .round(microtime(true)).'.'.$fileExt;
$uploadFile = './upload/' . $filename; //change this directory
if(move_uploaded_file($tmpname, $uploadFile)){
@chmod($uploadFile,0606);
echo json_encode(array('success' => true, 'save_url' => $uploadFile ));
}
}
} else {
echo json_encode(array('success'=> false, 'error' => $error));
}
}
}
// 확장자 추출 함수
function getExt($filename){
$ext = substr(strrchr($filename,"."),1);
$ext = strtolower($ext);
return $ext;
}
?>
==== write.php ====
테스트 목적이라서 내용이 없고 파일 내용이 잘 넘어가는지 여부만 테스트를 했다.
write.php 에서 content 필드의 내용을 잘 정리하는 함수 테스트까지는 못한 상태이다.
print_r($_POST) 보다는 var_dump($_POST)가 정보를 더 많이 보여준다.
<?php
extract($_POST);
var_dump($_POST);
//print_r($_POST);
exit;
?>
테스트해보니 $_POST['content'] 의 값은 그대로 잘 저장된다.
<?php
if(!isset($_SESSION)) {
session_start();
}
@extract($_POST);
//var_dump($_POST);exit;
$tableName = 'table_items';
if(isset($_SESSION['userid']) && !empty($_SESSION['userid'])) { // 세션정보가 있으면(로그인되어있으면)
include_once $_SERVER['DOCUMENT_ROOT'].'/_core/config/config.php';
include_once $_site['web_config'].'/dbconnect.php'; // db접속
include_once $_site['web_class'].'/dbClass.php';
$c=new MySQLiDbClass;
$content = trim($content);
if($uid){ // 수정
$R = $c->getUidData($tableName,$uid);
$QVAL = "ItemName='$ItemName',Price='$Price',Quantity='$Quantity',content='$content'";
$c->getDbUpdate($tableName,$QVAL,'uid='.$R['uid']);
echo json_encode(array('result'=>'2'));
} else { // 신규
$QKEY = "ItemName,Price,Quantity,content";
$QVAL = "'$ItemName','$Price','$Quantity','$content'";
$c->getDbInsert($tableName,$QKEY,$QVAL);
echo json_encode(array('result'=>'1'));
}
} else {
echo json_encode(array('result'=>'0'));
}
?>
https://github.com/kimsQ/rb/issues/60 은 나중에 읽어봐야 할 거 같다.
summernote.zip에디터 테스트한다고 고생해서 다른 분들은 수고를 줄이라고 파일 첨부합니다.
블로그에 정리해주신 분들의 자료가 완벽하게 정리된 것을 찾기가 쉽지 않아서 정말 많은 검색을 통해서 자료에 살을 붙이면서 테스트에 성공했습니다.
write.php 파일과의 처리는 ajax 처리는 아닙니다. ajax 처리로 변경하려면 다른 게시글을 참조하면 됩니다.
'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글
| PHP 검색어 함수 (0) | 2018.04.08 |
|---|---|
| HTML 특수기호 (0) | 2018.01.17 |
| 부트스트랩 테이블 만들기(수정) (0) | 2017.02.02 |
| 부트스트랩 테이블 만들기 (0) | 2017.01.31 |
| 부트스트랩 테이블 속성 (0) | 2017.01.31 |
Link2Me