티스토리 뷰

Spac Editor는 자바스크립트로 만들어진 Wysiwyg HTML Editor 입니다.
라이센스가 전체 무료이며 여러 브라우저를 지원합니다.
제작자인 Spac 님께 감사드리며...

동종업계 종사하시는 선배 한분이 어느날
Spac Editor를 적용하려 하는데 이미지 삽입 시도시 커서 위치에 이미지가 삽입되지 않는 문제가 발생한다고 하여 문제점이 뭔지 찾아보았습니다.

이하 '...다.' 체로 기술합니다.

IE에서는 커서위치에 삽입을 위해서는 선택부분을 얻어오는 스크립트를 사용해야 하는데
이미지 삽입 레이어창의 파일 찾아보기를 클릭하는 순간
에디터의 커서위치가 안드로메다로 날아가 버린다.

날아간 후는 에디터의 맨 처음에만 이미지가 입력되어버리는 문제가 발생!
하여 패치해 보았다.

spac_editor.js
function viewImageUploadForm(event) {
	editor.focus();
	// IE에서 input type=file 의 어느 부위든 클릭하면 에디터의 커서 위치가 상실되는 문제를 해결하기 위해 미리 변수에 저장해둔다.
	saveSelectionForIE();
	var width = 0;
	var height = 0;
	var box_width = 690;
	var table = "";
		table		+= "
"; table += "
image link window 이미지 업로드/삽입
"; table += "
close property window
"; table += "
"; table += ""; table += ""; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += " "; table += "
이미지파일 "; table += "
가로길이 px
세로길이 px
이미지정렬
이미지안내
하이퍼링크
"; table += ""; table += " "; table += " "; table += " "; table += ""; table += "
"; table += " "; table += "
"; table += ""; table += "
"; var left = (getScrollSize('width'))/2-(box_width/2); viewBlindScreen(table,event,left); } function inputImagelink(form) { var d = new Date(); var d_image_id = "I_"+d.getFullYear() +"_"+ (d.getMonth() + 1)+"_"+ d.getDate()+"_"+d.getHours()+"_"+d.getMinutes()+"_"+d.getSeconds(); //form.image_hyperlink_values.value = 'http://phpdev.co.kr/Spac_Editor/images/whats.png'; // 디버깅시 이 주석 풀고 하면 업로드 안해도 이미지 삽입 테스트 가능 if(form.image_hyperlink_values.value == '' || form.image_hyperlink_values.value == 'http://') { alert("삽입할 이미지를 먼저 입력해 주세요"); form.image_hyperlink_values.select(); return false; } var img_obj = document.getElementById('preview_images'); var html = ""; html = ""; if(form.link.value != '') { html = "" + html + ""; } editor.focus(); // IE에서 input type=file 의 어느 부위든 클릭하면 에디터의 커서 위치가 상실되는 문제를 해결하기 위해 미리 변수에 저장해둔 위치 변수를 통해 삽입. (isIE())? insertImageForIE(html) : makeHTML(html); hideBlindScreen(); return false; } // 아래부터는 추가한 함수들 function insertImageForIE(html) { editor.focus(); if(isIE()) { if (SelectRange) { SelectRange.pasteHTML(html); restoreSelection(SelectRange); } } } function saveSelectionForIE() { if(isIE()) SelectRange = editor.document.selection.createRange(); } function restoreSelection(range) { if (range) { if (window.getSelection) { sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.selection && range.select) { range.select(); } } }


댓글