I am trying to write an editor object, which adds some functionality
and a toolbar to every textarea with a "form-textarea" class. Both FF
and IE generate an error in line 20
(container.appe ndChild(this.to olbar);) saying "Node cannot be inserted
at the specified point in the hierarchy" code: "3"
I have two questions:
- who would help me with this error
- please provide other feedback about my code, since I want to write a
solid framework
I've pasted all code (including general library functions), to provide
a complete overview.
Any help is greatly appreciated,
Dennis
/*************** *************** **** editor code
*************** *************** */
var Editor = {
version : "1.0 beta",
init : function() {
var textareaNodes = document.getEle mentsByTagName( 'textarea');
var thisTextarea, i = 0;
while ((thisTextarea = textareaNodes[i++])) {
if (hasClass(thisT extarea, 'form-textarea')) {
new this.textEditor (thisTextarea);
}
}
},
textEditor : function(textar ea) {
this.textarea = textarea;
this.value = textarea.value. replace(/\s+$/g, "");
this.textarea.c lassName = 'editor-textarea';
this.textarea.r ows = this.value.spli t("\n").lengt h;
var container = createNode('div ', {
'class' : 'texteditor ' + this.textarea.i d}
);
this.toolbar = Editor.textTool bar;
container.appen dChild(this.too lbar);
container.appen dChild(this.tex tarea);
this.textarea.p arentNode.inser tBefore(contain er, this.textarea);
Editor.detectKe y(this.textarea );
this.textarea.f ocus();
},
detectKey : function(textar ea) {
var theHandler = this.handleKey;
if (document.all) textarea.onkeyd own = function(e) {
theHandler.call (self, e, textarea);
}
else textarea.onkeyp ress = function(e) {
theHandler.call (self, e, textarea);
}
},
handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
if (e.keyCode) key = e.keyCode;
else if (e.which) key = e.which - 32;
Editor.growText area(textarea);
},
growTextarea : function(textar ea) {
var value = textarea.value, newlines = value.split("\n "), i = 0,
rows = 1;
while (newline = newlines[i++]) {
rows += Math.ceil(newli ne.length / textarea.cols);
}
textarea.rows = rows;
},
textToolbar : function() {
str = createNode('inp ut', {'type' : 'checkbox'});
return str;
}
}
addLoadEvent(fu nction () {
Editor.init();
});
/*************** *************** * library functions
*************** *************/
function addLoadEvent(fu nc) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldOnload();
func();
}
}
}
function hasClass(el, className) {
return (
el.className &&
el.className.ma tch(new RegExp("\\b" + className + "\\b"))
) ? true : false;
}
function createNode(type , options) {
var el = document.create Element(type);
for (var key in options) {
el.setAttribute (key, options[key]);
}
return el;
}
and a toolbar to every textarea with a "form-textarea" class. Both FF
and IE generate an error in line 20
(container.appe ndChild(this.to olbar);) saying "Node cannot be inserted
at the specified point in the hierarchy" code: "3"
I have two questions:
- who would help me with this error
- please provide other feedback about my code, since I want to write a
solid framework
I've pasted all code (including general library functions), to provide
a complete overview.
Any help is greatly appreciated,
Dennis
/*************** *************** **** editor code
*************** *************** */
var Editor = {
version : "1.0 beta",
init : function() {
var textareaNodes = document.getEle mentsByTagName( 'textarea');
var thisTextarea, i = 0;
while ((thisTextarea = textareaNodes[i++])) {
if (hasClass(thisT extarea, 'form-textarea')) {
new this.textEditor (thisTextarea);
}
}
},
textEditor : function(textar ea) {
this.textarea = textarea;
this.value = textarea.value. replace(/\s+$/g, "");
this.textarea.c lassName = 'editor-textarea';
this.textarea.r ows = this.value.spli t("\n").lengt h;
var container = createNode('div ', {
'class' : 'texteditor ' + this.textarea.i d}
);
this.toolbar = Editor.textTool bar;
container.appen dChild(this.too lbar);
container.appen dChild(this.tex tarea);
this.textarea.p arentNode.inser tBefore(contain er, this.textarea);
Editor.detectKe y(this.textarea );
this.textarea.f ocus();
},
detectKey : function(textar ea) {
var theHandler = this.handleKey;
if (document.all) textarea.onkeyd own = function(e) {
theHandler.call (self, e, textarea);
}
else textarea.onkeyp ress = function(e) {
theHandler.call (self, e, textarea);
}
},
handleKey : function(e, textarea) {
if (!e || e == null) var e = window.event;
if (e.keyCode) key = e.keyCode;
else if (e.which) key = e.which - 32;
Editor.growText area(textarea);
},
growTextarea : function(textar ea) {
var value = textarea.value, newlines = value.split("\n "), i = 0,
rows = 1;
while (newline = newlines[i++]) {
rows += Math.ceil(newli ne.length / textarea.cols);
}
textarea.rows = rows;
},
textToolbar : function() {
str = createNode('inp ut', {'type' : 'checkbox'});
return str;
}
}
addLoadEvent(fu nction () {
Editor.init();
});
/*************** *************** * library functions
*************** *************/
function addLoadEvent(fu nc) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldOnload();
func();
}
}
}
function hasClass(el, className) {
return (
el.className &&
el.className.ma tch(new RegExp("\\b" + className + "\\b"))
) ? true : false;
}
function createNode(type , options) {
var el = document.create Element(type);
for (var key in options) {
el.setAttribute (key, options[key]);
}
return el;
}
Comment