/apps/sunteks/index.html
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>
- |
- <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>
- |
- <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>