Rich Text Editor - problem with generated HTML

P

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="BACKGROUND-COLOR: #ffff00" color=#ffff00>a<FONT
style="BACKGROUND-COLOR: #3399cc" color=#3399cc>b<FONT
style="BACKGROUND-COLOR: #ffccff" color=#ffccff>c<FONT
style="BACKGROUND-COLOR: #cccccc" color=#cccccc>d<FONT
style="BACKGROUND-COLOR: #ffcc99" color=#ffcc99>f<FONT
style="BACKGROUND-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="BACKGROUND-COLOR: #ff9900"
color=#ff9900>abcdefg</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...
 
B

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.appendChild( nodes[ i ].cloneNode( false ) )
editor.document.replaceChild( span_tag, nodes[ i ] )
 
B

bobzimuta

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

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.appendChild( nodes[ i ].cloneNode( false ) )
editor.document.replaceChild( span_tag, nodes[ i ] )
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="BACKGROUND-COLOR: #ffff00" color=#ffff00>a<FONT
style="BACKGROUND-COLOR: #3399cc" color=#3399cc>b<FONT
style="BACKGROUND-COLOR: #ffccff" color=#ffccff>c<FONT
style="BACKGROUND-COLOR: #cccccc" color=#cccccc>d<FONT
style="BACKGROUND-COLOR: #ffcc99" color=#ffcc99>f<FONT
style="BACKGROUND-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="BACKGROUND-COLOR: #ff9900"
color=#ff9900>abcdefg</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...
Click to expand...
Click to expand...
 
P

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.fromCharCode(keyCode).toLowerCase();
var rte = 'rte1';

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

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

if (document.all) {
var sel = frames[rte].document.selection;
if (parentCommand == "hilitecolor") 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.selection;
if (selection != null) rng = selection.createRange();
} else {
oRTE = document.getElementById(rte).contentWindow;
var selection = oRTE.getSelection();
rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
}
}

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

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Working on mobile css menu with plenty of frustration! 2
Need help , Having problem with Drag n Drop ? 9
Can anyone please help? HTML - two tables applying different styles 4
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Need help , Having problem with Drag n Drop... 1
HTML Site Problems 11
Help with my responsive home page 2

Members online

Total: 37 (members: 4, guests: 33)
Robots: 381

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,019
Latest member
RoxannaSta

Latest Threads

Top