473,322 Members | 1,734 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Rich Text Editor - problem with generated HTML

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...

Jul 11 '06 #1
4 3083
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 ] )

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="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...
Jul 11 '06 #2
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
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.appendChild( 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="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...
Jul 11 '06 #3
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);
}
}

Jul 11 '06 #4
Any more ideas...? please help...

Jul 12 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: somaboy mx | last post by:
I'm looking for a javascript-based rich text/wysiwyg html editor that can be easily integrated in a php cms. I don't require any advanced features (tables, images etc) , just basic text formatting....
1
by: IkBenHet | last post by:
Hello, I found this script to create a simple rich text form (http://programmabilities.com/xml/index.php?id=17): <html> <head> <title>Rich Text Editor</title> </head> <body>
1
by: PC User | last post by:
I found this Rich Text Editor and I've been trying to recreate it in my own application. I've had trouble with the COMCTL.ImageListCtrl and the COMCTL.Toolbar to recreate the toolbar. And I've...
2
by: VB Programmer | last post by:
I want to create an email message with a HTML body and email it out. I know how to create/send the email (for the most part.) 1. Any ideas or examples of using an ASP.NET rich text editor so...
8
by: bizsolutiondev | last post by:
Hi all, I am looking for a browser side WYSIWIG HTML editor for our ASP.NET based content management system (CMS). For the past few months, I've had a Firefox RTE solution in place, and it...
7
by: Prasad | last post by:
Hi all, I am trying to develop a simple rich text editor I do only require bold, itlaic, underline.. The code for IE is <script> function displayEditor(editor, html, width, height) { ...
36
by: karen987 | last post by:
My newsweblog has ASP pages with news articles and a commenting system. The comments are posted, and to read them the reader clicks on the headline of the comment, and it opens up in a pop up window....
11
by: karen987 | last post by:
I have a web page which used to work fine until i added a rich text editor. the pages are in ASP and it is a news weblog, with a comments section where people click the headline of a comment and...
16
by: Neil | last post by:
I posted a few days ago that it seems to me that the Access 2007 rich text feature does not support: a) full text justification; b) programmatic manipulation. I was hoping that someone might...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.