네이버에서 제공하는 오픈프로젝트 소스인 스마트 에디터에서는 기본적으로 이미지 삽입하기 기능이 툴바에 없다.
그래서, 지금까지 별개로 첨부파일을 업로드한 후에 나중에 화면에 뿌려줄 때 이 첨부파일을 불러오는 방법을 쓰고 있었는데, 이럴 경우 스마트 에디터에서 입력한 내용과를 별개로 상단이나 하단에 첨부한 이미지를 보여줄 수 밖에 없어 사실 좀 불편했는데, 스마트 에디터 프로젝트 이슈 게시판을 모니터링하던 중 ASP용으로 만들어진 것을 PHP로 포팅한 소스가 있어 다운받아 보았다.
그런데, IE나 사파리에서는 문제없이 에디터가 로딩이 되지만, 이상하게도 파이어폭스에서만은 에디터가 로딩이 되지 않았다. ㅠㅠ
브라우저-프리를 추구하고 있으므로 이것을 어떻게 변경해서 써보려 했지만 내 실력에 역부족...쩝
그래서, 네이버 게시판에서 하듯이 툴바가 아닌 별도의 기능을 통해 삽입하기로 했다.
(다음 에디터를 써보려고 했으나, 너무 복잡하여 역시나 포기...이미지 삽입은 마찬가지로 툴바차원에서 구현이 안되어 있는 듯하다.)
위의 화면이 거의 하루동안 낑낑대다가 찾아낸 방법이다.
(사실은 input hidden값에 name을 지정하지 않아서 자바스크립트가 실행되지 않는 어처구니 없는...ㅠㅠ)
기본 스마트 에디터는 손대지 않고 (그럴 능력도 없지만), 팝업창을 띄운 후에 이미지를 미리 서버에 업로드하고 그것을 에디터에 삽입하는 방식이다.
사실, 이 방법의 힌트는 이미 데모 페이지에 나와 있다.
다만, 지금까지 그것을 제대로 쓸 줄 몰랐을 뿐이다.
이 방법의 핵심은 데모 페이지에도 있는 pasteHTMLDemo() 함수이다.
원래는 HTML 태그를 삽입하는 함수인 것 같은데, <img> 태그도 역시나 사용할 수 있으므로 결국 이미지 삽입이 가능하단 얘기다.
위의 함수를 사용하는 방법은 이슈게시판에 올라온 소스에서 힌트를 얻었다.
어쨌거나, 데모 페이지에 아래의 소스들만 추가나 수정을 했다.
사실 여러 개의 에디터를 쓰지 않기 때문에 id 부분을 생략하거나 하드코딩을 할 수도 있는데, 유연성과 확장성을 위해 변수로 처리하기로 했다.
뭐 위의 소스를 보면 알겠지만 별거 없다.
그냥 이미지를 서버에 업로드하는 기능이다.
그리고, submit가 끝난 후에 ok 값을 넘겨받아 "확인" 버튼을 띄워준 뒤에 누르면 이미지가 에디터에 삽입되는 방식이다.
위의 소스는 submit된 결과를 처리하는 페이지이다.
이미지명은 중복되지 않도록 처리했고, 최종 처리된 파일명과 함께 에디터의 id값을 넘겨준다.
팝업 창을 띄운 후의 일련의 과정들이다.
여기까지 간단 이미지 삽입방법~!
스마트 에디터가 업데이트되거나 하더라도 문제없이 사용이 가능하다.
중요한 단점은 서버에 미리 이미지를 업로드하기 때문에 에디터에서 지워버려도 서버에는 쓰레기 파일이 남는다는 것...이 점은 해결과제.
그래서, 지금까지 별개로 첨부파일을 업로드한 후에 나중에 화면에 뿌려줄 때 이 첨부파일을 불러오는 방법을 쓰고 있었는데, 이럴 경우 스마트 에디터에서 입력한 내용과를 별개로 상단이나 하단에 첨부한 이미지를 보여줄 수 밖에 없어 사실 좀 불편했는데, 스마트 에디터 프로젝트 이슈 게시판을 모니터링하던 중 ASP용으로 만들어진 것을 PHP로 포팅한 소스가 있어 다운받아 보았다.
그런데, IE나 사파리에서는 문제없이 에디터가 로딩이 되지만, 이상하게도 파이어폭스에서만은 에디터가 로딩이 되지 않았다. ㅠㅠ
브라우저-프리를 추구하고 있으므로 이것을 어떻게 변경해서 써보려 했지만 내 실력에 역부족...쩝
그래서, 네이버 게시판에서 하듯이 툴바가 아닌 별도의 기능을 통해 삽입하기로 했다.
(다음 에디터를 써보려고 했으나, 너무 복잡하여 역시나 포기...이미지 삽입은 마찬가지로 툴바차원에서 구현이 안되어 있는 듯하다.)
위의 화면이 거의 하루동안 낑낑대다가 찾아낸 방법이다.
(사실은 input hidden값에 name을 지정하지 않아서 자바스크립트가 실행되지 않는 어처구니 없는...ㅠㅠ)
기본 스마트 에디터는 손대지 않고 (그럴 능력도 없지만), 팝업창을 띄운 후에 이미지를 미리 서버에 업로드하고 그것을 에디터에 삽입하는 방식이다.
사실, 이 방법의 힌트는 이미 데모 페이지에 나와 있다.
다만, 지금까지 그것을 제대로 쓸 줄 몰랐을 뿐이다.
이 방법의 핵심은 데모 페이지에도 있는 pasteHTMLDemo() 함수이다.
원래는 HTML 태그를 삽입하는 함수인 것 같은데, <img> 태그도 역시나 사용할 수 있으므로 결국 이미지 삽입이 가능하단 얘기다.
위의 함수를 사용하는 방법은 이슈게시판에 올라온 소스에서 힌트를 얻었다.
어쨌거나, 데모 페이지에 아래의 소스들만 추가나 수정을 했다.
(SEditorDemo.html)
<body>
<p>
<a href="#" onclick="javascript:window.open('uploader.php?id=ir1', 'uploader', 'width=300, height=200');">이미지 삽입</a>
</p>
.... (중략) ...
<script>
...
function pasteHTMLDemo(id, sHTML){
oEditors.getById[id].exec("PASTE_HTML", [sHTML]);
}
...
</script>
<body>
<p>
<a href="#" onclick="javascript:window.open('uploader.php?id=ir1', 'uploader', 'width=300, height=200');">이미지 삽입</a>
</p>
.... (중략) ...
<script>
...
function pasteHTMLDemo(id, sHTML){
oEditors.getById[id].exec("PASTE_HTML", [sHTML]);
}
...
</script>
사실 여러 개의 에디터를 쓰지 않기 때문에 id 부분을 생략하거나 하드코딩을 할 수도 있는데, 유연성과 확장성을 위해 변수로 처리하기로 했다.
(uploader.php)
<head>
<script type="text/javascript">
function putImg(id, file) {
opener.pasteHTMLDemo(id, file);
self.close();
}
</script>
</head>
<body>
<?php
if($mode == "ok") {
?>
<p>image uploaded!</p>
<a href="#" onclick="javascript:putImg('<?=$_GET['id']?>', '<img src=http://www.test.co.kr/<?=$_GET['file']?>>');">확인</a>
<?php
}else {
?>
<form action="uploader_ok.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="id" value="<?=$_GET['id']?>" />
<input type="file" name="uploadedfile" /><input type="submit" value="업로드" />
</form>
<?php
}
?>
</body>
<head>
<script type="text/javascript">
function putImg(id, file) {
opener.pasteHTMLDemo(id, file);
self.close();
}
</script>
</head>
<body>
<?php
if($mode == "ok") {
?>
<p>image uploaded!</p>
<a href="#" onclick="javascript:putImg('<?=$_GET['id']?>', '<img src=http://www.test.co.kr/<?=$_GET['file']?>>');">확인</a>
<?php
}else {
?>
<form action="uploader_ok.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="id" value="<?=$_GET['id']?>" />
<input type="file" name="uploadedfile" /><input type="submit" value="업로드" />
</form>
<?php
}
?>
</body>
뭐 위의 소스를 보면 알겠지만 별거 없다.
그냥 이미지를 서버에 업로드하는 기능이다.
그리고, submit가 끝난 후에 ok 값을 넘겨받아 "확인" 버튼을 띄워준 뒤에 누르면 이미지가 에디터에 삽입되는 방식이다.
(uploader_ok.php)
<?php
function show_msg($msg, $url) {
echo "<meta HTTP-EQUIV='CONTENT-TYPE' content='text/html;charset=UTF-8'>
<script language=\"JavaScript\">
alert(\"$msg\");
document.location.replace(\"$url\");
</script>";
}
$max_file_size = 1024000;
$uploaddir = 'upload/'; //서버에 저장될 디렉토리의 권한은 777로 해둔다.
$url = "uploader.php?id=".$_POST['id']; //에러 발생 시 돌아갈 URL
if($_FILES['uploadedfile']['name'] != "") {
// 중복되지 않는 파일로 만든다
$tmpfile = $uploaddir.substr(md5(uniqid($g4[server_time])),0,8)."_".$_FILES['uploadedfile']['name'];
//공백이 있는 파일명을 "_"로 수정
$tmpfile = str_replace(" ","_", $tmpfile);
$filename = $tmpfile;
$chk_file = explode('.', $filename);
$extension = $chk_file[sizeof($chk_file)-1];
if($extension == 'html' || $extension == 'htm' || $extension == 'php' || $extension == 'asp' || $extension == 'jsp' || $extension == 'exe') {
$errmsg = $_FILES['uploadedfile']['name'].' 파일은 금지된 확장자입니다.';
show_msg($errmsg, $url);
exit;
}
//파일용량 확인
if($_FILES['uploadedfile']['size'] > $max_file_size) {
$errmsg = $_FILES['uploadedfile']['name'].' 파일 용량이 너무 큽니다.';
show_msg($errmsg, $url);
exit;
}
move_uploaded_file($_FILES["uploadedfile"]["tmp_name"], $filename);
}
?>
<meta http-equiv='Refresh' content='0; URL="uploader.php?mode=ok&id=<?=$_POST['id']?>&file=<?=$filename?>" ' />
<?php
function show_msg($msg, $url) {
echo "<meta HTTP-EQUIV='CONTENT-TYPE' content='text/html;charset=UTF-8'>
<script language=\"JavaScript\">
alert(\"$msg\");
document.location.replace(\"$url\");
</script>";
}
$max_file_size = 1024000;
$uploaddir = 'upload/'; //서버에 저장될 디렉토리의 권한은 777로 해둔다.
$url = "uploader.php?id=".$_POST['id']; //에러 발생 시 돌아갈 URL
if($_FILES['uploadedfile']['name'] != "") {
// 중복되지 않는 파일로 만든다
$tmpfile = $uploaddir.substr(md5(uniqid($g4[server_time])),0,8)."_".$_FILES['uploadedfile']['name'];
//공백이 있는 파일명을 "_"로 수정
$tmpfile = str_replace(" ","_", $tmpfile);
$filename = $tmpfile;
$chk_file = explode('.', $filename);
$extension = $chk_file[sizeof($chk_file)-1];
if($extension == 'html' || $extension == 'htm' || $extension == 'php' || $extension == 'asp' || $extension == 'jsp' || $extension == 'exe') {
$errmsg = $_FILES['uploadedfile']['name'].' 파일은 금지된 확장자입니다.';
show_msg($errmsg, $url);
exit;
}
//파일용량 확인
if($_FILES['uploadedfile']['size'] > $max_file_size) {
$errmsg = $_FILES['uploadedfile']['name'].' 파일 용량이 너무 큽니다.';
show_msg($errmsg, $url);
exit;
}
move_uploaded_file($_FILES["uploadedfile"]["tmp_name"], $filename);
}
?>
<meta http-equiv='Refresh' content='0; URL="uploader.php?mode=ok&id=<?=$_POST['id']?>&file=<?=$filename?>" ' />
위의 소스는 submit된 결과를 처리하는 페이지이다.
이미지명은 중복되지 않도록 처리했고, 최종 처리된 파일명과 함께 에디터의 id값을 넘겨준다.
팝업 창을 띄운 후의 일련의 과정들이다.
여기까지 간단 이미지 삽입방법~!
스마트 에디터가 업데이트되거나 하더라도 문제없이 사용이 가능하다.
중요한 단점은 서버에 미리 이미지를 업로드하기 때문에 에디터에서 지워버려도 서버에는 쓰레기 파일이 남는다는 것...이 점은 해결과제.
'네이버 스마트에디터' 카테고리의 다른 글
| 네이버 오픈소스 스마트에디터 이미지 업로드 방법 (1) | 2012.09.21 |
|---|---|
| 네이버 스마트에디터 풍부한 스타일을 사용하려면 (0) | 2009.02.11 |
| 네이버 스마트에디터 사용 중에... (2) | 2009.02.04 |
| 네이버 스마트에디터 사용하기 (0) | 2009.01.21 |
