오랜만에 프로그램에 대해서 포스팅 하네요.
시간이 여유가 있으니 이제 슬슬 포스팅을 다시 시작을 해볼까 합니다. ㅎㅎ;;
이번 포스팅 내용은 SUMMERNOTE 입니다.
반응형 웹에서 사용하는 에디터 입니다.
우리나라 개발자가 만들었다고 하니 왠지 더 정감이 갑니다.
그리고 굉장히 깔끔하게 잘 만들었다고 생각합니다.
요즘 반응형 웹이 대세인데 딱 맞는 에디터가 이렇게 존재하고 있다니 그것도 우리나라 개발자들이 모여서 만든 솔루션이니 정말 대단하다 생각합니다.
설치가 잘 안되어서 1~2일 고생했네요.
이 고생을 다른 누군가 또 반복하지 않게 하기위해 이렇게 내용을 씁니다.
설치 방법은 우선 SUMMERNOTE 홈페이지 http://summernote.org/ 에서 프로그램을 다운받으면 됩니다.
summernote-develop 이라는 압축 파일을 다운받은 후
스크립트 파일과 jquery 파일을 추가 해주면 되는데
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="../dist/summernote.css">
<script type="text/javascript" src="../dist/summernote.js"></script>
위 처럼 링크만 걸어주면 끝!
그리고 그다음 해야 할일은 스크립트에 소스를 추가하면 됩니다.
<script type="text/javascript">
$(function() {
$('.summernote').summernote({
height: 200,
lang : 'ko-KR',
callbacks: {
onImageUpload : function(files, editor, welEditable) {
console.log('image upload:', files);
sendFile(files[0], editor, welEditable);
},
}
});
function sendFile(file,editor,welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
url: "saveimage.php", // image 저장 소스
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
// alert(data);
var image = $('<img>').attr('src', '' + data); // 에디터에 img 태그로 저장을 하기 위함
$('.summernote').summernote("insertNode", image[0]); // summernote 에디터에 img 태그를 보여줌
// editor.insertImage(welEditable, data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus+" "+errorThrown);
}
});
}
$('form').on('submit', function (e) {
e.preventDefault();
// alert($('.summernote').summernote('code'));
// alert($('.summernote').val());
});
});
</script>
저 위에 붉은색으로 표시한 부분 때문에 조금 애를 먹었네요. 원래 callback 을 안쓰고 작동을 한다고 해서 계속 수정을 했었는데 안되길래 구글링으로 조금 찾아보니 특정 버전에는 callback을 쓰라고 하더군요.
위 소스 보시면 url: "saveimage.php" 라는 부분이 있습니다.
이미지를 첨부했을경우 특정 폴더에 이미지를 저장해야하죠.
그래서 이미지 첨부시 이미지 저장 폴더에 saveimage.php 파일이 실시간 저장을 하게 합니다.
이미지 저장 시 중복된 이름의 첨부를 방지하기 위해서 조금 소스를 수정한 파일입니다.
-- saveimage.php --
<?
if ($_FILES['file']['name']) {
if (!$_FILES['file']['error']) {
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = 'upload/' . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo '사용자의 이미지 저장위치 url' . $filename;//change this URL
} else {
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
}
?>
위 처럼 작업을 하시면 됩니다.
혹시라도 저처럼 summernote 때문에 고생하는 분들이 없기를 바라면서
포스팅을 마칩니다.