잠시만 기다려 주세요


 
HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (804)  |  추천 및 재미 (75)  |  자료실 (17)  |  끄적거림 (467)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2019년 10월 15일
걷는 것은 문제가 되지 않는다. 가끔 뛰면 되니까.. 다만 걷지 않으려는 게으름이 문제일 뿐... - 바다아이
 




    javascript/jquery

javascript/jquery - 웹 에디터 만들기 iframe 사용
이 름 : 바다아이   |   조회수 : 2604         짧은 주소 : 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
번 호 카테고리 제 목 이름 조회수
73 javascript/jquery , cookie class 바다아이 45
72 javascript/jquery select 3 바다아이 263
71 javascript/jquery , ... 바다아이 762
70 javascript/jquery , timezone, , ... moment.js 바다아이 764
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 851
68 javascript/jquery (block) , ... 바다아이 823
67 javascript/jquery textarea cursor , , focus 바다아이 919
66 javascript/jquery jquery ajax option .... 바다아이 943
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 950
64 javascript/jquery javascript , , , , () 바다아이 1018
63 javascript/jquery javascript (date ) 바다아이 1111
62 javascript/jquery CSS3 javascript 바다아이 1058
61 javascript/jquery javascript , cookie, , , , , 바다아이 1206
60 javascript/jquery javascript 바다아이 1368
59 javascript/jquery javascript / , , , 바다아이 1464
58 javascript/jquery url , , encode, decode ... 바다아이 1114
57 javascript/jquery javascript ... frame location.href 바다아이 1237
56 javascript/jquery File Upload Progress, .... . 바다아이 1367
55 javascript/jquery javascript, json , json Highlight 바다아이 1431
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 1465
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 1345
52 javascript/jquery javascript entity , , encode, decode 바다아이 1417
51 javascript/jquery javascript post, get , 바다아이 1842
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 1668
49 javascript/jquery jquery autocomplete , , . 바다아이 1475
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 1577
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 1499
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 1269
45 javascript/jquery url encode decode , , , javascript 바다아이 1969
44 javascript/jquery javascript 바다아이 1291
| |




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