YUI3 Rich Text Editor: динамические визуальные стили - PullRequest
Новая
       13

YUI3 Rich Text Editor: динамические визуальные стили

2 голосов
/ 04 июля 2011

Полный новичок YUI здесь.

Мне нужно динамически окрашивать фон текста, когда пользователь вводит текст в элемент управления текстового редактора YUI3, следующим образом:

  • Первая строка текста оранжевая.
  • Все строки до строки, начинающейся с --, оранжевого цвета.
  • Все строки после этого, включая строку с --, до следующей, начиная с --, синего цвета.
  • После этого - снова оранжевый и т. Д.

Если первая строка начинается с --, она, тем не менее, должна быть оранжевой.

Пользователь не должен иметь никакого ручного управления стилями визуального текста, при вставке простой текст должен быть вставлен и перекрашен.

Цвет фона текста должен обновляться в реальном времени по мере ввода текста пользователем.

Пример: * * тысяча двадцать-пять 

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

Пожалуйста, укажите мне, где начать копаться о том, как реализовать это. Я просмотрел примеры, но пока не могу разобраться с этим.

Примечание: если вы знаете лучше подходящий редактор для того, что мне нужно, для любой вменяемой среды JS, пожалуйста, сообщите.

1 Ответ

1 голос
/ 05 июля 2011

Я думаю, что пример, который вы хотите посмотреть, это YUI3 nodeChange .Для вашего приложения вам нужно искать «входящие» события nodeChange.Тогда вы сможете использовать NodeList из e.dompath, чтобы получить нужный Node, который вы хотите стилизовать.Для примера, с которого следует начать работу, замените функцию «logFn» в этом примере следующим образом: 

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);
    }
};

и измените прослушиватель «on» на «after». 

editor.after('nodeChange', logFn);

Что вы должны увидеть из этого, так это то, что после того, как вы нажали «ввод» в строке, цвет фона предыдущей строки должен стать синим.Не совсем то, что вы хотите, но, надеюсь, в правильном направлении.

Предостережение - Rich Text Editor - это довольно сложный виджет, в который стоит погрузиться для вашего первого опыта YUI3.Будет проще, если вы хорошо разберетесь с событиями и узлами YUI3, хотя вам, вероятно, придется столкнуться с трудностями, если вам понадобится взломать реальный код RTE.

...