Question

Complete YUI newbie here.

I need to dynamically color text background as user types the text in the YUI3 text editor control, as follows:

• First line of the text is orange.
• All lines until the line that starts with -- are orange.
• All lines after that, including that with --, until the next one, starting with -- are blue.
• After that — orange again and so on.

If the first line starts with --, it should be orange nevertheless.

User must not have any manual control on the visual text styles whatsoever, on paste plain text must be inserted and re-colored.

Text background color must be updated in “real” time as user types the text.

Example:

orange orange
orange
orange
-- blue blue 
blue --
blue 
-- orange
-- blue
-- orange orange
orange

Please point me where to start digging on how to implement this. I browsed the examples, but can’t quite grok the stuff yet.

Note: if you know a better suited editor for what I need, for any sane JS framework, please advise.

Answer 1

I think the example you want to look at is the YUI3 nodeChange. For your application you’ll want to be looking for “enter-up” nodeChange events. Then you should be able to use the NodeList from e.dompath to get the proper Node that you want to style. For an example that should get you started, replace the “logFn” function in the example with this:

var logFn = function(e) {
    Y.log('nodeChange Event: ' + e.changedType);
    if (e.changedType === 'enter-up') {
       var pContainerOfNewBr = e.dompath.item(1);
       var pContainerOfPrevLine = pContainerOfNewBr.previous();
       pContainerOfPrevLine.setStyle('backgroundColor', '#0000ff');
       Y.log('nodeChange got enter-up: ' + e.changedType);
    }
};

And change the “on” listener to an “after”.

editor.after('nodeChange', logFn);

What you should see from this is that after you hit “enter” on a line, the background-color of the previous line should turn blue. Not exactly what you want but hopefully in the right direction.

Caveat — the Rich Text Editor is a pretty complex Widget to be diving into for your first YUI3 experience. It will be easier if you get a good handle on YUI3 Events and Nodes, though you’ll probably be quite challenged if you need to hack the actual RTE code.