CODEWITHSUNDEEP
javascriptyuitext-editoryui3
Alexander Gladysh
Alexander Gladysh

Reputation: 41403

YUI3 Rich Text Editor: dynamic visual styles

Complete YUI newbie here.

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

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.

Upvotes: 2

Views: 782

Answers (1)

mjhm
mjhm

Reputation: 16705

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.

Upvotes: 1

Related Questions