아래 소스에 대해 설명 좀 부탁드립니다...ㅠ.ㅠ 정보
아래 소스에 대해 설명 좀 부탁드립니다...ㅠ.ㅠ
본문
this.insert_image = function(obj) {
this.clear_option();
this.get_range();
this.get_range();
var self = this;
var div = this.get_option_div(obj, 200);
div.id = "geditor_option_image_div";
div.innerHTML = '<div><b>이미지 파일 입력</b></div>';
div.id = "geditor_option_image_div";
div.innerHTML = '<div><b>이미지 파일 입력</b></div>';
ge_is_empty = document.createElement('input');
ge_is_empty.type = 'hidden';
ge_is_empty.id = 'ge_is_empty';
ge_is_empty.value = 'true';
ge_is_empty.type = 'hidden';
ge_is_empty.id = 'ge_is_empty';
ge_is_empty.value = 'true';
div.appendChild(ge_is_empty);
var img_div = document.createElement("div");
img_div.style.width = '300px';
img_div.style.height = '100px';
img_div.style.border = '1px solid #ccc';
img_div.style.paddingTop = '10px';
img_div.style.paddingBottom = '10px';
img_div.style.marginBottom = '10px';
img_div.style.textAlign = 'center';
img_div.style.backgroundColor = '#ccc';
img_div.style.width = '300px';
img_div.style.height = '100px';
img_div.style.border = '1px solid #ccc';
img_div.style.paddingTop = '10px';
img_div.style.paddingBottom = '10px';
img_div.style.marginBottom = '10px';
img_div.style.textAlign = 'center';
img_div.style.backgroundColor = '#ccc';
ge_image_preview = document.createElement("img");
ge_image_preview.id = ge_name + '_image';
ge_image_preview.style.width = '100px';
ge_image_preview.style.height = '100px';
ge_image_preview.style.backgroundColor = '#fff';
ge_image_preview.src = ge_empty_path;
ge_image_preview.onerror = function() { this.src = ge_empty_path; ge_is_empty.value = 'true'; }
ge_image_preview.id = ge_name + '_image';
ge_image_preview.style.width = '100px';
ge_image_preview.style.height = '100px';
ge_image_preview.style.backgroundColor = '#fff';
ge_image_preview.src = ge_empty_path;
ge_image_preview.onerror = function() { this.src = ge_empty_path; ge_is_empty.value = 'true'; }
img_div.appendChild(ge_image_preview);
var file_div = document.createElement("div");
var form = document.createElement('form');
form.id = "geditor_image_form";
form.method = 'post';
form.encoding = 'multipart/form-data';
form.target = "geditor_"+ge_name+"_hidden_frame";
form.action = ge_path + '/upload.php';
form.style.margin = '0';
form.style.padding = '0';
form.style.fontSize = 12;
form.innerHTML = '파일 : ';
form.id = "geditor_image_form";
form.method = 'post';
form.encoding = 'multipart/form-data';
form.target = "geditor_"+ge_name+"_hidden_frame";
form.action = ge_path + '/upload.php';
form.style.margin = '0';
form.style.padding = '0';
form.style.fontSize = 12;
form.innerHTML = '파일 : ';
var obj = document.createElement('input');
obj.type = 'hidden';
obj.name = 'obj';
obj.value = ge_name;
form.appendChild(obj);
obj.type = 'hidden';
obj.name = 'obj';
obj.value = ge_name;
form.appendChild(obj);
var token = document.createElement('input');
token.type = 'hidden';
token.name = 'token';
token.value = Math.floor(Math.random()*10000);
form.appendChild(token);
token.type = 'hidden';
token.name = 'token';
token.value = Math.floor(Math.random()*10000);
form.appendChild(token);
var work = document.createElement('input');
work.id = "geditor_image_form_work";
work.type = 'hidden';
work.name = 'work';
work.value = 'upload';
form.appendChild(work);
work.id = "geditor_image_form_work";
work.type = 'hidden';
work.name = 'work';
work.value = 'upload';
form.appendChild(work);
var input_file = document.createElement("input");
input_file.type = 'file';
input_file.name = 'image';
input_file.style.height = '22px';
input_file.size = 15;
input_file.onchange = function() {
if (this.value) {
ge_is_empty.value = 'false';
input_addr.value = 'http://';
work.value = 'upload';
form.submit();
}
}
form.appendChild(input_file)
input_file.type = 'file';
input_file.name = 'image';
input_file.style.height = '22px';
input_file.size = 15;
input_file.onchange = function() {
if (this.value) {
ge_is_empty.value = 'false';
input_addr.value = 'http://';
work.value = 'upload';
form.submit();
}
}
form.appendChild(input_file)
var input = document.createElement("input");
input.type = 'button';
input.value = '삭제';
input.onclick = function() {
work.value = 'delete';
form.submit();
ge_image_preview.src = ge_empty_path;
ge_is_empty.value = 'true';
input_addr.value = 'http://';
}
form.appendChild(input);
input.type = 'button';
input.value = '삭제';
input.onclick = function() {
work.value = 'delete';
form.submit();
ge_image_preview.src = ge_empty_path;
ge_is_empty.value = 'true';
input_addr.value = 'http://';
}
form.appendChild(input);
file_div.appendChild(form);
var addr_div = document.createElement("div");
addr_div.style.fontSize = 12;
addr_div.innerHTML = '주소 : ';
addr_div.style.fontSize = 12;
addr_div.innerHTML = '주소 : ';
var pre = null;
var input_addr = document.createElement("input");
input_addr.type = 'text';
input_addr.style.height = '22px';
input_addr.size = 30;
input_addr.value = 'http://';
input_addr.onkeyup = function() {
clearTimeout(pre);
pre = setTimeout(function() {
if (input_file.value && ge_image_preview.src) {
work.value = 'delete';
form.submit();
}
ge_image_preview.src = input_addr.value;
ge_is_empty.value = 'false';
}, 1000);
}
input_addr.type = 'text';
input_addr.style.height = '22px';
input_addr.size = 30;
input_addr.value = 'http://';
input_addr.onkeyup = function() {
clearTimeout(pre);
pre = setTimeout(function() {
if (input_file.value && ge_image_preview.src) {
work.value = 'delete';
form.submit();
}
ge_image_preview.src = input_addr.value;
ge_is_empty.value = 'false';
}, 1000);
}
addr_div.appendChild(input_addr);
var align_div = document.createElement("div");
align_div.style.fontSize = 12;
align_div.innerHTML = '정렬 : ';
align_div.style.fontSize = 12;
align_div.innerHTML = '정렬 : ';
var align_select = document.createElement("select");
align_option_items = ['기본', '좌측정렬', '중앙정렬', '우측정렬'];
align_option_value = ['', 'left', 'center', 'right'];
align_option_value = ['', 'left', 'center', 'right'];
for (i=0; i<align_option_items.length; i++) {
var align_option = document.createElement("option");
align_option.value = align_option_value[i];
align_option.innerHTML = align_option_items[i];
align_select.appendChild(align_option);
}
align_div.appendChild(align_select);
var align_option = document.createElement("option");
align_option.value = align_option_value[i];
align_option.innerHTML = align_option_items[i];
align_select.appendChild(align_option);
}
align_div.appendChild(align_select);
var info_div = document.createElement('div');
info_div.style.paddingTop = '10px';
info_div.style.paddingBottom = '5px';
info_div.style.color = '#717171';
//info_div.innerHTML = '파일업로드가 주소입력보다 우선합니다.';
info_div.style.paddingTop = '10px';
info_div.style.paddingBottom = '5px';
info_div.style.color = '#717171';
//info_div.innerHTML = '파일업로드가 주소입력보다 우선합니다.';
var button_div = document.createElement('div');
button_div.style.width = '300px';
button_div.style.textAlign = 'center';
button_div.style.paddingTop = '10px';
button_div.style.paddingBottom = '10px';
button_div.style.width = '300px';
button_div.style.textAlign = 'center';
button_div.style.paddingTop = '10px';
button_div.style.paddingBottom = '10px';
var submit = this.button('확인');
submit.onclick = function() {
if (ge_is_empty.value != 'true') {
file = ge_image_preview.src;
where = align_select.value;
html = "<img src=\"" + file + "\" align=\"" + where + "\" border=1><br/>\n";
if (where == 'center')
html = "<div align=\"center\">" + html + "</div>";
ge_is_image = true;
self.insert_editor(html);
} else {
self.clear_option();
}
}
submit.onclick = function() {
if (ge_is_empty.value != 'true') {
file = ge_image_preview.src;
where = align_select.value;
html = "<img src=\"" + file + "\" align=\"" + where + "\" border=1><br/>\n";
if (where == 'center')
html = "<div align=\"center\">" + html + "</div>";
ge_is_image = true;
self.insert_editor(html);
} else {
self.clear_option();
}
}
var close = this.button('닫기');
close.onclick = function() {
self.clear_option();
}
close.onclick = function() {
self.clear_option();
}
button_div.appendChild(submit);
button_div.appendChild(close);
button_div.appendChild(close);
div.appendChild(img_div);
div.appendChild(file_div);
div.appendChild(addr_div);
div.appendChild(align_div);
div.appendChild(info_div);
div.appendChild(button_div);
document.body.appendChild(div);
}
div.appendChild(file_div);
div.appendChild(addr_div);
div.appendChild(align_div);
div.appendChild(info_div);
div.appendChild(button_div);
document.body.appendChild(div);
}
this.button = function(text) {
var btn = document.createElement("input");
btn.type = 'button';
btn.value = text;
btn.style.backgroundColor = '#ffffff';
btn.style.border = '1px solid #ccc';
btn.style.width = '40px';
btn.style.height = '22px';
btn.style.marginLeft = '10px';
return btn;
}
var btn = document.createElement("input");
btn.type = 'button';
btn.value = text;
btn.style.backgroundColor = '#ffffff';
btn.style.border = '1px solid #ccc';
btn.style.width = '40px';
btn.style.height = '22px';
btn.style.marginLeft = '10px';
return btn;
}
this.insert_image_preview = function(file) {
ge_image_preview.src = file;
}
ge_image_preview.src = file;
}
에스아이알의 geditor.js의 일부분입니다.(죄송합니다).
위의 스크립트의 각 행별 역활을 좀 알고 싶습니다.
댓글 전체
자체 해결했습니다.....ㅠ.ㅠ
덕분에 자바스크립트에 대해서 조금 더 배웠습니다.
덕분에 자바스크립트에 대해서 조금 더 배웠습니다.
축하 드립니다.^^
전 봐도 뭐가뭔지 모르겠네요.ㅠㅠ
전 봐도 뭐가뭔지 모르겠네요.ㅠㅠ
자유게시판에 장착된 에디터 업어갔습니다.....ㅋ.ㅋ
이미지 미리보기를 못해 헤메다가 해경하고 벌레 테스트 중입니다.....^^
이미지 미리보기를 못해 헤메다가 해경하고 벌레 테스트 중입니다.....^^
포인트 감사합니다.^^ 생각지도 못한 횡재를 했네요.
벌레 잡고나면 떡고물이라도 얻어먹을수 있겠죠.ㅎㅎ
벌레 잡고나면 떡고물이라도 얻어먹을수 있겠죠.ㅎㅎ
헉. 포인트가..
아직 좀 남았습니다...^^
페이지를 <DIV> 코딩을 해서 적용을 하니 iframe 창이 모두 바닥으로 내려가서 잡아야 합니다...(불여시)....ㅠ.ㅠ
페이지를 <DIV> 코딩을 해서 적용을 하니 iframe 창이 모두 바닥으로 내려가서 잡아야 합니다...(불여시)....ㅠ.ㅠ