JavaScript DHTML/GUI Components/Editor
Содержание
- 1 Bitflux Editor Examples
- 2 editarea 0.8.1.1
- 3 Edit in place (Direct edit)
- 4 Editor based on Javascript
- 5 HTML Text Editing Component for hosting in Web Pages
- 6 Rich text
- 7 Text Editor in JavaScript: toolbar, Color picker, Bold style etc
- 8 Walter - A WYSIWYG HTML editor that runs purely on JavaScript
- 9 WebFX Dynamic Webboard 2.0
- 10 WebIEdit
Bitflux Editor Examples
<A href="http://www.wbex.ru/Code/JavaScriptDownload/bxe.zip">bxe.zip( 957 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm">Editor based on Javascript</a> <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/Richtext.htm">Rich text</a> <A href="/Code/JavaScript/GUI-Components/Richtext.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm">WebFX Dynamic Webboard 2.0</a> <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm">HTML Text Editing Component for hosting in Web Pages</a> <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/WalterAWYSIWYGHTMLeditorthatrunspurelyonJavaScript.htm">Walter - A WYSIWYG HTML editor that runs purely on JavaScript</a> 6. <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm">Text Editor in JavaScript: toolbar, Color picker, Bold style etc</a> <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm">Edit in place (Direct edit)</a> <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm">WebIEdit</a> <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/editarea0811.htm">editarea 0.8.1.1 </a> <A href="/Code/JavaScript/GUI-Components/editarea0811.htm"></a>
editarea 0.8.1.1
<A href="http://www.wbex.ru/Code/JavaScriptDownload/editarea_0_8_1_1.zip">editarea_0_8_1_1.zip( 319 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm">Editor based on Javascript</a> <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/Richtext.htm">Rich text</a> <A href="/Code/JavaScript/GUI-Components/Richtext.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm">WebFX Dynamic Webboard 2.0</a> <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm">HTML Text Editing Component for hosting in Web Pages</a> <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/WalterAWYSIWYGHTMLeditorthatrunspurelyonJavaScript.htm">Walter - A WYSIWYG HTML editor that runs purely on JavaScript</a> 6. <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm">Text Editor in JavaScript: toolbar, Color picker, Bold style etc</a> <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm">Edit in place (Direct edit)</a> <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm">WebIEdit</a> <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm">Bitflux Editor Examples</a> <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm"></a>
Edit in place (Direct edit)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) --><title>Edit in Place with JavaScript and CSS</title>
<!-- common.css -->
<STYLE rel="stylesheet" type="text/css">
body {
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
margin: 0px;
padding: 0px 20px;
min-width: 30em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0px;
}
h2, h3, h4, h5, h6 {
font-family: Optima, Verdana, sans-serif;
margin: 1em -10px 0.5em -10px;
}
h2 { margin-top: 1.5em; }
h1 {
font-size: 22px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 10px 5px 10px;
color: #fff;
text-shadow: #8760c1 0px 0px 5px;
}
.breadcrumb {
list-style-type: none;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 10px;
border-style: solid;
border-color: #8760c1;
border-width: 1px 0px;
height: 19px;
}
.breadcrumb li.first {
border-left: 1px solid #8760c1;
}
.breadcrumb li {
float: left;
border-right: 1px solid #8760c1;
padding: 3px 10px;
}
.breadcrumb li a {
display: block;
text-decoration: none;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
h1, .breadcrumb {
font-family: Skia;
background-color: #ccaaff;
margin-left: -20px;
margin-right: -20px;
}
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p {
margin-top: 0px;
margin-bottom: 1em;
text-align: justify;
max-width: 40em;
}
li p {
margin-bottom: 0.75em;
}
br.clear {
clear: both;
margin: 0px;
}
.sidebar {
margin: 0px 10px 30px 30px;
clear: right;
float: right;
width: 134px;
border: 1px solid #8760c1;
background-color: #ccaaff;
padding: 5px;
font-size: 11px;
font-family: "Lucida Grande", Geneva, Verdana, Helvetica, Arial, sans-serif;
-moz-border-radius: 0px 10px 0px 10px;
border-radius: 0px 10px 0px 10px;
}
.sidebar, .sidebar p, .sidebar li {
text-align: left;
}
.sidebar ul {
margin: 0px;
margin-left: 1.5em;
padding: 0px;
list-style-type: circle;
}
td.caption {
font-size: 12px;
text-align: center;
}
#copyright {
margin-bottom: 1em;
text-align: center;
font-size: 11px;
}
blockquote {
font-size: 13px;
font-style: italic;
}
blockquote .attribution {
font-weight: normal;
font-style: normal;
text-align: right;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { background-color: #ffd700; }
</STYLE>
<!-- lists.css -->
<style rel="stylesheet" type="text/css">
ul.sortable li {
position: relative;
}
ul.boxy {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 10em;
font-size: 13px;
font-family: Arial, sans-serif;
}
ul.boxy li {
cursor:move;
padding: 2px 2px;
border: 1px solid #ccc;
background-color: #eee;
}
.clickable a {
display: block;
text-decoration: none;
cursor: pointer;
cursor: hand;
}
.clickable li:hover {
background-color: #f6f6f6;
}
</STYLE>
<style type="text/css"><!--
/* TODO: this CSS is in need of major cleanup */
.slideshow {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.slide {
position: relative;
float: left;
width: 172px;
margin-bottom: 10px;
margin-right: 10px;
}
.slide div.thumb {
background: #fff;
width: 170px;
height: 120px;
border: 1px solid #000;
font-size: 5px;
font-family: "Times New Roman", serif;
overflow: hidden;
}
.slide .view {
padding: 2px 2px;
margin: 2px 0px;
cursor: text;
border-width: 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
height: 1em;
}
.view:hover {
background-color: #ffffcc;
}
.view, .inplace, #list5 input {
font-size: 14px;
font-family: sans-serif;
}
.inplace {
position: absolute;
visibility: hidden;
z-index: 10000;
}
.inplace, #list5 input:hover, #list5 input:focus {
background-color: #ffffcc;
}
#slideEditors input.inplace {
width: 12em;
max-width: 12em;
margin-left: 1px;
}
#slideEditors input.inplace, #slideshow .view {
text-align: center;
}
#paragraphView, #paragraphEdit, #markupView, #markupEdit {
font-family: "Times New Roman", serif;
font-size: 14px;
}
#paragraphView, #markupView {
border: 1px solid #fff;
padding: 8px;
width: 400px;
max-width: 400px;
}
#paragraphView:hover, #markupView:hover {
background-color: #ffffcc;
border-color: #ccc;
}
#paragraphEdit, #markupEdit {
width: 315px;
background-color: #ffffcc;
}
#paragraphEdit {
height: 5em;
}
#markupEdit {
height: 15em;
}
#listExamples td {
width: 9em;
margin-right: 20px;
padding: 0px 20px;
vertical-align: top;
}
#listExamples th {
vertical-align: bottom;
font-weight: normal;
font-size: 14px;
padding-top: 20px;
}
#listExamples td.caption {
font-size: 12px;
text-align: center;
}
#listExamples li {
padding: 0px;
height: 20px;
min-height: 1em;
width: 120px;
}
#listExamples li .view {
height: 16px;
vertical-align: middle;
padding: 2px;
}
#list1 li:hover {
background-color: #eee;
}
#listExamples input.inplace {
width: 120px;
max-width: 120px;
}
/* BugFix: Firefox: avoid bottom margin on draggable elements */
#listExamples #list4, #listExamples #list5 { margin-top: -2px; }
#listExamples #list4 li, #listExamples #list5 li { margin-top: 4px; }
#listExamples #list4 li { cursor: default; }
#listExamples #list4 .handle,
#listExamples #list5 .handle {
float: right;
background-color: #ccc;
background-image: url(common/handle.png);
background-repeat: repeat-y;
width: 7px;
height: 20px;
}
#listExamples #list4 li .view {
cursor: text;
}
#listExamples #list4Editors input.inplace, #listExamples #list5 input {
width: 104px;
max-width: 104px;
}
#listExamples #list4Editors>input.inplace, #listExamples #list5>li>input {
width: 111px;
max-width: 111px;
}
#list5 input {
background-color: #eee;
}
.inplace, #list5 input {
margin: 0px;
padding-left: 1px;
}
.handle {
cursor: move;
}
--></style>
<!-- core.js -->
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/
var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn"t loaded";
return ToolMan._eventsFactory
},
css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn"t loaded";
return ToolMan._cssFactory
},
coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn"t loaded";
return ToolMan._coordinatesFactory
},
drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn"t loaded";
return ToolMan._dragFactory
},
dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn"t loaded";
return ToolMan._dragsortFactory
},
helpers : function() {
return ToolMan._helpers
},
cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn"t loaded";
return ToolMan._cookieOven
},
junkdrawer : function() {
return ToolMan._junkdrawer
}
}
ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},
nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},
previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},
moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},
moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}
/**
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join("|")
},
inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},
restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return
var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;
var IDs = cookie.split("|")
var items = ToolMan.junkdrawer()._itemsByID(list)
for (var i = 0, n = IDs.length; i < n; i++) {
var itemID = IDs[i]
if (itemID in items) {
var item = items[itemID]
list.removeChild(item)
list.insertBefore(item, null)
}
}
},
_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier
identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;
identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;
// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},
_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName("li")
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]
array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},
trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, "$2")
}
}
</script>
<!-- events.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
},
register : function(element, type, func) {
if (element.addEventListener) {
element.addEventListener(type, func, false)
} else if (element.attachEvent) {
if (!element._listeners) element._listeners = new Array()
if (!element._listeners[type]) element._listeners[type] = new Array()
var workaroundFunc = function() {
func.apply(element, new Array())
}
element._listeners[type][func] = workaroundFunc
element.attachEvent("on" + type, workaroundFunc)
}
},
unregister : function(element, type, func) {
if (element.removeEventListener) {
element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
if (element._listeners
&& element._listeners[type]
&& element._listeners[type][func]) {
element.detachEvent("on" + type,
element._listeners[type][func])
}
}
}
}
</script>
<!-- css.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
// TODO: write unit tests
ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
return element.style[property]
} else if (element.currentStyle) {
return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(element, null)
return style.getPropertyValue(property)
} else {
return null
}
}
}
</script>
<!-- coordinates.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
/* FIXME: assumes position styles are specified in "px" */
ToolMan._coordinatesFactory = {
create : function(x, y) {
// FIXME: Safari won"t parse "throw" and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},
origin : function() {
return this.create(0, 0)
},
/*
* FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
*/
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top
return this.create(left, top)
},
bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},
topLeftOffset : function(element) {
var offset = this._offset(element)
var parent = element.offsetParent
while (parent) {
offset = offset.plus(this._offset(parent))
parent = parent.offsetParent
}
return offset
},
bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
this.create(element.offsetWidth, element.offsetHeight))
},
scrollOffset : function() {
if (window.pageXOffset) {
return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
return this.create(
document.body.scrollLeft + document.documentElement.scrollLeft,
document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
return this.create(0, 0)
}
},
clientSize : function() {
if (window.innerHeight >= 0) {
return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
return this.create(document.documentElement.clientWidth,
document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
return this.create(document.body.clientWidth,
document.body.clientHeight)
} else {
return this.create(0, 0)
}
},
/**
* mouse coordinate relative to the window (technically the
* browser client area) i.e. the part showing your page
*
* NOTE: in Safari the coordinate is relative to the document
*/
mousePosition : function(event) {
event = ToolMan.events().fix(event)
return this.create(event.clientX, event.clientY)
},
/**
* mouse coordinate relative to the document
*/
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
return this.mousePosition(event).plus(this.scrollOffset())
}
},
_size : function(element) {
/* TODO: move to a Dimension class */
return this.create(element.offsetWidth, element.offsetHeight)
},
_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}
function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}
_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},
plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},
minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},
min : function(that) {
return this.factory.create(
Math.min(this.x , that.x), Math.min(this.y , that.y))
},
max : function(that) {
return this.factory.create(
Math.max(this.x , that.x), Math.max(this.y , that.y))
},
constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)
return this.max(min).min(max)
},
distance : function (that) {
return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},
reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}
</script>
<!-- drag.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},
createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)
var position = ToolMan.css().readStyle(element, "position")
if (position == "static") {
element.style["position"] = "relative"
} else if (position == "absolute") {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}
// TODO: only if ToolMan.isDebugging()
group.register("draginit", this._showDragEventStatus)
group.register("dragmove", this._showDragEventStatus)
group.register("dragend", this._showDragEventStatus)
return group
},
_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},
constraints : function() {
return this._constraintFactory
},
_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}
function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners["draginit"] = new Array()
this._listeners["dragstart"] = new Array()
this._listeners["dragmove"] = new Array()
this._listeners["dragend"] = new Array()
}
_ToolManDragGroup.prototype = {
/*
* TODO:
* - unregister(type, func)
* - move custom event listener stuff into Event library
* - keyboard nudging of "selected" group
*/
setHandle : function(handle) {
var events = ToolMan.events()
handle.toolManDragGroup = this
events.register(handle, "mousedown", this._dragInit)
handle.onmousedown = function() { return false }
if (this.element != handle)
events.unregister(this.element, "mousedown", this._dragInit)
},
register : function(type, func) {
this._listeners[type].push(func)
},
addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},
verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},
horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},
setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},
transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")
this.register("dragstart", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = opacity
element.style.filter = "alpha(opacity=" + (opacity * 100) + ")"
})
this.register("dragend", function(dragEvent) {
var element = dragEvent.group.element
element.style.opacity = originalOpacity
element.style.filter = "alpha(opacity=100)"
})
},
onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")
this.register("dragstart", function(dragEvent) {
dragEvent.group.element.style.zIndex = zIndex
})
this.register("dragend", function(dragEvent) {
dragEvent.group.element.style.zIndex = originalZIndex
})
},
_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent("draginit", event, group)
group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, "mousemove", group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, "mouseup", group._dragEnd)
group._notifyListeners(dragEvent)
},
_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent("dragmove", event, group)
var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)
// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
var distance =
dragEvent.mouseOffset.distance(group._initialMouseOffset)
if (distance < group._thresholdDistance) return
group._isThresholdExceeded = true
group._notifyListeners(
group.factory._createEvent("dragstart", event, group))
}
for (i in group._transforms) {
var transform = group._transforms[i]
newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}
var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)
group._notifyListeners(dragEvent)
var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},
_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent("dragend", event, group)
group._notifyListeners(dragEvent)
this.toolManDragGroup = null
ToolMan.events().unregister(document, "mousemove", group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, "mouseup", group._dragEnd)
},
_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
listeners[i](dragEvent)
}
}
}
function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}
_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + " " +
"xmouse: " + this.transformedMouseOffset + " " +
"left,top: " + this.topLeftPosition + this.topLeftOffset
}
}
ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
var x = dragEvent.topLeftOffset.x
return coordinate.x != x
? coordinate.factory.create(x, coordinate.y)
: coordinate
}
},
horizontal : function() {
return function(coordinate, dragEvent) {
var y = dragEvent.topLeftOffset.y
return coordinate.y != y
? coordinate.factory.create(coordinate.x, y)
: coordinate
}
}
}
</script>
<!-- dragsort.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */
ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)
group.register("dragstart", this._onDragStart)
group.register("dragmove", this._onDragMove)
group.register("dragend", this._onDragEnd)
return group
},
/**
* Iterates over a list"s items, making them sortable, applying
* optional functions to each item.
*
* example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
*/
makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")
helpers.map(items, function(item) {
var dragGroup = dragsort.makeSortable(item)
dragGroup.setThreshold(4)
var min, max
dragGroup.addTransform(function(coordinate, dragEvent) {
return coordinate.constrainTo(min, max)
})
dragGroup.register("dragstart", function() {
var items = list.getElementsByTagName("li")
min = max = coordinates.topLeftOffset(items[0])
for (var i = 1, n = items.length; i < n; i++) {
var offset = coordinates.topLeftOffset(items[i])
min = min.min(offset)
max = max.max(offset)
}
})
})
for (var i = 1, n = arguments.length; i < n; i++)
helpers.map(items, arguments[i])
},
_onDragStart : function(dragEvent) {
},
_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null
var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
var bottomRight = coordinates.bottomRightOffset(previous)
if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
moveTo = previous
}
previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, moveTo)
return
}
var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
var topLeft = coordinates.topLeftOffset(next)
if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
moveTo = next
}
next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
return
}
},
_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
}
</script>
<script language="JavaScript"><!--
var ESCAPE = 27
var ENTER = 13
var TAB = 9
var coordinates = ToolMan.coordinates()
var dragsort = ToolMan.dragsort()
window.onload = function() {
// TODO: this API sucks
join("paragraph", true)
join("markup", true)
join("a2", true)
join("b2", true)
join("c2", true)
join("d2", true)
join("e2", true)
join("a3")
join("b3")
join("c3")
join("d3")
join("e3")
join("a4")
join("b4")
join("c4")
join("d4")
join("e4")
join("one")
join("two")
join("three")
join("four")
join("five")
join("six")
dragsort.makeListSortable(document.getElementById("list1"))
dragsort.makeListSortable(document.getElementById("list2"))
dragsort.makeListSortable(document.getElementById("list3"))
dragsort.makeListSortable(document.getElementById("list4"), setHandle)
dragsort.makeListSortable(document.getElementById("list5"), setHandle)
dragsort.makeListSortable(document.getElementById("slideshow"), setHandle)
}
function setHandle(item) {
item.toolManDragGroup.setHandle(findHandle(item))
}
function findHandle(item) {
var children = item.getElementsByTagName("div")
for (var i = 0; i < children.length; i++) {
var child = children[i]
if (child.getAttribute("class") == null) continue
if (child.getAttribute("class").indexOf("handle") >= 0)
return child
}
return item
}
function join(name, isDoubleClick) {
var view = document.getElementById(name + "View")
view.editor = document.getElementById(name + "Edit")
var showEditor = function(event) {
event = fixEvent(event)
var view = this
var editor = view.editor
if (!editor) return true
if (editor.currentView != null) {
editor.blur()
}
editor.currentView = view
var topLeft = coordinates.topLeftOffset(view)
topLeft.reposition(editor)
if (editor.nodeName == "TEXTAREA") {
editor.style["width"] = view.offsetWidth + "px"
editor.style["height"] = view.offsetHeight + "px"
}
editor.value = view.innerHTML
editor.style["visibility"] = "visible"
view.style["visibility"] = "hidden"
editor.focus()
return false
}
if (isDoubleClick) {
view.ondblclick = showEditor
} else {
view.onclick = showEditor
}
view.editor.onblur = function(event) {
event = fixEvent(event)
var editor = event.target
var view = editor.currentView
if (!editor.abandonChanges) view.innerHTML = editor.value
editor.abandonChanges = false
editor.style["visibility"] = "hidden"
editor.value = "" // fixes firefox 1.0 bug
view.style["visibility"] = "visible"
editor.currentView = null
return true
}
view.editor.onkeydown = function(event) {
event = fixEvent(event)
var editor = event.target
if (event.keyCode == TAB) {
editor.blur()
return false
}
}
view.editor.onkeyup = function(event) {
event = fixEvent(event)
var editor = event.target
if (event.keyCode == ESCAPE) {
editor.abandonChanges = true
editor.blur()
return false
} else if (event.keyCode == TAB) {
return false
} else {
return true
}
}
// TODO: this method is duplicated elsewhere
function fixEvent(event) {
if (!event) event = window.event
if (event.target) {
if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
event.target = event.srcElement
}
return event
}
}
//-->
</script></head>
<body>
<h1>Edit in Place with JavaScript and CSS</h1>
<br class="clear">
<div class="sidebar">
<p>.</p>
</div>
<h2>Editable Content</h2>
<p id="paragraphView">Editable #1: Double-click anywhere in this
paragraph to edit its content. Press TAB or click outside the edit area
to finish. Press ESCAPE to cancel.</p>
<textarea id="paragraphEdit" class="inplace" tabindex="1"></textarea>
<div id="markupView">
<p>Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.</p>
<p>We can do paragraphs, <b>styling</b>, <a href="http://tool-man.org/examples/index.html">links</a>,
or any HTML, really.</p>
<table style="text-align: center;" cellpadding="3" cellspacing="0">
<tbody><tr>
<td></td>
<th style="border-bottom: 1px solid;">DADA</th>
<th style="border-bottom: 1px solid;">NHUG</th>
<th style="border-bottom: 1px solid;">TTAY</th>
</tr>
<tr>
<th style="border-right: 1px solid;">DADA</th>
<td style="background-color: rgb(204, 204, 204);"></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<th style="border-right: 1px solid;">NHUG</th>
<td>1</td>
<td style="background-color: rgb(204, 204, 204);"></td>
<td>2</td>
</tr>
<tr>
<th style="border-right: 1px solid;">TTAY</th>
<td>3</td>
<td>2</td>
<td style="background-color: rgb(204, 204, 204);"></td>
</tr>
</tbody></table>
<br>
<p>Without applying some kind of limitation, any markup whatsoever can be
entered. In practice you would normally want to limit the type of markup
allowed perhaps via a <a href="http://tinymce.moxiecode.ru/">wysiwyg editor</a>
or a text formatter like <a href="http://daringfireball.net/projects/markdown/">Markdown</a>.
</p>
</div>
<textarea id="markupEdit" class="inplace" tabindex="2"></textarea>
<h2>Sortable, Editable Lists</h2>
<div class="sidebar">
<p>Firefox and Safari register "click" events after a drag causing the
field to become editable, which is undesirable. This is the same
problem with the sortable links and buttons example in
<a href="http://tool-man.org/examples/sorting.html">DnD Sortable Lists</a>.</p>
</div>
<p>Combining in place editing with
<a href="http://tool-man.org/examples/sorting.html">Drag & Drop Sortable Lists</a> results in
nice direct manipulation for managing a list of labels.</p>
<table id="listExamples">
<tbody><tr>
<th>List 1</th>
<th>List 2</th>
<th>List 3</th>
</tr>
<tr>
<td>
<ul id="list1" class="sortable boxy">
<li class="view">alpha</li>
<li class="view">bravo</li>
<li class="view">charlie</li>
<li class="view">delta</li>
<li class="view">echo</li>
</ul>
</td>
<td>
<!--
IE 5.5+ BugFix: don"t put these inside a
"position: relative" layer
-->
<input id="a2Edit" name="a2Edit" class="inplace">
<input id="b2Edit" name="b2Edit" class="inplace">
<input id="c2Edit" name="c2Edit" class="inplace">
<input id="d2Edit" name="d2Edit" class="inplace">
<input id="e2Edit" name="e2Edit" class="inplace">
<ul id="list2" class="sortable boxy">
<li>
<div id="a2View" class="view">alpha</div>
</li>
<li>
<div id="b2View" class="view">bravo</div>
</li>
<li>
<div id="c2View" class="view">charlie</div>
</li>
<li>
<div id="d2View" class="view">delta</div>
</li>
<li>
<div id="e2View" class="view">echo</div>
</li>
</ul>
</td>
<td>
<!--
IE 5.5+ BugFix: don"t put these inside a
"position: relative" layer
-->
<input style="top: 825px; left: 386px; visibility: visible;" id="a3Edit" name="a3Edit" class="inplace">
<input id="b3Edit" name="b3Edit" class="inplace">
<input id="c3Edit" name="c3Edit" class="inplace">
<input id="d3Edit" name="d3Edit" class="inplace">
<input id="e3Edit" name="e3Edit" class="inplace">
<ul id="list3" class="sortable boxy">
<li>
<div id="b3View" class="view">bravo</div>
</li>
<li>
<div id="c3View" class="view">charlie</div>
</li>
<li>
<div id="d3View" class="view">delta</div>
</li>
<li style="opacity: 1; z-index: auto; top: 0px; left: 0px;">
<div style="visibility: hidden;" id="a3View" class="view">alpha</div>
</li><li>
<div id="e3View" class="view">echo</div>
</li>
</ul>
</td>
</tr>
<tr>
<td class="caption">Sort only</td>
<td class="caption">Sort and edit (double click)</td>
<td class="caption">Sort and edit (single click)</td>
</tr>
<tr>
<th>List 4</th>
<th>List 5</th>
<th></th>
</tr>
<tr>
<td>
<div id="list4Editors">
<input id="a4Edit" name="a4Edit" class="inplace" tabindex="10">
<input id="b4Edit" name="b4Edit" class="inplace" tabindex="10">
<input id="c4Edit" name="c4Edit" class="inplace" tabindex="10">
<input id="d4Edit" name="d4Edit" class="inplace" tabindex="10">
<input id="e4Edit" name="e4Edit" class="inplace" tabindex="10">
</div>
<ul id="list4" class="sortable boxy">
<li>
<div class="handle"></div>
<div id="a4View" class="view">alpha</div>
</li>
<li>
<div class="handle"></div>
<div id="b4View" class="view">bravo</div>
</li>
<li>
<div class="handle"></div>
<div id="c4View" class="view">charlie</div>
</li>
<li>
<div class="handle"></div>
<div id="d4View" class="view">delta</div>
</li>
<li>
<div class="handle"></div>
<div id="e4View" class="view">echo</div>
</li>
</ul>
</td>
<td>
<ul id="list5" class="sortable boxy">
<li>
<div class="handle"></div>
<input id="a5Edit" name="a5Edit" value="alpha">
</li>
<li>
<div class="handle"></div>
<input id="b5Edit" name="b5Edit" value="bravo">
</li>
<li>
<div class="handle"></div>
<input id="c5Edit" name="c5Edit" value="charlie">
</li>
<li>
<div class="handle"></div>
<input id="d5Edit" name="d5Edit" value="delta">
</li>
<li>
<div class="handle"></div>
<input id="e5Edit" name="e5Edit" value="echo">
</li>
</ul>
</td>
</tr>
<tr>
<td class="caption">Drag handles</td>
<td class="caption">Always editable</td>
<td class="caption"></td>
</tr>
</tbody></table>
<br>
<a name="slideshow-example"></a>
<table><tbody><tr><td>
<div id="slideEditors">
<!--
IE 5.5+ BugFix: don"t put these inside a "position: relative" layer
-->
<input id="oneEdit" name="oneEdit" class="inplace">
<input id="twoEdit" name="oneEdit" class="inplace">
<input id="threeEdit" name="oneEdit" class="inplace">
<input id="fourEdit" name="oneEdit" class="inplace">
<input id="fiveEdit" name="oneEdit" class="inplace">
<input id="sixEdit" name="oneEdit" class="inplace">
</div>
<ul id="slideshow" class="slideshow">
<li class="slide">
<div class="thumb handle"><img src="dragableSlide1.png"></div>
<div id="oneView" class="view">Slide 1</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide2.png"></div>
<div id="twoView" class="view">Slide 2</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide3.png"></div>
<div id="threeView" class="view">Slide 3</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide4.png"></div>
<div id="fourView" class="view">Slide 4</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide5.png"></div>
<div id="fiveView" class="view">Slide 5</div>
</li>
<li class="slide">
<div class="thumb handle"><img src="dragableSlide6.png"></div>
<div id="sixView" class="view">Slide 6</div>
</li>
</ul>
</td></tr></tbody></table>
<br style="clear: both;">
<div id="copyright">Copyright 2005 Tim Taylor Consulting
(<a href="http://tool-man.org/examples/LICENSE.txt">license</a>)</div>
</body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/edit-in-place_files.zip">edit-in-place_files.zip( 49 k)</a>
Editor based on Javascript
<A href="http://www.wbex.ru/Code/JavaScriptDownload/areaedit.zip">areaedit.zip( 1,319 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/Richtext.htm">Rich text</a> <A href="/Code/JavaScript/GUI-Components/Richtext.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm">WebFX Dynamic Webboard 2.0</a> <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm">HTML Text Editing Component for hosting in Web Pages</a> <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/WalterAWYSIWYGHTMLeditorthatrunspurelyonJavaScript.htm">Walter - A WYSIWYG HTML editor that runs purely on JavaScript</a> 5. <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm">Text Editor in JavaScript: toolbar, Color picker, Bold style etc</a> <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm">Edit in place (Direct edit)</a> <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm">WebIEdit</a> <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm">Bitflux Editor Examples</a> <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/editarea0811.htm">editarea 0.8.1.1 </a> <A href="/Code/JavaScript/GUI-Components/editarea0811.htm"></a>
HTML Text Editing Component for hosting in Web Pages
<!--
#################################################################################
##
## HTML Text Editing Component for hosting in Web Pages
## Copyright (C) 2001 Ramesys (Contracting Services) Limited
##
## This library is free software; you can redistribute it and/or
## modify it under the terms of the GNU Lesser General Public
## License as published by the Free Software Foundation; either
## version 2.1 of the License, or (at your option) any later version.
##
## This library is distributed in the hope that it will be useful,
## but WITHOUT ANY WARRANTY; without even the implied warranty of
## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
## Lesser General Public License for more details.
##
## You should have received a copy of the GNU LesserGeneral Public License
## along with this program; if not a copy can be obtained from
##
## http://www.gnu.org/copyleft/lesser.html
##
## or by writing to:
##
## Free Software Foundation, Inc.
## 59 Temple Place - Suite 330,
## Boston,
## MA 02111-1307,
## USA.
##
## Original Developer:
##
## Austin David France
## Ramesys (Contracting Services) Limited
## Mentor House
## Ainsworth Street
## Blackburn
## Lancashire
## BB1 6AY
## United Kingdom
## email: Austin.France@Ramesys.ru
##
## Home Page: http://richtext.sourceforge.net/
## Support: http://richtext.sourceforge.net/
##
#################################################################################
## Modified by Alex Baker
## 03/21/2002
## 1) Removed css link so there is only one document to keep track of
## 2) Added Table Height and Width parameters
## 3) Added a label and header class in the style sheet to control look of dialog
## 4) Cleaned up the layout of the table a touch. Removed unneeded empty <td> tags
## 5) Cleaned up the output of the table with a few tabs and returns
-->
<html>
<head>
<meta name="vs_targetSchema" content="HTML 4.0">
<style>
BODY {
background-color: buttonface;
border: 0;
margin: 2px;
}
INPUT{
font-family: sans-serif;
font-size: 8pt;
}
INPUT.button {
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid black;
border-right: 1px solid black;
font-size: 8pt;
width: 60;
}
.label{
font-family: sans-serif;
font-size: 8pt;
text-align: right;
}
.header{
font-family: sans-serif;
font-size: 8pt;
font-weight : bold;
text-align: left;
}
</style>
<title>Insert Table</title>
<script language="JavaScript">
<!--
function attr( name, value ) {
if (!value || value == "") return "";
return " " + name + "="" + value + """;
}
function insertTable() {
var nRows = rows.value ? parseInt(rows.value) : 2;
var nCols = cols.value ? parseInt(cols.value) : 2;
var strHTML = "<TABLE"
+ attr("border", borderWidth.value)
+ attr("height", tableHeight.value)
+ attr("width", tableWidth.value)
+ attr("bordercolor", borderColor.value)
+ attr("cellspacing", cellSpacing.value)
+ attr("cellpadding", cellPadding.value)
+ attr("bgcolor", backgroundColor.value)
+ ">\n";
for (var i = 0; i < nRows; i++) {
strHTML += "\t<TR>\n";
for (var j = 0; j < nCols; j++) {
strHTML += "\t\t<TD></TD>\n";
}
strHTML += "\t</TR>\n";
}
strHTML += "</TABLE>\n";
window.returnValue = strHTML;
window.close();
}
function cancel() {
window.returnValue = null;
window.close();
}
//-->
</script>
</head>
<body scroll="no">
<table class="dlg" border="0" cellpadding="0" cellspacing="0" width="240px">
<tr>
<td>
<table width="100%">
<tr>
<td class="header">Layout</td>
<td valign="middle" width="90%">
<hr width="100%">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="1" cellspacing="0">
<tr>
<td class="label">Rows:</td>
<td valign="middle">
<input type="text" class="inputBox" name="rows" value="2" size="1" maxlength="4">
</td>
<td class="label">Cols:</td>
<td valign="middle">
<input type="text" name="cols" value="2" size="1" maxlength="4">
</td>
</tr>
<tr>
<td class="label"><nobr>Cell Padding:</nobr></td>
<td valign="middle">
<input type="text" name="cellPadding" value="0" size="1" maxlength="4">
</td>
<td class="label"><nobr>Cell Spacing:<nobr></td>
<td valign="middle">
<input type="text" name="cellSpacing" value="0" size="1" maxlength="4">
</td>
</tr>
<tr>
<td class="label"><nobr>Table Width:</nobr></td>
<td valign="middle">
<input type="text" name="tableWidth" value="100%" size="1" maxlength="5">
</td>
<td class="label"><nobr>Table Height:<nobr></td>
<td valign="middle">
<input type="text" name="tableHeight" value="" size="1" maxlength="5">
</td>
</tr>
<tr>
<td class="label"><nobr>Rows Height:</nobr></td>
<td valign="middle">
<input type="text" name="rowHeight" value="" size="1" maxlength="5">
</td>
<td class="label"><nobr>Column Width:</nobr></td>
<td valign="middle">
<input type="text" name="colWidth" value="" size="1" maxlength="5">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td class="header"><nobr>Borders</nobr></td>
<td valign="middle" width="90%">
<hr width="100%">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="1" cellspacing="0">
<tr>
<td class="label">Size:</td>
<td valign="middle">
<input type="text" name="borderWidth" value="1" size="1" maxlength="4">
</td>
<td class="label">Color:</td>
<td valign="middle">
<input type="text" name="borderColor" value="" size="10">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr>
<td class="header">Background</td>
<td valign="middle" width="90%">
<hr width="100%">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="1" cellspacing="0">
<tr>
<td class="label">Color:</td>
<td valign="middle">
<input type="text" name="backgroundColor" value="" size="15">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr width="100%">
</td>
</tr>
<tr>
<td align="right">
<input class="button" type="button" value="Insert" title="Insert Table" onclick="insertTable()">
<input class="button" type="button" value="Cancel" title="Cancel Dialog" onclick="cancel()">
</td>
</tr>
</table>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/XsDhtmlEditor_0.95.zip">XsDhtmlEditor_0.95.zip( 134 k)</a>
Rich text
<A href="http://www.wbex.ru/Code/JavaScriptDownload/richtext-0-3-0-beta-1.zip">richtext-0-3-0-beta-1.zip( 153 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm">Editor based on Javascript</a> <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm">WebFX Dynamic Webboard 2.0</a> <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm">HTML Text Editing Component for hosting in Web Pages</a> <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/WalterAWYSIWYGHTMLeditorthatrunspurelyonJavaScript.htm">Walter - A WYSIWYG HTML editor that runs purely on JavaScript</a> 5. <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm">Text Editor in JavaScript: toolbar, Color picker, Bold style etc</a> <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm"></a> 6. <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm">Edit in place (Direct edit)</a> <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm">WebIEdit</a> <A href="/Code/JavaScript/GUI-Components/WebIEdit.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm">Bitflux Editor Examples</a> <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/editarea0811.htm">editarea 0.8.1.1 </a> <A href="/Code/JavaScript/GUI-Components/editarea0811.htm"></a>
Text Editor in JavaScript: toolbar, Color picker, Bold style etc
<!--
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: sample01.html
* Sample page.
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<link href="_samples/sample.css" rel="stylesheet" type="text/css" />
<!-- fckeditor.js -->
<script type="text/javascript">
/*
* FCKeditor - The text editor for internet
* Copyright (C) 2003-2005 Frederico Caldeira Knabben
*
* Licensed under the terms of the GNU Lesser General Public License:
* http://www.opensource.org/licenses/lgpl-license.php
*
* For further information visit:
* http://www.fckeditor.net/
*
* File Name: fckeditor.js
* This is the integration file for JavaScript.
*
* It defines the FCKeditor class that can be used to create editor
* instances in a HTML page in the client side. For server side
* operations, use the specific integration system.
*
* File Authors:
* Frederico Caldeira Knabben (fredck@fckeditor.net)
*/
// FCKeditor Class
var FCKeditor = function( instanceName, width, height, toolbarSet, value )
{
// Properties
this.InstanceName = instanceName ;
this.Width = width || "100%" ;
this.Height = height || "200" ;
this.ToolbarSet = toolbarSet || "Default" ;
this.Value = value || "" ;
this.BasePath = "/fckeditor/" ;
this.CheckBrowser = true ;
this.DisplayErrors = true ;
this.EnableSafari = false ; // This is a temporary property, while Safari support is under development.
this.Config = new Object() ;
// Events
this.OnError = null ; // function( source, errorNumber, errorDescription )
}
FCKeditor.prototype.Create = function()
{
// Check for errors
if ( !this.InstanceName || this.InstanceName.length == 0 )
{
this._ThrowError( 701, "You must specify a instance name." ) ;
return ;
}
document.write( "<div>" ) ;
if ( !this.CheckBrowser || this._IsCompatibleBrowser() )
{
document.write( "<input type="hidden" id="" + this.InstanceName + "" name="" + this.InstanceName + "" value="" + this._HTMLEncode( this.Value ) + "" />" ) ;
document.write( this._GetConfigHtml() ) ;
document.write( this._GetIFrameHtml() ) ;
}
else
{
var sWidth = this.Width.toString().indexOf("%") > 0 ? this.Width : this.Width + "px" ;
var sHeight = this.Height.toString().indexOf("%") > 0 ? this.Height : this.Height + "px" ;
document.write("<textarea name="" + this.InstanceName + "" rows="4" cols="40" style="WIDTH: " + sWidth + "; HEIGHT: " + sHeight + "" wrap="virtual">" + this._HTMLEncode( this.Value ) + "<\/textarea>") ;
}
document.write( "</div>" ) ;
}
FCKeditor.prototype.ReplaceTextarea = function()
{
if ( !this.CheckBrowser || this._IsCompatibleBrowser() )
{
var oTextarea = document.getElementById( this.InstanceName ) ;
if ( !oTextarea )
oTextarea = document.getElementsByName( this.InstanceName )[0] ;
if ( !oTextarea || oTextarea.tagName != "TEXTAREA" )
{
alert( "Error: The TEXTAREA id "" + this.InstanceName + "" was not found" ) ;
return ;
}
oTextarea.style.display = "none" ;
this._InsertHtmlBefore( this._GetConfigHtml(), oTextarea ) ;
this._InsertHtmlBefore( this._GetIFrameHtml(), oTextarea ) ;
}
}
FCKeditor.prototype._InsertHtmlBefore = function( html, element )
{
if ( element.insertAdjacentHTML ) // IE
element.insertAdjacentHTML( "beforeBegin", html ) ;
else // Gecko
{
var oRange = document.createRange() ;
oRange.setStartBefore( element ) ;
var oFragment = oRange.createContextualFragment( html );
element.parentNode.insertBefore( oFragment, element ) ;
}
}
FCKeditor.prototype._GetConfigHtml = function()
{
var sConfig = "" ;
for ( var o in this.Config )
{
if ( sConfig.length > 0 ) sConfig += "&" ;
sConfig += escape(o) + "=" + escape( this.Config[o] ) ;
}
return "<input type="hidden" id="" + this.InstanceName + "___Config" value="" + sConfig + "" />" ;
}
FCKeditor.prototype._GetIFrameHtml = function()
{
var sLink = this.BasePath + "editor/fckeditor.html?InstanceName=" + this.InstanceName ;
if (this.ToolbarSet) sLink += "&Toolbar=" + this.ToolbarSet ;
return "<iframe id="" + this.InstanceName + "___Frame" src="" + sLink + "" width="" + this.Width + "" height="" + this.Height + "" frameborder="no" scrolling="no"></iframe>" ;
}
FCKeditor.prototype._IsCompatibleBrowser = function()
{
var sAgent = navigator.userAgent.toLowerCase() ;
// Internet Explorer
if ( sAgent.indexOf("msie") != -1 && sAgent.indexOf("mac") == -1 && sAgent.indexOf("opera") == -1 )
{
var sBrowserVersion = navigator.appVersion.match(/MSIE (.\..)/)[1] ;
return ( sBrowserVersion >= 5.5 ) ;
}
// Gecko
else if ( navigator.product == "Gecko" && navigator.productSub >= 20030210 )
return true ;
// Safari
else if ( this.EnableSafari && sAgent.indexOf( "safari" ) != -1 )
return ( sAgent.match( /safari\/(\d+)/ )[1] >= 312 ) ; // Build must be at least 312 (1.3)
else
return false ;
}
FCKeditor.prototype._ThrowError = function( errorNumber, errorDescription )
{
this.ErrorNumber = errorNumber ;
this.ErrorDescription = errorDescription ;
if ( this.DisplayErrors )
{
document.write( "<div style="COLOR: #ff0000">" ) ;
document.write( "[ FCKeditor Error " + this.ErrorNumber + ": " + this.ErrorDescription + " ]" ) ;
document.write( "</div>" ) ;
}
if ( typeof( this.OnError ) == "function" )
this.OnError( this, errorNumber, errorDescription ) ;
}
FCKeditor.prototype._HTMLEncode = function( text )
{
if ( typeof( text ) != "string" )
text = text.toString() ;
text = text.replace(/&/g, "&") ;
text = text.replace(/"/g, """) ;
text = text.replace(/</g, "<") ;
text = text.replace(/>/g, ">") ;
text = text.replace(/"/g, "'") ;
return text ;
}
</script>
</head>
<body>
<h1>FCKeditor - Javascript - Sample 1</h1>
This sample displays a normal HTML form with an FCKeditor with full features
enabled.
<hr>
<form action="sampleposteddata.asp" method="post" target="_blank">
<script type="text/javascript">
<!--
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = "/fckeditor/" ; // "/fckeditor/" is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf("_samples")) ;
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.BasePath = sBasePath ;
oFCKeditor.Height = 300 ;
oFCKeditor.Value = "This is some <strong>sample text<\/strong>. You are using <a href="http://www.fckeditor.net/">FCKeditor<\/a>." ;
oFCKeditor.Create() ;
//-->
</script>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/FCKeditor_2.0.zip">FCKeditor_2.0.zip( 1,095 k)</a>
Walter - A WYSIWYG HTML editor that runs purely on JavaScript
<html>
<head>
<title>Walter - A WYSIWYG HTML editor that runs purely on JavaScript</title>
<style>
#cursor {color: red; background-color: #ffdddd}
</style>
</head>
<body id="body"
onload="load_walter();">
<div id="text">
<p>This is a wysiwyg HTML-editor. You can write text directly into the browser window:</p>
<p><span id="cursor">I</span>
</p>
</div>
<hr />
<script language="JavaScript" type="text/javascript" >
/*
LICENSE
Walter is Open Source (http://www.opensource.org/)
You can freely use, copy and develop it in any way you see fit,
according to the following license (the MIT License):
Copyright (c) 2003 Henrik Ingo
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
WALTER - an in-browser WYSIWYG HTML editor written in JavaScript
Walter will intercept your keystrokes and insert text to the webpage you
are viewing in your broswer. The idea is to turn your browser into a
WYSIWYG HTML editor.
Main uses for Walter might be as a replacement for a <textarea> in
- chats and bulletinboards
- content management systems
...given that Linux IMHO currently has no WYsIWYG HTML-editors, I
could see Walter becoming one. But let"s not get carried away.
MAIN PHILOSOPHY
Main philosophy of Walter is:
- the wysiwyg part is handled by the fact, that we are doing this in
a browser
- The W3C DOM allows any kind of manipulation of the HTML in a page
- We just have to intercept keystrokes and commands from the user
(this is a little tricky) and actually implementing the DOM manipulation
(first release of walter already had 790 lines of JavaScript)
CURRENT FEATURES
Walter currently knows how to write and erase (backspace) text. Enter makes
a new paragraph, shift+enter a br. Any inline tags can work (b, i, img, a)
but only the most common are exposed as buttons.
p and heading elements are supported, but not tables, lists or other "large"
block elements.
There is no support for mouse movements and also no other way of marking text.
Thus bold and other effects can only be used while writing, you cannot format
text afterwards. You can move with left and right arrows (only Opera on windows)
up and down are not implemented.
The current GUI is a simple auto-generated set of buttons that purposefully
exposes the inner logic of walter. When more things work a real GUI needs to
be built.
MAIN CHALLENGES
Altough the DOM is a great API, listening to keyboard and especially mouse
events is not very standardised. Early experiences suggest that keystrokes
will not be a problem, mouse-events might need some imagination (not tried
yet). Non-characters (arrows, delete...) have different keycodes in
different browsers, which will be a major challence.
BROWSERS
Walter works on the following browsers:
IE4, NS4
Will not work, we use DOM.
IE5 and above
As for JavaScript support, this will work on IE5 and above,
but at least IE6 will crash after a few keystrokes. It simply
can"t take the pounding
Mozilla and derivatives
Works great
Opera
Works great
Arrows and some other keys have different keycodes in Opera than in
Moz and IE
Konqueror 3.1.0
Doesn"t seem to do anything. Have not checked why this is.
LICENSE
Walter is Open Source (http://www.opensource.org/)
You can freely use, copy and develop it in any way you see fit,
according to the following license (the MIT License):
Copyright (c) 2003 Henrik Ingo
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/
// Developer section starts here //
// Known bugs
// - No point in even keeping track yet, a lot is simply missing
// The parts that exist should work though!
//TODO-list
//TODO: implement delete
//TODO: implement up and down arrows
//TODO: isn"t right arrow and left arrow mirrors of each other? same with del and backspace?
//TODO: alt+b (html acceskey) for bold etc...
//TODO: make View HTML such that you can switch back to WYSIWYG
//TODO: format the HTML with nice indents and linebreaks before showing it
//TODO: also somehow remove empty elements that are sometimes left behind
// and merge adjacent textnodes into one
//TODO: make it possible to mark text and apply formatting
//TODO: make it possible to use the mouse for that
//TODO: We might need a special "command mode" (like vi!)
// because in Moz and IE keycodes for arrows etc...
// overlap with characters
// The other solution is to define a lot of buttons and
// accesskeys for them (alt-l for left arrow etc...)
//TODO: make a nice GUI
//TODO: Make walter able to "hijack" a given textarea or to make any
// other given (by id) element editable
//**********************************************************
// Some common "constants"
//dom constants
var ELEMENT_NODE = 1;
var TEXT_NODE = 3;
var debug_mode = true;
//**********************************************************
//Supported elements
/* Walter divides HTML-elements into four groups.
Inline elements are divided into *empty* elements
and *inline* elements. "Empty elements" are those
like <img> and <br>. It"s an error to try to insert
anything into an empty element (and the browser will
let you know...). "Inline elements" are all the other
inline elements like <b>, <i>, <a>...
Block elements are divided into *paragraph* and *block*
elements of which the latter are not yet supported.
Paragraph elements are <p>, <h1> and so forth. Everything
else are block elements.
A lot of logic depends on a rule that the cursor will always
be inside exactly one paragraph element (a <p> for instance).
Obviously (it follows from the above rule and the HTML standard)
all inline and empty elements must also be inside exactly one such
element.
You can add an element that is not supported simply by adding
appropriate lines below. All creation and manipulation of
elements relies on information from this elements-object.
Even the GUI buttons are currently created automatically from that.
*/
var elements = new Object();
elements.Empty = new Array();
elements.Empty[0] = new Object();
//text to show on button or as a tooltip
elements.Empty[0].show = "image";
//when using image-type buttons, the url to the image
elements.Empty[0].image = "";
//the actual html element to insert
elements.Empty[0].tagname = "img";
//attributes that need to be set
elements.Empty[0].attributes = new Array();
elements.Empty[0].attributes[0] = new Object();
elements.Empty[0].attributes[0].name = "src";
elements.Empty[0].attributes[0].prompttext = "Give address of the image to be inserted:";
//optional attributes (some kind of "advanced" or "more" options) can be defined like this
elements.Empty[0].attributes[1] = new Object();
elements.Empty[0].attributes[1].name = "border";
elements.Empty[0].attributes[1].prompttext = "Width of border:";
elements.Empty[0].attributes[1].optional = true;
elements.Empty[1] = new Object();
elements.Empty[1].show = "br";
elements.Empty[1].tagname = "br";
elements.Empty[2] = new Object();
elements.Empty[2].show = "form input field";
elements.Empty[2].tagname = "input";
elements.Empty[2].attributes = new Array();
elements.Empty[2].attributes[0] = new Object();
elements.Empty[2].attributes[0].name = "type";
elements.Empty[2].attributes[0].prompttext =
"What type of input field to insert? " +
"(text, password, checkbox, radio, button, submit, reset):";
elements.Empty[2].attributes[1] = new Object();
elements.Empty[2].attributes[1].name = "name";
elements.Empty[2].attributes[1].prompttext =
"Give the name of the element:";
elements.Inline = new Array();
elements.Inline[0] = new Object();
elements.Inline[0].show = " b ";
elements.Inline[0].tagname = "b";
elements.Inline[1] = new Object();
elements.Inline[1].show = " i ";
elements.Inline[1].tagname = "i";
elements.Inline[2] = new Object();
elements.Inline[2].show = " u ";
elements.Inline[2].tagname = "u";
elements.Inline[3] = new Object();
elements.Inline[3].show = "hyperlink (a href)";
elements.Inline[3].tagname = "a";
elements.Inline[3].attributes = new Array();
elements.Inline[3].attributes[0] = new Object();
elements.Inline[3].attributes[0].name = "href";
elements.Inline[3].attributes[0].prompttext = "Give the URL of this link:";
elements.Inline[4] = new Object();
elements.Inline[4].show = "anchor (a name)";
elements.Inline[4].tagname = "a";
elements.Inline[4].attributes = new Array();
elements.Inline[4].attributes[0] = new Object();
elements.Inline[4].attributes[0].name = "name";
elements.Inline[4].attributes[0].prompttext = "Give the name of this anchor:";
elements.Paragraph = new Array();
elements.Paragraph[0] = new Object();
elements.Paragraph[0].show = "Normal text";
elements.Paragraph[0].tagname = "p";
elements.Paragraph[1] = new Object();
elements.Paragraph[1].show = "Heading 1";
elements.Paragraph[1].tagname = "h1";
elements.Paragraph[2] = new Object();
elements.Paragraph[2].show = "Heading 2";
elements.Paragraph[2].tagname = "h2";
elements.Paragraph[3] = new Object();
elements.Paragraph[3].show = "Heading 3";
elements.Paragraph[3].tagname = "h3";
elements.Paragraph[4] = new Object();
elements.Paragraph[4].show = "Preformatted";
elements.Paragraph[4].tagname = "pre";
//****************************************************************************
//Create a table that functions as a lookup index to the elements[] table
var myElementsByTagName = new Array();
for(set in elements){
for(i = 0; elements[set][i]; i++){
myElementsByTagName[elements[set][i].tagname] = i;
}
}
//******************************************************************************
//Create a panel with buttons
//This panel is inserted at the place where the <script> element is in the html
document.write("<div id="walter_controls">"+
"<p>This is the box that reads the letters you type. <br />" +
"If nothing happens, click here and try again <br />" +
"-><input type="text" id="walter_input" /></p>" +
"<p><input type="button" value="View HTML" onclick="editor_viewHTML(this);" /></p>");
//This prints buttons to move left right etc...
document.write("<p><input type="button" value="<-" onclick="cursor_move_left();" "
+ "title="move left (alt+f)" accesskey="f" />"
+ "<input type="button" value="->" onclick="cursor_move_right();" "
+ "title="move right (alt+h)" accesskey="h" />"
+ "</p>");
//This prints the buttons to create various elements
for(set in elements){
document.write("<p>" + set + " elements:<br />");
for(i = 0; elements[set][i]; i++){
document.write("<input type="button" value="" + elements[set][i].show +
"" onclick="" + set + "_clicked(" + i +");" />");
//notice the weird construction of the onclick handler above
//which is Empty_clicked() and Inline_clicked() and so on...
}
document.write("</p>");
}
document.write("</div>");
//******************************************************************************
// FUNCTIONS START HERE
// TABLE OF CONTENTS:
// EDITOR MAIN FUNCTIONS
// GENERALLY HELPFUL FUNCTIONS
// RESPONSES TO THE DIFFERENT BUTTONS (mostly insert or toggle an element)
// DELETIONS AND MOVEMENTS
//******************************************************************************
// EDITOR MAIN FUNCTIONS
//Call this from <body onload=""> or whenever you want to start walter
function load_walter(){
//register event listeners
//TODO: There might be browsers that require this to be done
//on the input-element instead
document.getElementById("body").onkeypress=editor;
document.getElementById("body").onkeydown=editor_specialkeys;
//TODO: We would also want to insert the cursor automatically here
//and perhaps take the editable elements id (inside which the cursor needs to be)
//as an argument
//move focus to the input box
document.getElementById("walter_input").focus();
}
//This function gets called when someone presses a key in the input box
//Here we do the main job of deciding what to do
function editor(e)
{
var code;
//look for the keycode in different places for IE and other browsers
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
// alert(e.DOM_VK_LEFT);
//alert(code);
//if ctrl or alt are down, it"s not counted as writing
//some browsers (opera) report the actual keydown of shift as a keypress-event too
//and that is also not counted as writing (shift is not a character in it self!)
if(e.altKey || e.ctrlKey || isSpecialKey(code)){
document.getElementById("walter_input").value = "";
return false;
}
//Did he press enter?
if(code == 13){
//was it just enter or maybe shift+enter?
if(e.shiftKey){
Empty_clicked(myElementsByTagName["br"]);
}else{
newParagraph("p");
}
}
else{
var character = String.fromCharCode(code);
var cursor = document.getElementById("cursor");
var ins = document.createTextNode(character);
cursor.parentNode.insertBefore(ins, cursor);
if(cursor.parentNode.normalize)
//removes multiple spaces etc...
cursor.parentNode.normalize();
}
//prevent the character from actually showing up in the input-box
document.getElementById("walter_input").value = "";
return false;
}
function editor_specialkeys(e){
var code;
//look for the keycode in different places for IE and other browsers
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
//check for different keys and do stuff
if(code == 8)
key_backsp();
}
//**********************************************************************
// GENERALLY HELPFUL FUNCTIONS
//TODO: I should probably think through the handling of these special characters
//once more.
//The big numbers occur in Opera, the small in IE and Moz.
function isSpecialKey(code){
//in order of appearance:
// shift, backspace,
if(code == 16 || code == 57389 || code == 8)
return true;
return false;
}
//Paragraph elements are those that are defined in the elements.Paragraph[]
//array (p, h1 etc...).
function isParagraphElement(e){
for(var i = 0; elements.Paragraph[i]; i++){
if(elements.Paragraph[i].tagname.toLowerCase() == e.nodeName.toLowerCase()){
return true;
}
}
return false;
}
//returns the previousSibling node
//but skips textnodes that are empty
//if cursor is the firstChild (not counting empty textnodes) null is returned
function getPreviousSiblingNode(cursor){
//Problem: Between any two elements there seems to always exist a textnode, so
//previousSibling is not false, even if we think we are the first element
//solution: skip empty non-elements
var prev = cursor.previousSibling;
while( (prev) && prev.nodeType != ELEMENT_NODE && (!prev.nodeValue) ){
prev = prev.previousSibling;
}
return prev;
}
function getNextSiblingNode(cursor){
//Problem: Between any two elements there seems to always exist a textnode, so
//nextSibling is not null, even if we think we are the first element
//solution: skip empty non-elements
var nextE = cursor.nextSibling;
while( (nextE) && nextE.nodeType != ELEMENT_NODE && (!nextE.nodeValue) ){
nextE = nextE.nextSibling;
}
return nextE;
}
//**********************************************************************
// RESPONSES TO THE DIFFERENT BUTTONS (mostly insert or toggle an element)
// note that the naming of the *_clicked functions corresponds to the name
// in the elements.* collection
//this function toggles inline elements (like b or i) on or off
function Inline_clicked(i){
var cursor = document.getElementById("cursor");
var doclosing = false;
//find out whether we are closing an element or opening
//browse through parents until we get to <p>
var lookup = cursor;
while(!isParagraphElement(lookup.parentNode) && !doclosing){
if(lookup.parentNode.nodeName.toLowerCase() == elements.Inline[i].tagname.toLowerCase()){
doclosing = true;
}
lookup.chainToClosing = lookup.parentNode;
var temp = lookup;
lookup = lookup.parentNode;
lookup.chainToCursor = temp;
}
if(doclosing){
Inline_close(i, cursor, lookup);
}else{
Inline_open(i, cursor);
}
//move focus to the input box
document.getElementById("walter_input").focus();
}
function Inline_close(i, cursor, lookup){
//in case the element we are closing isn"t the innermost one
//we need to remember all elements between it and the cursor first
//then get outside the actual element and finally reopen all the others again
//this information is contained in lookup
//move cursor behind the closing element
cursor = cursor.parentNode.removeChild(cursor);
if(lookup.nextSibling)
lookup.parentNode.insertBefore(cursor, lookup.nextSibling);
else
lookup.parentNode.appendChild(cursor);
//then reopen any elements that were open between the cursor and closing element
var clone = lookup.chainToCursor;
while(clone != cursor){
var newE = clone.cloneNode(false);
cursor.parentNode.insertBefore(newE, cursor);
cursor = cursor.parentNode.removeChild(cursor);
newE.appendChild(cursor);
clone = clone.chainToCursor;
}
}
function Inline_open(i, cursor){
var parent = cursor.parentNode;
var newE = document.createElement(elements.Inline[i].tagname);
setElementAttributes(newE, elements.Inline[i], false);
if(cursor.nextSibling)
cursor.parentNode.insertBefore(newE, cursor.nextSibling);
else
cursor.parentNode.appendChild(newE);
//move cursor to the new node
cursor = parent.removeChild(cursor);
newE.appendChild(cursor);
}
//This function adds empty elements (like br or img) to the cursor position
function Empty_clicked(i){
var cursor = document.getElementById("cursor");
var parent = cursor.parentNode;
var newE = document.createElement(elements.Empty[i].tagname);
setElementAttributes(newE, elements.Empty[i], false);
parent.insertBefore(newE, cursor);
//move focus to the input box
document.getElementById("walter_input").focus();
}
function Paragraph_clicked(i){
newParagraph(elements.Paragraph[i].tagname);
}
function setElementAttributes(DOMelement, OURelement, setOptional){
for(var i=0; OURelement.attributes && OURelement.attributes[i]; i++){
if(OURelement.attributes[i].optional){
if(!setOptional){
break;
}
}
DOMelement.setAttribute(OURelement.attributes[i].name,
prompt(OURelement.attributes[i].prompttext, "",
"Set attribute: " + OURelement.attributes[i].name));
}
}
function newParagraph(tagname){
var cursor = document.getElementById("cursor");
//find out whether there are inline elements between cursor and p
//that need to be closed now and reopened in the next p
var p = cursor;
while(!isParagraphElement(p)){
p.chainToP = p.parentNode;
var temp = p;
p = p.parentNode;
p.chainToCursor = temp;
}
//Make a new paragraph element
var newP = document.createElement(tagname);
if(p.nextSibling)
p.parentNode.insertBefore(newP, p.nextSibling);
else
p.parentNode.appendChild(newP);
//move cursor to the new node
cursor = cursor.parentNode.removeChild(cursor);
newP.appendChild(cursor);
//then reopen any elements that were open between the cursor and closing element
var clone = p.chainToCursor;
while(clone != cursor){
var newE = clone.cloneNode(false);
cursor.parentNode.insertBefore(newE, cursor);
cursor = cursor.parentNode.removeChild(cursor);
newE.appendChild(cursor);
clone = clone.chainToCursor;
}
}
function editor_viewHTML(button){
var cursor = document.getElementById("cursor");
//cursor = cursor.parentNode.removeChild(cursor);
var textdiv = document.getElementById("text");
var contents = textdiv.innerHTML;
while(textdiv.hasChildNodes()){
textdiv.removeChild(textdiv.lastChild);
}
var newE = document.createElement("textarea");
newE.rows = 10; newE.cols = 60;
textdiv.appendChild(newE);
newE.value = contents;
}
//**********************************************************************
// DELETIONS AND MOVEMENTS
//function that deletes something to the left of the cursor...
function key_backsp(){
var cursor = document.getElementById("cursor");
var prev;
//Start with positioning the cursor so
//that there is something to the left of it to delete
//if we are the first child of a node, there is no previousSibling.
//example: abc<b>[cursor]abc</b>abc
//solution for inline elements: just position yourself outside of them (before them)
prev = getPreviousSiblingNode(cursor);
while( (!prev) && (!isParagraphElement(cursor.parentNode)) ){
var e = cursor.parentNode;
cursor = e.removeChild(cursor);
e.parentNode.insertBefore(cursor, e);
prev = getPreviousSiblingNode(cursor);
}
//solution when you are the first child of a paragraph: move to end of previous
//example: ...abc</p><p>[cursor]abc...
while( (!prev) && isParagraphElement(cursor.parentNode)){
var p = cursor.parentNode;
//Watch out for textnodes (and other garbage?) between
//Find the previous p, it"s not necessarily previousSibling
//TODO: This will skip <hr> and other block-elements, when they are implemented
prev = p.previousSibling;
while(!isParagraphElement(prev)){
prev = prev.previousSibling;
if(!prev){
if(debug_mode) alert("we are now at the beginning of this document");
return;
}
}
cursor = p.removeChild(cursor);
prev.appendChild(cursor);
//In fact, when moving to the end of the previous paragraph, in the users
//mind we have deleted one "enter", so that"s all for now!
return;
}
//And if the cursor is immediately behind an inline-element
//like this: abc<b>abc</b>[cursor]abc
//we have to move it so that it"s inside that element
prev = getPreviousSiblingNode(cursor);
while( prev && prev.nodeType == ELEMENT_NODE ){
//It"s an error to try to move inside an empty element (like br or img)
//Instead, the user probably expects that element to disappear
//Check for empty elements here
for(var i = 0; elements.Empty[i]; i++){
if(prev.tagName.toUpperCase() == elements.Empty[i].tagname.toUpperCase()){
prev.parentNode.removeChild(prev);
//that was a deletion, no need to continue
document.getElementById("walter_input").focus();
return;
}
}
//Not an Empty-element, so it"s an Inline-element
cursor = cursor.parentNode.removeChild(cursor);
prev.appendChild(cursor, prev);
prev = getPreviousSiblingNode(cursor);
}
//Last problem: If we landed inside an empty inline element in the previous
//phase, (example: from aaa<b></b>[cursor]aaa to aaa<b>[cursor]</b>aaa)
//there still isn"t anything to delete to the left of cursor.
//Easiest solution is by recursion: start all over again...
prev = getPreviousSiblingNode(cursor);
if(!prev){
key_backsp();
//But now we have already deleted a character, in the topmost recursion
//so that"s it for now
return;
}
//This is the actual deletion. We should now be in a position where this is trivial
//prev = cursor.previousSibling;
prev = getPreviousSiblingNode(cursor);
if(prev){
if(prev.nodeType == TEXT_NODE){
prev.nodeValue = prev.nodeValue.substring(0,prev.nodeValue.length -1);
//TODO: If there are multiple whitespace characters after each other
//they will only look like one in the browser but they will be deleted
//separately, giving an impression that nothing is happening until the last
//whitespace is deleted. Solution: Either prohibit the existence of
//multiple whitespace or add some extra checks here
}
}
//TODO: Now we are leaving behind lot"s of empty elements
//They are not really disturbing anyone, but sooner or later
//we"ll have to clean up
//move focus to the input box
document.getElementById("walter_input").focus();
}
//TODO: key_backsp() shares a lot of functionality with this. They could
//share a lot of code. same goes for cursor_move_right() et al...
function cursor_move_left(){
var cursor = document.getElementById("cursor");
var prev;
//We might have to move left several times before we get to something that
//actually looks like the cursor is moving in the eyes of the user
//text and empty elements count as movements, moving around other tags don"t
//A lot of this is similar to what happens in key_backsp()
//if we are the first child of a node, there is no previousSibling.
//example: abc<b>[cursor]abc</b>abc
//solution for inline elements: just position yourself outside of them (before them)
prev = getPreviousSiblingNode(cursor);
while( (!prev) && (!isParagraphElement(cursor.parentNode)) ){
var e = cursor.parentNode;
cursor = e.removeChild(cursor);
e.parentNode.insertBefore(cursor, e);
prev = getPreviousSiblingNode(cursor);
}
//solution when you are the first child of a paragraph: move to end of previous
//example: ...abc</p><p>[cursor]abc...
while( (!prev) && isParagraphElement(cursor.parentNode)){
var p = cursor.parentNode;
//Watch out for textnodes (and other garbage?) between
//Find the previous p, it"s not necessarily previousSibling
//TODO: This will skip <hr> and other block-elements, when they are implemented
prev = p.previousSibling;
while(!isParagraphElement(prev)){
prev = prev.previousSibling;
if(!prev){
//if(debug_mode) alert("we are now at the beginning of this document");
return;
}
}
cursor = p.removeChild(cursor);
prev.appendChild(cursor);
//In fact, when moving to the end of the previous paragraph, in the users
//mind we did move, so that"s all for now!
return;
}
//And if the cursor is immediately behind an inline-element
//like this: abc<b>abc</b>[cursor]abc
//we have to move it so that it"s inside that element
prev = getPreviousSiblingNode(cursor);
while( prev && prev.nodeType == ELEMENT_NODE ){
//It"s an error to try to move inside an empty element (like br or img)
//Instead, we should move past it
//Check for empty elements here
for(var i = 0; elements.Empty[i]; i++){
if(prev.tagName.toUpperCase() == elements.Empty[i].tagname.toUpperCase()){
cursor.parentNode.removeChild(cursor);
prev.parentNode.insertBefore(cursor, prev);
//that was a movement, no need to continue
document.getElementById("walter_input").focus();
return;
}
}
//Not an Empty-element, so it"s an Inline-element
cursor = cursor.parentNode.removeChild(cursor);
prev.appendChild(cursor, prev);
prev = getPreviousSiblingNode(cursor);
}
//Last problem: If we landed inside an empty inline element in the previous
//phase, (example: from aaa<b></b>[cursor]aaa to aaa<b>[cursor]</b>aaa)
//there still isn"t anything to the left of cursor.
//Easiest solution is by recursion: start all over again...
prev = getPreviousSiblingNode(cursor);
if(!prev){
cursor_move_left();
//But now we have already moved, in the topmost recursion
//so that"s it for now
return;
}
//This is the actual movement. We should now be in a position where this is trivial
//prev = cursor.previousSibling;
prev = getPreviousSiblingNode(cursor);
if(prev){
if(prev.nodeType == TEXT_NODE){
//what"s the last character in the text to our left
var oneCharacter = prev.nodeValue.substring(
prev.nodeValue.length -1, prev.nodeValue.length);
//remove it
prev.nodeValue = prev.nodeValue.substring(0,prev.nodeValue.length -1);
//and re-insert it after the cursor
var e = document.createTextNode(oneCharacter);
if(cursor.nextSibling){
cursor.parentNode.insertBefore(e, cursor.nextSibling);
}else{
cursor.parentNode.appendChild(e);
}
//TODO: If there are multiple whitespace characters after each other
//they will only look like one in the browser but they will be deleted
//separately, giving an impression that nothing is happening until the last
//whitespace is deleted. Solution: Either prohibit the existence of
//multiple whitespace or add some extra checks here
}
}
//move focus to the input box
document.getElementById("walter_input").focus();
}
function cursor_move_right(){
var cursor = document.getElementById("cursor");
var nextE;
//We might have to move right several times before we get to something that
//actually looks like the cursor is moving in the eyes of the user
//text and empty elements count as movements, moving around other tags don"t
//This function is like cursor_move_left() all backwards
//if we are the last child of a node, there is no nextSibling.
//example: abc<b>abc[cursor]</b>abc
//solution for inline elements: just position yourself outside of them (after them)
nextE = getNextSiblingNode(cursor);
while( (!nextE) && (!isParagraphElement(cursor.parentNode)) ){
var e = cursor.parentNode;
cursor = e.removeChild(cursor);
if(e.nextSibling){
e.parentNode.insertBefore(cursor, e.nextSibling);
}else{
e.parentNode.appendChild(cursor);
}
nextE = getNextSiblingNode(cursor);
}
//solution when you are the last child of a paragraph: move to beginning of next
//example: ...abc[cursor]</p><p>abc...
while( (!nextE) && isParagraphElement(cursor.parentNode)){
var p = cursor.parentNode;
//Watch out for textnodes (and other garbage?) between
//Find the previous p, it"s not necessarily previousSibling
//TODO: This will skip <hr> and other block-elements, when they are implemented
nextE = p.nextSibling;
while(!isParagraphElement(nextE)){
nextE = nextE.nextSibling;
if(!nextE){
//if(debug_mode) alert("we are now at the end of this document");
return;
}
}
cursor = p.removeChild(cursor);
if(nextE.firstChild){
nextE.insertBefore(cursor, nextE.firstChild);
}else{
nextE.appendChild(cursor);
}
//In fact, when moving to the beginning of the next paragraph, in the users
//mind we did move, so that"s all for now!
return;
}
//And if the cursor is immediately before an inline-element
//like this: abc[cursor]<b>abc</b>abc
//we have to move it so that it"s inside that element
nextE = getNextSiblingNode(cursor);
while( nextE && nextE.nodeType == ELEMENT_NODE ){
//It"s an error to try to move inside an empty element (like br or img)
//Instead, we should move past it
//Check for empty elements here
for(var i = 0; elements.Empty[i]; i++){
if(nextE.tagName.toUpperCase() == elements.Empty[i].tagname.toUpperCase()){
cursor.parentNode.removeChild(cursor);
if(nextE.nextSibling){
nextE.parentNode.insertBefore(cursor, nextE.nextSibling);
}else{
nextE.parentNode.appendChild(cursor);
}
//that was a movement, no need to continue
document.getElementById("walter_input").focus();
return;
}
}
//Not an Empty-element, so it"s an Inline-element
cursor = cursor.parentNode.removeChild(cursor);
if(nextE.firstChild){
nextE.insertBefore(cursor, nextE.firstChild);
}else{
nextE.appendChild(cursor);
}
nextE = getNextSiblingNode(cursor);
}
//Last problem: If we landed inside an empty inline element in the previous
//phase, (example: from aaa[cursor]<b></b>aaa to aaa<b>[cursor]</b>aaa)
//there still isn"t anything to the right of cursor.
//Easiest solution is by recursion: start all over again...
nextE = getNextSiblingNode(cursor);
if(!nextE){
cursor_move_right();
//But now we have already moved, in the topmost recursion
//so that"s it for now
return;
}
//This is the actual movement. We should now be in a position where this is trivial
//prev = cursor.previousSibling;
nextE = getNextSiblingNode(cursor);
if(nextE){
if(nextE.nodeType == TEXT_NODE){
//what"s the first character in the text to our right
var oneCharacter = nextE.nodeValue.substring(0, 1);
//remove it
nextE.nodeValue = nextE.nodeValue.substring(1,nextE.nodeValue.length);
//and re-insert it before the cursor
var e = document.createTextNode(oneCharacter);
cursor.parentNode.insertBefore(e, cursor);
//TODO: If there are multiple whitespace characters after each other
//they will only look like one in the browser but they will be deleted
//separately, giving an impression that nothing is happening until the last
//whitespace is deleted. Solution: Either prohibit the existence of
//multiple whitespace or add some extra checks here
}
}
//move focus to the input box
document.getElementById("walter_input").focus();
}
</script>
</body>
</html>
WebFX Dynamic Webboard 2.0
<!--
##############################################
# WebFX Dynamic Webboard 2.0 #
# By Emil A Eklund (eae@eae.net) #
# and Erik Arvidson (erik@eae.net) #
# http://webfx.eae.net #
# April 13, 1999 #
##############################################
# Feel free to use this script for personal #
# and non profit web sites, as long as you #
# are giving us credits for it, in other #
# words, not removing nor modifying this #
# notice in any of the files it appears in #
##############################################
# For commercial use contact Emil or Erik #
##############################################
-->
<html>
<head>
<style>
<!--
body {background : buttonface; margin: 5; margin-top: 2;
border-top: 1 solid buttonhighlight;
border-left: 1 solid buttonhighlight;
border-right: 1 solid buttonshadow;
border-bottom: 1 solid buttonshadow;}
td {width : 10px; height : 10px; font-size : 1px; cursor: hand;}
-->
</style>
<script type="text/javascript">
<!--
var ie5 = document.getElementById != null;
function doOver() {
var el = window.event.srcElement;
bgc = el.style.backgroundColor;
if (bgc != "") {
el.style.borderTopColor = "white";
el.style.borderLeftColor = "white";
el.style.borderRightColor = "black";
el.style.borderBottomColor = "black";
colorBox.style.backgroundColor = bgc;
colorName.innerHTML = bgc;
}
}
function doClick() {
bgc = window.event.srcElement.style.backgroundColor;
window.event.srcElement.style.borderColor = bgc;
if (bgc != "") {
window.external.raiseEvent("colorchange", bgc);
}
}
function doOut() {
var el = window.event.fromElement;
bgc = el.style.backgroundColor;
if (bgc != "") {
el.style.borderColor = bgc;
}
}
window.onload = init;
function init() {
fixTitle();
}
function fixTitle() {
document.title = parent.document.title;
}
var colors = new Array("white", "snow", "floralwhite", "ghostwhite", "whitesmoke",
"ivory", "oldlace", "linen", "seashell", "antiquewhite","papayawhip","peachpuff",
"beige","bisque","blanchedalmond","cornsilk","lemonchiffon","lightyellow",
"lightgoldenrodyellow","palegoldenrod",
"wheat","moccasin","navajowhite","khaki","burlywood","tan","darkkhaki",
"gold","yellow","goldenrod","darkgoldenrod","peru","saddlebrown","sienna","chocolate","brown",
"mintcream", "aliceblue","azure","lightcyan","lightblue","powderblue",
"lightskyblue","skyblue","deepskyblue",
"cyan","aqua","aquamarine","paleturquoise","turquoise","darkturquoise","mediumturquoise",
"darkcyan","royalblue","cornflowerblue","dodgerblue","blue","mediumblue","darkblue","midnightblue","navy",
"darkslateblue","lightsteelblue","steelblue","cadetblue","slateblue","mediumslateblue",
"indigo","purple","darkmagenta","darkorchid","mediumorchid","blueviolet","mediumpurple","darkviolet","magenta",
"fuchsia","plum","thistle","violet","orchid","deeppink","hotpink",
"mediumvioletred","palevioletred",
"lavender","lavenderblush","mistyrose","pink","lightpink","salmon","lightsalmon",
"coral","darksalmon","sandybrown","orange","orangered","tomato",
"darkorange","crimson","red","firebrick","maroon","darkred","indianred","rosybrown","lightcoral",
"honeydew","springgreen","mediumspringgreen",
"palegreen","chartreuse","lawngreen","greenyellow",
"lime","lightgreen","limegreen",
"mediumaquamarine","lightseagreen","teal","mediumseagreen","seagreen","darkseagreen",
"yellowgreen","olive","olivedrab",
"forestgreen","green","darkgreen", "darkolivegreen",
"lightslategray","slategray","darkslategray",
"gainsboro","lightgrey","silver","darkgray","gray","dimgray","black");
var sysColors = new Array("activeborder","activecaption","appworkspace","background","buttonface",
"buttonhighlight","buttonshadow","buttontext","captiontext","graytext","highlight","highlighttext",
"inactiveborder","inactivecaption","inactivecaptiontext","infobackground","infotext","menu","menutext",
"scrollbar","threeddarkshadow","threedface","threedhighlight","threedlightshadow","threedshadow","window",
"windowframe","windowtext");
function writeRow(ar) {
var cells = 15;
var str = "";
for (var i=0; i<ar.length; ) {
str += "<tr>"
for (var j=0; j<=cells && i<ar.length; j++) {
str += "<td style="background-color: " + ar[i] + "; border: 1px outset " + ar[i] + ";">";
str += " </td>\n";
i++;
}
str += "</tr>\n";
}
return str;
}
//-->
</script>
</head>
<body>
<table cellspacing="0"
cellpadding="0"
onmouseover="doOver()"
onmouseout="doOut()"
onclick="doClick()"
style="width: 180;">
<tr>
<td colspan="15"
style="font-family: verdana, helvetica; font-size: 9px; color: button-text; cursor: default; height: 15px;">
<nobr>Named Colors:</nobr>
</td>
</tr>
<script>
document.write(writeRow(colors));
</script>
</table>
<table cellspacing="0"
cellpadding="0"
onmouseover="doOver()"
onmouseout="doOut()"
onclick="doClick()"
style="width: 180;">
<hr>
<script>
document.write(writeRow(sysColors));
</script>
</table>
<hr>
<table>
<tr>
<td id="colorBox" style="border: 1px inset window; width: 20; height: 20; font-size: 2px; cursor: default;"> </td>
<td id="colorName" style="border: 0; font-family: verdana, helvetica; font-size: 9px; color: button-text; cursor: default;">ColorName</td>
</tr>
</table></body></html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/XsDhtmlEditor_0.95.zip">XsDhtmlEditor_0.95.zip( 134 k)</a>
WebIEdit
<A href="http://www.wbex.ru/Code/JavaScriptDownload/WebIEdit.zip">WebIEdit.zip( 4,410 k)</a>
1. <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm">Editor based on Javascript</a> <A href="/Code/JavaScript/GUI-Components/EditorbasedonJavascript.htm"></a> 2. <A href="/Code/JavaScript/GUI-Components/Richtext.htm">Rich text</a> <A href="/Code/JavaScript/GUI-Components/Richtext.htm"></a> 3. <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm">WebFX Dynamic Webboard 2.0</a> <A href="/Code/JavaScript/GUI-Components/WebFXDynamicWebboard20.htm"></a> 4. <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm">HTML Text Editing Component for hosting in Web Pages</a> <A href="/Code/JavaScript/GUI-Components/HTMLTextEditingComponentforhostinginWebPages.htm"></a> 5. <A href="/Code/JavaScript/GUI-Components/WalterAWYSIWYGHTMLeditorthatrunspurelyonJavaScript.htm">Walter - A WYSIWYG HTML editor that runs purely on JavaScript</a> 6. <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm">Text Editor in JavaScript: toolbar, Color picker, Bold style etc</a> <A href="/Code/JavaScript/GUI-Components/TextEditorinJavaScripttoolbarColorpickerBoldstyleetc.htm"></a> 7. <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm">Edit in place (Direct edit)</a> <A href="/Code/JavaScript/GUI-Components/EditinplaceDirectedit.htm"></a> 8. <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm">Bitflux Editor Examples</a> <A href="/Code/JavaScript/GUI-Components/BitfluxEditorExamples.htm"></a> 9. <A href="/Code/JavaScript/GUI-Components/editarea0811.htm">editarea 0.8.1.1 </a> <A href="/Code/JavaScript/GUI-Components/editarea0811.htm"></a>
