잠시만 기다려 주세요

     '애도와 추모가 책임있는 사람들에게 면죄부를 주어서는 안됩니다. -더불어 민주당 국회의원 김용민-'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (19)  |  여러가지 팁 (1095)  |  추천 및 재미 (163)  |  자료실 (28)  |  
시사, 이슈, 칼럼, 평론, 비평 (795)  |  끄적거림 (142)  |  문예 창작 (719)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!

    javascript/jquery

javascript/jquery - 웹 에디터 만들기 iframe 사용
이 름 : 바다아이   |   조회수 : 12858         짧은 주소 : https://www.bada-ie.com/su/?541591811732 
좀더 자세한 항목은 여기 를 참고하세요...

키 누를 때마다 텍스트 창에도 입력됩니다.
바로바로 적용되는 것도 있고 스페이스나 글짜 하나 더 넣으면 그때그때 들어갑니다.
최종적으로 form 넘길 때는 다 들어갑니다.

퍼온 예제입니다. 근데 firefox 에서 문제가 있길래 대충 소스 조금 덧붙였습니다. 
웹에디터 만드는 것은 원리는 같지만 방법은 여러가지 입니다. 또 브라우저 호환성도 생각해야 하구요..
생각보다 웹에디터가 노가다입니다. 글자색, 링크 등등 같은 것은 레이어 만들어서 기능 또 만들어야 합니다.
제일 좋은 방법은 이미 잘 만들어진 것을 가져다 쓰는 것입니다. ^^;
그냥 원리만 알아두세요... 이미 있는 것을 또 만들 필요는 없습니다.. 
그때그때 가져다 쓰시고 없는 뭔가가 필요할 때 그 뭔가를 아래 원리 참고해서 만드시면 됩니다.


아래는 예제입니다. 흘러가는 줄기만 보세요... 
실제 새로 만든다면 구조부터 작업 할 노가다가 엄청납니다. -.-;


<HTML>

<HEAD>
    <TITLE>웹에디터 예제5</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <SCRIPT langauge="javascript">
        function htmledit(excute, values) {
            if (values == null) {
                dhtmlframe.document.execCommand(excute);
            } else {
                dhtmlframe.document.execCommand(excute, "", values);
            }

        }

        function datasubmit() {
            form.comment.value = dhtmlframe.document.body.innerHTML;
        }
    </SCRIPT>
</HEAD>

<BODY>
    <form name=form method=post action="test.php">

        <A href="javascript:htmledit('justifyleft');">좌측정렬</a>
        <A href="javascript:htmledit('justifycenter');">중심정렬</a>
        <A href="javascript:htmledit('justifyright');">우측정렬</a>
        <A href="javascript:htmledit('insertorderedlist');">점표시목록</a>
        <A href="javascript:htmledit('insertunorderedlist');">숫자목록</a>
        <A href="javascript:htmledit('outdent');">들여쓰기줄이기</a>
        <A href="javascript:htmledit('indent');">들여쓰기늘이기</a>
        <A href="javascript:htmledit('createlink', 'http://aa');">링크</a>
        <BR> 글꼴 >
        <A href="javascript:htmledit('fontname','굴림');">굴림</a>
        <A href="javascript:htmledit('fontname','궁서');">궁서</a> 글크기 >
        <A href="javascript:htmledit('fontSize',2);">2</a>
        <A href="javascript:htmledit('fontSize',3);">3</a>
        <A href="javascript:htmledit('fontSize',4);">4</a>
        <A href="javascript:htmledit('bold');">볼드</A>
        <A href="javascript:htmledit('italic');">이탤릭</A>
        <A href="javascript:htmledit('underline');">언더라인</A>

        <P>
            <IFRAME id="dhtmlframe" name="dhtmlframe"></IFRAME>
            <P>
                <TEXTAREA NAME="comment" ROWS="3"></TEXTAREA>
            </P>
            <P><input type="submit" value="확인" Onclick="datasubmit()">
    </form>

    <SCRIPT>
        function InitEditable() {
            var editor = document.getElementById("dhtmlframe");
            var editorDoc = editor.contentWindow.document;
            var editorBody = editorDoc.body;

            // turn off spellcheck
            if ('spellcheck' in editorBody) { // Firefox
                editorBody.spellcheck = false;
            }

            if ('contentEditable' in editorBody) {
                // allow contentEditable
                editorBody.contentEditable = true;
            } else { // Firefox earlier than version 3
                if ('designMode' in editorDoc) {
                    // turn on designMode
                    editorDoc.designMode = "on";
                }
            }
        }

        window.onload = function() {
            InitEditable();
            document.getElementById("dhtmlframe").contentWindow.document.onkeypress = gogo;
            document.getElementById("dhtmlframe").contentWindow.document.onkeyup = gogo;
            document.getElementById('dhtmlframe').contentWindow.document.onkeydown = gogo;            
        }

        function gogo() {
            form.comment.value = dhtmlframe.document.body.innerHTML;
        }
    </SCRIPT>

</BODY>

</HTML>


http://www.i-nux.co.kr

출처 : http://www.mins01.com/home/board/board.php?type=read&b_id=tech&page=42&b_idx=240
| |





      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
77 javascript/jquery 자바스크립트 이미지 확인 함수.... 바다아이 339
76 javascript/jquery 스크롤해도 상단에 고정되는 메뉴 만들기, 스크롤 상단에 레이어 고정. 바다아이 8266
75 javascript/jquery 자바스크립트 스크롤을 문서 화면 상단, 하단으로 이동하기. 스크롤을 시작, 끝으로 이동하기 바다아이 6463
74 javascript/jquery javascript 서버시간 가져오기, 서버날짜 가져오기... 바다아이 8311
73 javascript/jquery 자바스크립트 쿠키 클래스, cookie class 바다아이 8928
72 javascript/jquery select 박스 3단 카테고리 바다아이 9908
71 javascript/jquery 자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기... 바다아이 9167
70 javascript/jquery 자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js 바다아이 11891
69 javascript/jquery textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기... 바다아이 11589
68 javascript/jquery 마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기... 바다아이 9469
67 javascript/jquery textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus 바다아이 13008
66 javascript/jquery jquery ajax option 옵션 총 정리.... 바다아이 10012
65 javascript/jquery jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제 바다아이 9632
64 javascript/jquery javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림) 바다아이 10621
63 javascript/jquery javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체) 바다아이 10764
62 javascript/jquery CSS3 회전 속성과 javascript를 활용한 아날로그 시계 바다아이 11452
61 javascript/jquery javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기 바다아이 10527
60 javascript/jquery javascript 자바스크립트 날짜 계산하는 다양한 방법 바다아이 11255
59 javascript/jquery 자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어 바다아이 14867
58 javascript/jquery url 인코드, 디코드, encode, decode 예제... 바다아이 9704
57 javascript/jquery javascript 자바스크립트 프레임 페이지 이동... frame location.href 바다아이 15383
56 javascript/jquery File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현. 바다아이 10209
55 javascript/jquery 자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight 바다아이 10198
54 javascript/jquery 자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환 바다아이 11673
53 javascript/jquery 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점... 바다아이 10203
52 javascript/jquery 자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode 바다아이 10517
51 javascript/jquery 자바스크립트 javascript post, get 값 파라미터 받기, 구하기 바다아이 12471
50 javascript/jquery 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click 바다아이 10577
49 javascript/jquery jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제. 바다아이 10207
48 javascript/jquery 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete 바다아이 11242
1
2
3
| |









Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천  실행시간 : 0.17347 초
to webmaster... gogo sea. gogo sea.