Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
763 lines (691 sloc) 29.4 KB
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>Simple RTE 3.0</title>
<script>
function editorContainer() {
return document.getElementById('editor-container');
}
function editorDocument() {
return editorContainer().contentDocument;
}
function editor() {
if (editorInDesignMode())
return editorDocument().body;
return editorDocument().querySelector("*[contenteditable='true']") || editorDocument().body;
}
function editorInDesignMode() {
return editorDocument().designMode.toLowerCase() == 'on';
}
function codeView() {
return document.getElementById('html-view');
}
function codeEditor() {
return document.getElementById('html-editor');
}
function executeCommand(command, value) {
if (!editorDocument().execCommand(command, false, value))
editorDocument().execCommand(command, false, '<' + value + '>'); // for formatBlock in MSIE
editorDocument().observer();
}
function toggle(command) {
executeCommand(command, null);
}
function applyValue(element) {
if (!element.parentNode || element.parentNode.tagName.toLowerCase() != 'li')
return;
executeCommand(element.parentNode.className, element.value);
}
function applyAttribute(element) {
if (!element.parentNode || element.parentNode.tagName.toLowerCase() != 'li')
return;
var attrName = element.parentNode.className;
if (element.value.length)
editor().setAttribute(attrName, element.value);
else
editor().removeAttribute(attrName);
editorDocument().observer();
}
function queryState(command) {
try {
return editorDocument().queryCommandState(command);
} catch (error) {}
return false;
}
function queryValue(command) {
try {
return editorDocument().queryCommandValue(command);
} catch (error) {}
return null;
}
function runScript() {
if (scriptView())
editorDocument().defaultView.eval(scriptView().value);
}
function selectAll(element) {
var range = document.createRange();
range.setStart(element, 0);
range.setEnd(element, element.childNodes.length);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
function updateToolbars() {
function toTwoDigitHex(str) {
var number = parseInt(str);
if (number < 16)
return '0' + number.toString(16);
return number.toString(16);
}
function formatHexColorIfAplicable(value) {
var colorRegEg = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*(\d{1,3}))?\)$/;
var color = colorRegEg.exec(value);
if (!color) {
if (typeof value == "number") // IE9
return '#' + value.toString(16);
return value;
}
if (!color[5] || !toTwoDigitHex(color[5]))
return '#' + toTwoDigitHex(color[1]) + toTwoDigitHex(color[2]) + toTwoDigitHex(color[3]);
if (parseInt(color[5]) == 0)
return 'transparent';
return '#' + toTwoDigitHex(color[1]) + toTwoDigitHex(color[2]) + toTwoDigitHex(color[3]) + '(' + toTwoDigitHex(color[5]) + ')';
}
function formatCommandValue(command, value) {
var formatted = command.indexOf('Color') > 0 ? formatHexColorIfAplicable(value) : value;
return formatted && formatted.length ? formatted : '-';
}
function stringsAreEqual(a, b)
{
return a && b && a.toString().toLowerCase() == b.toString().toLowerCase();
}
function updateSelectValue(command, select) {
var value = queryValue(command);
for (var i = 0; i < select.options.length; i++) {
if (stringsAreEqual(select.options[i].value, value)) {
select.options[i].selected = true;
return;
}
}
select.options[0].selected = true;
select.options[0].innerHTML = value;
}
function updateDirValue(command, select) {
try {
var value = editor().getAttribute(command);
} catch (error) {}
for (var i = 0; i < select.options.length; i++) {
if (stringsAreEqual(select.options[i].value, value)) {
select.options[i].selected = true;
return;
}
}
select.options[0].selected = true;
}
var toolbars = document.getElementsByClassName('toolbar');
for (var n = 0; n < toolbars.length; n++) {
toolbar = toolbars[n]
for (var i = 0; i < toolbar.childNodes.length; i++) {
var li = toolbar.childNodes[i];
if (li.nodeType != 1)
continue;
var commandName = li.className;
var item = li.lastChild;
if (item.tagName && item.tagName.toLowerCase() == 'a')
item.className = queryState(commandName) ? 'on' : null;
else if (item.options) {
if (commandName == 'dir')
updateDirValue(commandName, item);
else
updateSelectValue(commandName, item);
}
}
}
location.hash = 'code=' + escape(editorDocument().documentElement.outerHTML) + '&designMode=' + editorInDesignMode().toString();
}
function toggleDesignMode(inDesignMode) {
editorDocument().designMode = inDesignMode ? 'on' : 'off';
updateEditor(codeEditor().style.display != 'none' ? codeEditor().value : codeView().value);
observeEditor();
}
function parseHash() {
var tokens = location.hash.substr(1).split('&');
var params = { };
for (var i = 0; i < tokens.length; i++) {
keyValue = tokens[i].split('=');
params[keyValue[0]] = unescape(keyValue[1]);
}
return params;
}
function updateEditor(markup) {
editorDocument().close();
editorDocument().open();
editorDocument().write(markup);
observeEditor();
}
function asyncCaller(callback) {
var timer = null;
return function () {
if (timer)
return;
timer = setTimeout(function () {
timer = null;
callback();
}, 0);
}
}
function observeEditor() {
editorDocument().observer = asyncCaller(function () {
updateToolbars();
codeView().hideEditor();
codeView().value = editorDocument().documentElement.outerHTML;
});
editorDocument().addEventListener('input', editorDocument().observer, false);
editorDocument().addEventListener('keydown', editorDocument().observer, false);
editorDocument().addEventListener('keyup', editorDocument().observer, false);
editorDocument().addEventListener('mousedown', editorDocument().observer, false);
editorDocument().addEventListener('mouseup', editorDocument().observer, false);
}
function observeCodeViewAndCodeEditor() {
codeView().observer = asyncCaller(function () {
updateToolbars();
updateEditor(codeEditor().value);
});
codeView().showEditor = function (sync) {
codeEditor().removeAttribute('style');
codeView().style.display = 'none';
};
codeView().hideEditor = function (sync) {
codeView().removeAttribute('style');
codeEditor().style.display = 'none';
}
codeView().addEventListener('focus', function () {
setTimeout(function () {
var selectionStart = codeView().selectionStart;
var selectionEnd = codeView().selectionEnd;
codeView().showEditor(true);
codeEditor().value = codeView().value;
codeEditor().focus();
codeEditor().selectionStart = selectionStart;
codeEditor().selectionEnd = selectionEnd;
}, 0);
}, false);
codeEditor().addEventListener('input', codeView().observer, false);
codeEditor().addEventListener('keydown', codeView().observer, false);
codeEditor().addEventListener('keyup', codeView().observer, false);
codeEditor().addEventListener('blur', function () {
codeView().hideEditor();
codeView().value = codeEditor().value;
}, false);
}
function init() {
var iframe = document.createElement('iframe');
document.getElementById('editor-area').appendChild(iframe);
iframe.id = 'editor-container';
if (document.body.addEventListener && typeof(window.getSelection) == 'function') {
// Wait until IE9 sets up the document
setTimeout(function () {
observeCodeViewAndCodeEditor();
var hashParam = parseHash();
editorDocument().designMode = hashParam['designMode'] == 'true' ? 'on' : 'off';
updateEditor(hashParam['code'] || "<html><body><div contenteditable>hello, world</div></body></html>");
observeEditor();
var toolbarItems = document.getElementById('toolbar').getElementsByTagName('li');
for (var i = toolbarItems.length; i > 0; i--) {
var anchor = toolbarItems[i - 1].getElementsByTagName('a')[0];
anchor.addEventListener('mousedown', (function () {
var commandName = toolbarItems[i - 1].className;
return function (event) {
var value = null;
if (commandName == 'createLink')
value = prompt("Please enter URL", "");
else if (commandName == 'styleWithCSS')
value = !queryValue(commandName);
executeCommand(commandName, value);
event.preventDefault();
};
})(), false);
anchor.addEventListener('focus', function (event) { event.preventDefault(); }, false);
anchor.addEventListener('click', function (event) { event.preventDefault(); }, false);
}
editorDocument().observer();
}, 100);
}
}
</script>
<style type="text/css">
.toolbar {
min-width: 65em;
min-width: 45em;
border: solid 2px transparent;
height: 2em;
margin: 0px;
padding: 0px;
list-style: none;
font-size: 1em;
}
.toolbar li {
float: left;
width: 1.5em;
height: 1.5em;
margin: 0.2em;
vertical-align: middle;
display: inline;
text-align: center;
}
.toolbar a {
background-color: inherit;
display: block;
text-align: inherit;
width: 1.2em;
height: 1.35em;
vertical-align: inherit;
text-decoration: inherit;
color: inherit;
border: solid 1px transparent;
border-radius: 3px;
padding: 2px;
}
.toolbar a.on, .toolbar a.on:hover {
border: inset 1px #ccc;
}
.toolbar a:hover {
border: outset 1px #fff;
}
.svg_container {
display: block;
width: 1.2em;
height: 1em;
margin-top: 0.2em;
}
html {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header {
color: white;
border-bottom: 1px solid #a5a5a5;
padding: 0;
margin: 0;
}
header div {
background: #443fcb; /* Old browsers */
background: -moz-linear-gradient(top, #443fcb 0%, #2c2a65 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #443fcb 0%,#2c2a65 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #443fcb 0%,#2c2a65 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #443fcb 0%,#2c2a65 100%); /* IE10+ */
background: linear-gradient(top, #443fcb 0%,#2989d8 9%,#207cca 91%,#2c2a65 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#443fcb', endColorstr='#2c2a65',GradientType=0 ); /* IE6-9 */
padding: 10px;
positon: relative;
}
header h1 {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 1em;
font-weight: normal;
}
header p {
position: absolute;
vertical-align: middle;
top: 10px;
left: 20ex;
padding: 0;
margin: 0;
line-height: 1.25em;
font-size: 0.8em;
opacity: 0.8;
}
header a {
color: inherit;
}
#main {
}
#editor-area {
}
#editor-area iframe {
display: block;
width: 100%;
min-height: 20em;
background: white;
margin: 0;
border: 0;
}
nav, #pane-area h2 {
background: #f0f0f0; /* Old browsers */
background: -moz-linear-gradient(top, #f0f0f0 0%, #e4e4e4 15%, #e7e7e7 85%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(15%,#e4e4e4), color-stop(85%,#e7e7e7), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f0f0 0%,#e4e4e4 15%,#e7e7e7 85%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f0f0 0%,#e4e4e4 15%,#e7e7e7 85%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0f0f0 0%,#e4e4e4 15%,#e7e7e7 85%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(top, #f0f0f0 0%,#e4e4e4 15%,#e7e7e7 85%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid #a5a5a5;
}
#pane-area {
vertical-align: top;
border-left: 1px solid #a5a5a5;
}
#pane-area h2 {
margin: 0;
padding: .2em;
font-size: 0.9em;
font-weight: bold;
color: #666;
text-shadow: 0.1em 0.1em #eee;
}
#pane-area .code-view {
display: block;
width: 98%;
min-height: 20em;
border: none;
padding: 1%;
scroll: auto;
}
</style>
</head>
<body onLoad="init();">
<header>
<div>
<h1>Simple RTE 3.0</h1>
<p>A testing tool for <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">contenteditable attribute</a> in HTML5.</p>
</div>
</header>
<nav>
<ul id="toolbar" class="toolbar">
<li class="bold"><a href="" title="Bold">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="80" font-size="100" style="font-weight: bold;">B</text>
</svg>
</div>
</a></li>
<li class="italic"><a href="" title="Italic">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="30" y="80" font-size="100" style="font-style: italic;">I</text>
</svg>
</div>
</a></li>
<li class="underline"><a href="" title="Underline">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="80" font-size="100" style="text-decoration: underline;">U</text>
</svg>
</div>
</a></li>
<li class="strikeThrough"><a href="" title="Strike through">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="80" font-size="100" style="text-decoration: line-through;">S</text>
</svg>
</div>
</a></li>
<li class="subscript"><a href="" title="Subscript">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="70" font-size="80">X</text>
<text x="70" y="90" font-size="60">S</text>
</svg>
</div>
</a></li>
<li class="superscript"><a href="" title="Superscript">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="80" font-size="80">X</text>
<text x="70" y="40" font-size="60">S</text>
</svg>
</div>
</a></li>
<li class="justifyLeft"><a href="" title="Left align">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="5"/>
<line x1="0" y1="20" x2="70" y2="20" stroke="black" stroke-width="5"/>
<line x1="0" y1="40" x2="100" y2="40" stroke="black" stroke-width="5"/>
<line x1="0" y1="60" x2="70" y2="60" stroke="black" stroke-width="5"/>
<line x1="0" y1="80" x2="100" y2="80" stroke="black" stroke-width="5"/>
<line x1="0" y1="97.5" x2="70" y2="97.5" stroke="black" stroke-width="5"/>
</svg>
</div>
</a></li>
<li class="justifyCenter"><a href="" title="Center align">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="5"/>
<line x1="15" y1="20" x2="85" y2="20" stroke="black" stroke-width="5"/>
<line x1="0" y1="40" x2="100" y2="40" stroke="black" stroke-width="5"/>
<line x1="15" y1="60" x2="85" y2="60" stroke="black" stroke-width="5"/>
<line x1="0" y1="80" x2="100" y2="80" stroke="black" stroke-width="5"/>
<line x1="15" y1="97.5" x2="85" y2="97.5" stroke="black" stroke-width="5"/>
</svg>
</div>
</a></li>
<li class="justifyRight"><a href="" title="Right align">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="5"/>
<line x1="30" y1="20" x2="100" y2="20" stroke="black" stroke-width="5"/>
<line x1="0" y1="40" x2="100" y2="40" stroke="black" stroke-width="5"/>
<line x1="30" y1="60" x2="100" y2="60" stroke="black" stroke-width="5"/>
<line x1="0" y1="80" x2="100" y2="80" stroke="black" stroke-width="5"/>
<line x1="30" y1="97.5" x2="100" y2="97.5" stroke="black" stroke-width="5"/>
</svg>
</div>
</a></li>
<li class="justifyFull"><a href="" title="Justify">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="2.5" x2="100" y2="2.5" stroke="black" stroke-width="5"/>
<line x1="0" y1="20" x2="100" y2="20" stroke="black" stroke-width="5"/>
<line x1="0" y1="40" x2="100" y2="40" stroke="black" stroke-width="5"/>
<line x1="0" y1="60" x2="100" y2="60" stroke="black" stroke-width="5"/>
<line x1="0" y1="80" x2="100" y2="80" stroke="black" stroke-width="5"/>
<line x1="0" y1="97.5" x2="100" y2="97.5" stroke="black" stroke-width="5"/>
</svg>
</div>
</a></li>
<li class="indent"><a href="" title="Indent">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="2.5" x2="100" y2="2.5" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="20" x2="100" y2="20" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="40" x2="100" y2="40" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="60" x2="100" y2="60" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="80" x2="100" y2="80" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="0" y1="97.5" x2="100" y2="97.5" style="stroke:rgb(0,0,0); stroke-width:5"/>
<polygon
style="stroke-linejoin: miter; stroke: black; stroke-width: 0; fill: rgb(0, 0, 0);"
points="0 20, 40 50, 0 80"/>
</svg>
</div>
</a></li>
<li class="outdent"><a href="" title="Outdent">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="2.5" x2="100" y2="2.5" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="20" x2="100" y2="20" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="40" x2="100" y2="40" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="60" x2="100" y2="60" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="50" y1="80" x2="100" y2="80" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="0" y1="97.5" x2="100" y2="97.5" style="stroke:rgb(0,0,0); stroke-width:5"/>
<polygon
style="stroke-linejoin: miter; stroke: black; stroke-width: 0; fill: rgb(0, 0, 0);"
points="40 20, 0 50, 40 80"/>
</svg>
</div>
</a></li>
<li class="insertOrderedList"><a href="" title="Ordered list">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="30" font-size="40">1</text>
<text x="0" y="65" font-size="40">2</text>
<text x="0" y="100" font-size="40">3</text>
<line x1="30" y1="15" x2="100" y2="15" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="30" y1="50" x2="100" y2="50" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="30" y1="85" x2="100" y2="85" style="stroke:rgb(0,0,0); stroke-width:5"/>
</svg>
</div>
</a></li>
<li class="insertUnorderedList"><a href="" title="Unordered list">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="15" r="10" stroke="black" stroke-width="0" fill="black"/>
<circle cx="10" cy="50" r="10" stroke="black" stroke-width="0" fill="black"/>
<circle cx="10" cy="85" r="10" stroke="black" stroke-width="0" fill="black"/>
<line x1="30" y1="15" x2="100" y2="15" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="30" y1="50" x2="100" y2="50" style="stroke:rgb(0,0,0); stroke-width:5"/>
<line x1="30" y1="85" x2="100" y2="85" style="stroke:rgb(0,0,0); stroke-width:5"/>
</svg>
</div>
</a></li>
<li class="createLink"><a href="" title="Add a hyperlink">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="30" cy="50" rx="17" ry="15" style="stroke: rgb(0, 0, 255); stroke-width: 20; fill: transparent;"/>
<ellipse cx="30" cy="50" rx="17" ry="15" style="stroke: rgb(255, 255, 255); stroke-width: 10; fill: transparent;"/>
<ellipse cx="70" cy="50" rx="17" ry="15" style="stroke: rgb(0, 0, 255); stroke-width: 20; fill: transparent;"/>
<ellipse cx="70" cy="50" rx="17" ry="15" style="stroke: rgb(255, 255, 255); stroke-width: 10; fill: transparent;"/>
<line x1="30" y1="50" x2="70" y2="50" style="stroke:rgb(0, 0, 255); stroke-width: 20; "/>
<line x1="30" y1="50" x2="70" y2="50" style="stroke:rgb(255, 255, 255); stroke-width: 10; "/>
<line x1="0" y1="90" x2="100" y2="90" style="stroke:rgb(0, 0, 255); stroke-width: 5; "/>
</svg>
</div>
</a></li>
<li class="unlink"><a href="" title="Remove a hyperlink">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="30" cy="50" rx="17" ry="15" style="stroke: rgb(0, 0, 0); stroke-width: 20; fill: transparent;"/>
<ellipse cx="30" cy="50" rx="17" ry="15" style="stroke: rgb(255, 255, 255); stroke-width: 10; fill: transparent;"/>
<ellipse cx="70" cy="50" rx="17" ry="15" style="stroke: rgb(0, 0, 0); stroke-width: 20; fill: transparent;"/>
<ellipse cx="70" cy="50" rx="17" ry="15" style="stroke: rgb(255, 255, 255); stroke-width: 10; fill: transparent;"/>
<line x1="30" y1="50" x2="70" y2="50" style="stroke:rgb(0, 0, 0); stroke-width: 20; "/>
<line x1="30" y1="50" x2="70" y2="50" style="stroke:rgb(255, 255, 255); stroke-width: 10; "/>
</svg>
</div>
</a></li>
<li class="removeFormat"><a href="" title="Clear Format">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="80" font-size="100" style="text-decoration: underline; font-weight: bold;">T</text>
<line x1="60" y1="60" x2="100" y2="100" style="stroke:rgb(255,0,0); stroke-width:10"/>
<line x1="100" y1="60" x2="60" y2="100" style="stroke:rgb(255,0,0); stroke-width:10"/>
</svg>
</div>
</a></li>
<li class="styleWithCSS"><a href="" title="Style with CSS">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="-5" y="70" font-size="60">CSS</text>
</svg>
</div>
</a></li>
<li class="undo"><a href="" title="Undo">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="tringle" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth"
markerWidth="7" markerHeight="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<path stroke="black" stroke-width="10" stroke-linecap="round" fill="none" d="M70,80 C120,30 60,-30 30,30"
marker-end="url(#tringle)"/>
</svg>
</div>
</a></li>
<li class="redo"><a href="" title="Redo">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path stroke="black" stroke-width="10" stroke-linecap="round" fill="none" d="M70,80 C120,30 60,-30 30,30"
marker-end="url(#tringle)" transform="matrix(-1 0 0 1 100 0)"/>
</svg>
</div>
</a></li>
<li class="copy"><a href="" title="Copy">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="80" font-size="100">C</text>
</svg>
</div>
</a></li>
<li class="paste"><a href="" title="Paste">
<div class="svg_container">
<svg viewBox="0 0 100 100" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="80" font-size="100">P</text>
</svg>
</div>
</a></li>
</ul>
<ul id="selectionbar" class="toolbar">
<li class="FormatBlock" style="width: auto;"><select id="format-block" onChange="applyValue(this)">
<option value="undefined">-</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="h6">h6</option>
<option value="address">address</option>
<option value="blockquote">blockquote</option>
</select></li>
<li class="fontName" style='width: auto;'><select id="font" onChange="applyValue(this)">
<option value="undefined">-</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Georgia">Georgia</option>
<option value="Monaco">Monaco</option>
<option value="MS Gothic">MS Gothic</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
</select></li>
<li class="fontSize" style="width: auto;"><select id="font-size" onChange="applyValue(this)">
<option value="undefined">-</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
</select></li>
<li class="foreColor" style="width: 10em;"><label for="color">Color:</label><select id="color" onChange="applyValue(this)">
<option value="undefined">-</option>
<option value="rgb(0, 0, 0)">black</option>
<option value="rgb(255, 255, 255)">white</option>
<option value="rgb(255, 0, 0)">red</option>
<option value="rgb(0, 0, 255)">blue</option>
<option value="rgb(0, 255, 0)">green</option>
</select></li>
<li class="backColor" style="width: 10em;"><label for="color">Back:</label><select id="backColor" onChange="applyValue(this)">
<option value="undefined">-</option>
<option value="rgb(0, 0, 0)">black</option>
<option value="rgb(255, 255, 255)">white</option>
<option value="rgb(255, 0, 0)">red</option>
<option value="rgb(0, 0, 255)">blue</option>
<option value="rgb(0, 255, 0)">green</option>
</select></li>
<li class="dir" style="width: auto;"><label for="dir">Dir:</label><select id="dir" onChange="applyAttribute(this)">
<option value="">-</option>
<option value="ltr">LTR</option>
<option value="rtl">RTL</option>
</select></li>
<li class="designMode" style="width: auto"><input id="design-mode" type="checkbox" onChange="toggleDesignMode(this.checked)">
<label for="design-mode">Design mode</label></li>
</ul>
</nav>
<div id="main">
<div id="editor-area"></div>
<div id="pane-area">
<h2>Code</h2>
<textarea id="html-view" class="code-view" readonly></textarea>
<textarea id="html-editor" class="code-view" style="display: none"></textarea>
</div>
</div>
</body>
</html>