티스토리 뷰
Spac Editor는 자바스크립트로 만들어진 Wysiwyg HTML Editor 입니다.
라이센스가 전체 무료이며 여러 브라우저를 지원합니다.
제작자인 Spac 님께 감사드리며...
동종업계 종사하시는 선배 한분이 어느날
Spac 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 += "이미지 업로드/삽입"; 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 += ""; 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(); } } }"; table += ""; table += " "; table += " "; table += " "; table += ""; table += "
이미지파일 "; table += " 가로길이 px 세로길이 px 이미지정렬 이미지안내 하이퍼링크 "; table += ""; table += "
"; table += " "; table += "
'웹프로그래밍 > js' 카테고리의 다른 글
Wysiwyg CKEditor IE 9 이상에서 iframe 액세스 오류 (0) | 2013.03.08 |
---|---|
동적 스크립트 삽입 (0) | 2013.02.07 |
jQuery.text() 하면 newline 날아가는것 방지 (0) | 2012.04.06 |
IE 8 이하에서 window.opener null undefined 오류시 (0) | 2012.03.13 |
[Sencha Touch] Theme 생성을 위한 Ruby, SASS, Compass (0) | 2012.03.08 |
댓글
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- Make Use Of
- How to geek
- 인터넷 통계정보 검색시스템
- 트위터 공유 정보모음
- 웹표준KR
- 치우의 컴맹탈출구
- Dev. Cheat Sheets
- w3schools
- Dev. 조각들
- ASP Ajax Library
- CSS Tricks
- WebResourcesDepot
- jQuery Selectors Tester
- DeveloperSnippets
- Smashing Magazine
- Nettuts+
- devListing
- 웹 리소스 사이트(한)
- Mobile tuts+
- Dream In Code
- Developer Tutorials
- CSS3 Previews
- 자북
- 안드로이드 사이드
- Code Visually
- Code School
- SQLer.com
- 무료 파워포인트 템플릿
- iconPot
- Free PowerPoint Templates
- Design Bombs
- Web Designer Wall
- 1st Webdesigner
- Vandelay Design
- 무료 벡터 이미지 사이트들
- Tripwire Magazine
- Web TrendSet
- WebMonkey
- 윤춘근 프리젠테이션 디자이너 블로그
- cz.cc 무료 DNS
- [웹하드] MediaFire
- [웹하드] DivShare
- 한컴 인터넷 오피스
TAG
- centos
- Chrome
- ASP
- Linux
- iphone
- laravel
- IE
- Wordpress
- classic asp
- nodejs
- Android
- PHP
- sencha touch
- 안드로이드
- IOS
- mssql
- Prototype
- CSS
- Docker
- javascript
- iis
- Debug
- nginx
- Mac
- JSON
- git
- 한글
- 워드프레스
- API
- JQuery
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함