잠시만 기다려 주세요


 
HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (781)  |  추천 및 재미 (53)  |  자료실 (18)  |  끄적거림 (456)  |  시나리오 (757)  |  드라마 대본 (248)  |  

2019년 07월 20일
너무 완벽하려 하지 말고 너무 집착하지도 말며 너무 소유하려 하지도 말라. 비우고 또 비우고 때로 가볍게 흘려야 할 때는 그렇게 하여라. - 바다아이
 

    javascript/jquery

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

키 누를 때마다 텍스트 창에도 입력됩니다.
바로바로 적용되는 것도 있고 스페이스나 글짜 하나 더 넣으면 그때그때 들어갑니다.
최종적으로 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
번 호 카테고리 제 목 이름 조회수
72 javascript/jquery select 3 바다아이 2
71 javascript/jquery , ... 바다아이 486
70 javascript/jquery , timezone, , ... moment.js 바다아이 501
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 567
68 javascript/jquery (block) , ... 바다아이 573
67 javascript/jquery textarea cursor , , focus 바다아이 580
66 javascript/jquery jquery ajax option .... 바다아이 656
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 661
64 javascript/jquery javascript , , , , () 바다아이 724
63 javascript/jquery javascript (date ) 바다아이 801
62 javascript/jquery CSS3 javascript 바다아이 695
61 javascript/jquery javascript , cookie, , , , , 바다아이 892
60 javascript/jquery javascript 바다아이 1053
59 javascript/jquery javascript / , , , 바다아이 1101
58 javascript/jquery url , , encode, decode ... 바다아이 826
57 javascript/jquery javascript ... frame location.href 바다아이 948
56 javascript/jquery File Upload Progress, .... . 바다아이 1014
55 javascript/jquery javascript, json , json Highlight 바다아이 1108
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 1120
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 1008
52 javascript/jquery javascript entity , , encode, decode 바다아이 1071
51 javascript/jquery javascript post, get , 바다아이 1311
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 1356
49 javascript/jquery jquery autocomplete , , . 바다아이 1132
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 1228
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 1162
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 991
45 javascript/jquery url encode decode , , , javascript 바다아이 1608
44 javascript/jquery javascript 바다아이 1007
43 javascript/jquery javascript, textarea tap . 바다아이 1041
| |






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