index.html | searchcode

/apps/sunteks/index.html

https://bitbucket.org/Rabitya/waw
HTML | 217 lines | 72 code | 2 blank | 143 comment | 0 complexity | bedeae07984d0f508350fea3a406533a MD5 | raw file

<!DOCTYPE html>

<html>



<head>

    <title>Sunteks - Penyunting Teks</title>

    <link href="style.css" rel="stylesheet" />

</head>



<body onLoad="initialize()">

    <iframe id="colorpalette" src="color_palette.html"></iframe>

    <div id="main">

        <nav>

            <button class="button" onClick="formatTeks('cut')"><img src="icon/cut.png" title="Cut" /></button>

            <button class="button" onClick="formatTeks('copy')"><img src="icon/copy.png" title="Copy" /></button>

            <button class="button" onClick="formatTeks('paste')"><img src="icon/paste.png" title="Paste" /></button>

            <button class="button" onClick="formatTeks('undo')"><img src="icon/undo.png" title="Undo" /></button>

            <button class="button" onClick="formatTeks('redo')"><img src="icon/redo.png" title="Redo" /></button>

            &nbsp;|&nbsp;

            <button class="button" id="createlink" onClick="formatTeks('createlink')"><img src="icon/insert_link.png" title="Insert Link" /></button>

            <button class="button" id="insertimage" onClick="formatTeks('insertimage')"><img src="icon/insert_image.png" title="Insert Image" /></button>

            <button class="button" id="createtable" onClick="formatTeks('createtable')"><img src="icon/table.png" title="Insert Table" /></button>

        </nav>

        <nav>

            <select id="block" class="select" onChange="formatTeks('formatblock',this[this.selectedIndex].value)">

                <option value="<p>">Normal</option>

                <option value="<p>">Paragraph</option>

                <option value="<h1>">Heading 1</option>

                <option value="<h2>">Heading 2</option>

                <option value="<h3>">Heading 3</option>

                <option value="<h4>">Heading 4</option>

                <option value="<h5>">Heading 5</option>

                <option value="<h6>">Heading 6</option>

                <option value="<blockquote>">Blockquote</option>

                <option value="<address>">Address</option>

                <option value="<pre>">Formatted</option>

            </select>

            <select id="fonts" class="select" onChange="formatTeks('fontname',this[this.selectedIndex].value)">

                <option value="Arial">Arial</option>

                <option value="Comic Sans MS">Comic Sans MS</option>

                <option value="Courier New">Courir New</option>

                <option value="Monotype Corsiva">Monotype Corsiva</option>

                <option value="Tahoma">Tahoma</option>

                <option value="Times">Times New Roman</option>

            </select>

            <select id="size" class="select" onChange="formatTeks('fontsize',this[this.selectedIndex].value)">

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>

            </select>

            <button class="button" onClick="formatTeks('bold')"><img src="icon/bold.png" title="Bold" /></button>

            <button class="button" onClick="formatTeks('italic')"><img src="icon/italic.png" title="Italic" /></button>

            <button class="button" onClick="formatTeks('underline')"><img src="icon/underline.png" title="Underline" /></button>

            <button class="button" id="forecolor" onClick="formatTeks('forecolor')"><img src="icon/select_color_text.png" title="Font Color" /></button>

            <button class="button" id="hilitecolor" onClick="formatTeks('hilitecolor')"><img src="icon/select_background_color.png" title="Highlight Color" /></button>

            <button class="button" onClick="formatTeks('justifyleft')"><img src="icon/align_left.png" title="Align Left" /></button>

            <button class="button" onClick="formatTeks('justifycenter')"><img src="icon/align_center.png" title="Align Center" /></button>

            <button class="button" onClick="formatTeks('justifyright')"><img src="icon/align_right.png" title="Align Right" /></button>

            <button class="button" onClick="formatTeks('strikethrough')"><img src="icon/strike_through.png" title="Strike Through" /></button>

            <button class="button" onClick="formatTeks('subscript')"><img src="icon/subscript.png" title="Subscript" /></button>

            <button class="button" onClick="formatTeks('superscript')"><img src="icon/superscript.png" title="Superscript" /></button>

            &nbsp;|&nbsp;

            <button class="button" onClick="formatTeks('insertorderedlist')"><img src="icon/numbered_list.png" title="Insert Numbered List" /></button>

            <button class="button" onClick="formatTeks('insertunorderedlist')"><img src="icon/bulleted_list.png" title="Insert Bulleted List" /></button>

            <button class="button" onClick="formatTeks('outdent')"><img src="icon/decrease_indent.png" title="Outdent" /></button>

            <button class="button" onClick="formatTeks('indent')"><img src="icon/increase_indent.png" title="Indent" /></button>

        </nav>

        <iframe id="sunTeks"></iframe>

    </div>

    <script>

    <!--

    sunTeks.document.designMode = "on";

    sunTeks.document.open();

    sunTeks.document.write('<head><style type="text/css">body{font-family:arial;font-size:12px;}</style></head>');

    sunTeks.document.close();

    function dismisscolorpalette() {

        document.getElementById("colorpalette").style.visibility = "hidden";

    }

    function initialize() {

        document.getElementById("block").selectedIndex = 0;

        document.getElementById("fonts").selectedIndex = 0;

        document.getElementById("size").selectedIndex = 0;

        if (document.addEventListener) {

            document.addEventListener("mousedown", dismisscolorpalette, true);

            document.getElementById("sunTeks").contentWindow.document.addEventListener("mousedown", dismisscolorpalette, true);

            document.addEventListener("keypress", dismisscolorpalette, true);

            document.getElementById("sunTeks").contentWindow.document.addEventListener("keypress", dismisscolorpalette, true);

        } else if (document.attachEvent) {

            document.attachEvent("mousedown", dismisscolorpalette, true);

            document.getElementById("sunTeks").contentWindow.document.attachEvent("mousedown", dismisscolorpalette, true);

            document.attachEvent("keypress", dismisscolorpalette, true);

            document.getElementById("sunTeks").contentWindow.document.attachEvent("keypress", dismisscolorpalette, true);

        }

        sunTeks.focus();

    }

    function getOffsetTop(elm) {

        var mOffsetTop = elm.offsetTop;

        var mOffsetParent = elm.offsetParent;

        while(mOffsetParent) {

            mOffsetTop += mOffsetParent.offsetTop;

            mOffsetParent = mOffsetParent.offsetParent;

        }

        return mOffsetTop;

    }

    function getOffsetLeft(elm) {

        var mOffsetLeft = elm.offsetLeft;

        var mOffsetParent = elm.offsetParent;

        while(mOffsetParent) {

            mOffsetLeft += mOffsetParent.offsetLeft;

            mOffsetParent = mOffsetParent.offsetParent;

        }

        return mOffsetLeft;

    }    

    function insertNodeAtSelection(win, insertNode) {

        // get current selection

        var sel = win.getSelection();

        // get the first range of the selection

        // (there's almost always only one range)

        var range = sel.getRangeAt(0);

        // deselect everything

        sel.removeAllRanges();

        // remove content of current selection from document

        range.deleteContents();

        // get location of current selection

        var container = range.startContainer;

        var pos = range.startOffset;

        // make a new range for the new selection

        range=document.createRange();

        if (container.nodeType==3 && insertNode.nodeType==3) {

            // if we insert text in a textnode, do optimized insertion

            container.insertData(pos, insertNode.nodeValue);

            // put cursor after inserted text

            range.setEnd(container, pos+insertNode.length);

            range.setStart(container, pos+insertNode.length);

        } else {

            var afterNode;

            if (container.nodeType==3) {

                // when inserting into a textnode

                // we create 2 new textnodes

                // and put the insertNode in between

                var textNode = container;

                container = textNode.parentNode;

                var text = textNode.nodeValue;

                // text before the split

                var textBefore = text.substr(0,pos);

                // text after the split

                var textAfter = text.substr(pos);

                var beforeNode = document.createTextNode(textBefore);

                afterNode = document.createTextNode(textAfter);

                // insert the 3 new nodes before the old one

                container.insertBefore(afterNode, textNode);

                container.insertBefore(insertNode, afterNode);

                container.insertBefore(beforeNode, insertNode);

                // remove the old node

                container.removeChild(textNode);

            } else {

                // else simply insert the node

                afterNode = container.childNodes[pos];

                container.insertBefore(insertNode, afterNode);

            }

            range.setEnd(afterNode, 0);

            range.setStart(afterNode, 0);

        }

        sel.addRange(range);

    };

    function formatTeks(x,y) {

        if ((x == "forecolor") || (x == "hilitecolor")) {

            parent.command = x;

            buttonElement = document.getElementById(x);

            document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement) + "px";

            document.getElementById("colorpalette").style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight + "px";

            document.getElementById("colorpalette").style.visibility = "visible";

        } else if (x == "createlink") {

            var myURL = prompt("Enter a URL:", "http://");

            if ((myURL != null) && (myURL != "")) {

                sunTeks.document.execCommand(x,false,myURL);

            }

        } else if (x == "insertimage") {

            myImage = prompt('Enter Image URL:', 'http://');

            if ((myImage != null) && (myImage != "")) {

                sunTeks.document.execCommand(x,false,myImage);

            }

        } else if (x == "createtable") {

            e = document.getElementById("sunTeks");

            rowstext = prompt("Enter row numbers");

            colstext = prompt("Enter column numbers");

            rows = parseInt(rowstext);

            cols = parseInt(colstext);

            if ((rows > 0) && (cols > 0)) {

                table = e.contentWindow.document.createElement("table");

                table.setAttribute("border", "1");

                table.setAttribute("cellpadding", "2");

                table.setAttribute("cellspacing", "2");

                tbody = e.contentWindow.document.createElement("tbody");

                for (var i=0; i < rows; i++) {

                    tr =e.contentWindow.document.createElement("tr");

                    for (var j=0; j < cols; j++) {

                        td =e.contentWindow.document.createElement("td");

                        br =e.contentWindow.document.createElement("br");

                        td.appendChild(br);

                        tr.appendChild(td);

                    }

                    tbody.appendChild(tr);

                }

                table.appendChild(tbody);   

                insertNodeAtSelection(e.contentWindow, table);

            }

        } else {

            sunTeks.document.execCommand(x,false,y);

        }

        sunTeks.focus();

    }

    -->

    </script>

</body>

</html>