Rich Text Editor - problem with generated HTML

[pbreah]

I'm doing a Rich Text Editor (WYSIWYG) in javascript for a game for
kids. I'm doing a special case in with every keystroke from A-Z creates
a background and foreground color for that letter, witch is the same.
The problem is editing doesn't work that well.

For example when I type: ABCDFG , I get this code generated and
displayed by the Rich Text Editor:

<P><FONT style="BACKGROU ND-COLOR: #ffff00" color=#ffff00>a <FONT
style="BACKGROU ND-COLOR: #3399cc" color=#3399cc>b <FONT
style="BACKGROU ND-COLOR: #ffccff" color=#ffccff>c <FONT
style="BACKGROU ND-COLOR: #cccccc" color=#cccccc>d <FONT
style="BACKGROU ND-COLOR: #ffcc99" color=#ffcc99>f <FONT
style="BACKGROU ND-COLOR: #d21894"
color=#d21894>g </FONT></FONT></FONT></FONT></FONT></FONT></P>

The markup looks ugly but it works.

If I put my cursor between the "D" and "F", for example, and try to
insert the letter "E" I get this code:

<P><FONT style="BACKGROU ND-COLOR: #ff9900"
color=#ff9900>a bcdefg</FONT></P>

I just want the letter "E" inserted in its own tag without overwriting
the other letters. The whole line ends with the color of "E". :-(

By the way, I'm using execCommand wih IE6 sp2. If you think or know a
better way of solving this without execCommand or anything, please help
:~(

Any ideas, suggestions, code samples?

Thank you...

[bobzimuta]

Welcome to the world of wysiwyg editing. I'm currently working on an
editor for a social networking site, and have found that the code
generated is usually not pretty. How does your logic work when you
press a key? I'm guessing that it's something like
on key down
1. get the letter from the keycode
2. execCommand to set corresponding fore / back color for that
letter.

Instead of on keydown, maybe on keypress, get all the text nodes from
the editor document, and if they don't have a parent node of font (or
span, whatever you want), assign a parent node with the color you want.

Something like (mix of pseudo and javascript)
on keypress
nodes = editor.document .childNodes;
foreach in nodes as i
if nodes[ i ] != text node
continue;
color = possible_colors[ nodes[ i ].lowerCase ];
span_tag = new span tag;
span_tag.color = color;
span_tag.append Child( nodes[ i ].cloneNode( false ) )
editor.document .replaceChild( span_tag, nodes[ i ] )

pbreah wrote:

I'm doing a Rich Text Editor (WYSIWYG) in javascript for a game for
kids. I'm doing a special case in with every keystroke from A-Z creates
a background and foreground color for that letter, witch is the same.
The problem is editing doesn't work that well.

For example when I type: ABCDFG , I get this code generated and
displayed by the Rich Text Editor:

<P><FONT style="BACKGROU ND-COLOR: #ffff00" color=#ffff00>a <FONT
style="BACKGROU ND-COLOR: #3399cc" color=#3399cc>b <FONT
style="BACKGROU ND-COLOR: #ffccff" color=#ffccff>c <FONT
style="BACKGROU ND-COLOR: #cccccc" color=#cccccc>d <FONT
style="BACKGROU ND-COLOR: #ffcc99" color=#ffcc99>f <FONT
style="BACKGROU ND-COLOR: #d21894"
color=#d21894>g </FONT></FONT></FONT></FONT></FONT></FONT></P>

The markup looks ugly but it works.

If I put my cursor between the "D" and "F", for example, and try to
insert the letter "E" I get this code:

<P><FONT style="BACKGROU ND-COLOR: #ff9900"
color=#ff9900>a bcdefg</FONT></P>

I just want the letter "E" inserted in its own tag without overwriting
the other letters. The whole line ends with the color of "E". :-(

By the way, I'm using execCommand wih IE6 sp2. If you think or know a
better way of solving this without execCommand or anything, please help
:~(

Any ideas, suggestions, code samples?

Thank you...

[bobzimuta]

I realized this approach won't work, since your text is likely to be
inside of various tags. Therefore iterating through document.childN odes
won't work. It'd have to be a recursive function to catch all the text
nodes. Sorry
bobzimuta wrote:

Welcome to the world of wysiwyg editing. I'm currently working on an
editor for a social networking site, and have found that the code
generated is usually not pretty. How does your logic work when you
press a key? I'm guessing that it's something like
on key down
1. get the letter from the keycode
2. execCommand to set corresponding fore / back color for that
letter.

Instead of on keydown, maybe on keypress, get all the text nodes from
the editor document, and if they don't have a parent node of font (or
span, whatever you want), assign a parent node with the color you want.

Something like (mix of pseudo and javascript)
on keypress
nodes = editor.document .childNodes;
foreach in nodes as i
if nodes[ i ] != text node
continue;
color = possible_colors[ nodes[ i ].lowerCase ];
span_tag = new span tag;
span_tag.color = color;
span_tag.append Child( nodes[ i ].cloneNode( false ) )
editor.document .replaceChild( span_tag, nodes[ i ] )

pbreah wrote:

I'm doing a Rich Text Editor (WYSIWYG) in javascript for a game for
kids. I'm doing a special case in with every keystroke from A-Z creates
a background and foreground color for that letter, witch is the same.
The problem is editing doesn't work that well.

For example when I type: ABCDFG , I get this code generated and
displayed by the Rich Text Editor:

<P><FONT style="BACKGROU ND-COLOR: #ffff00" color=#ffff00>a <FONT
style="BACKGROU ND-COLOR: #3399cc" color=#3399cc>b <FONT
style="BACKGROU ND-COLOR: #ffccff" color=#ffccff>c <FONT
style="BACKGROU ND-COLOR: #cccccc" color=#cccccc>d <FONT
style="BACKGROU ND-COLOR: #ffcc99" color=#ffcc99>f <FONT
style="BACKGROU ND-COLOR: #d21894"
color=#d21894>g </FONT></FONT></FONT></FONT></FONT></FONT></P>

The markup looks ugly but it works.

If I put my cursor between the "D" and "F", for example, and try to
insert the letter "E" I get this code:

<P><FONT style="BACKGROU ND-COLOR: #ff9900"
color=#ff9900>a bcdefg</FONT></P>

I just want the letter "E" inserted in its own tag without overwriting
the other letters. The whole line ends with the color of "E". :-(

By the way, I'm using execCommand wih IE6 sp2. If you think or know a
better way of solving this without execCommand or anything, please help
:~(

Any ideas, suggestions, code samples?

Thank you...

[pbreah]

I use an on keypress event function. It calls a forecolor and backcolor
function. Like so: (this is the code i'm working on). I'm trying to get
it to work...

function kb_handler(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode || evt.charCode;
var key = String.fromChar Code(keyCode).t oLowerCase();
var rte = 'rte1';

if(keyCode == 32)
{
dlgColorPalette (rte, 'hilitecolor', '');
setColor("#0000 00");
dlgColorPalette (rte, 'forecolor', '');
setColor("#0000 00");
}
else
{
switch (key)
{
case 'a':
dlgColorPalette (rte, 'hilitecolor', '');
setColor("#ffff 00");
dlgColorPalette (rte, 'forecolor', '');
setColor("#ffff 00");
break;
// .... and so on for all letters...
default:
dlgColorPalette (rte, 'hilitecolor', '');
setColor('#0000 00');
dlgColorPalette (rte, 'forecolor', '');
setColor('#ffff ff');
}
}
}

function setColor(color) {
var rte = currentRTE;
var parentCommand = parent.command;

if (document.all) {
var sel = frames[rte].document.selec tion;
if (parentCommand == "hilitecolo r") parentCommand = "backcolor" ;
if (sel != null) {
var newRng = sel.createRange ();
newRng = rng;
newRng.select() ;
}
}

rteCommand(rte, parentCommand, color);
showHideElement ('cp' + rte, "hide");
}

function dlgColorPalette (rte, command) {
setRange(rte);
parent.command = command;
currentRTE = rte;
}

function setRange(rte) {
var oRTE;
if (document.all) {
oRTE = frames[rte];
var selection = oRTE.document.s election;
if (selection != null) rng = selection.creat eRange();
} else {
oRTE = document.getEle mentById(rte).c ontentWindow;
var selection = oRTE.getSelecti on();
rng = selection.getRa ngeAt(selection .rangeCount - 1).cloneRange() ;
}
}

function rteCommand(rte, command, option) {
//function to perform command
var oRTE;
if (document.all) {
oRTE = frames[rte];
} else {
oRTE = document.getEle mentById(rte).c ontentWindow;
}

try {
oRTE.focus();
oRTE.document.e xecCommand(comm and, false, option);
oRTE.focus();
} catch (e) {
// alert(e);
// setTimeout("rte Command('" + rte + "', '" + command + "', '" +
option + "');", 10);
}
}

[pbreah]

Any more ideas...? please help...