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

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

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

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

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

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

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

Пример:

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

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

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


javascript text-editor yui yui3
person Alexander Gladysh    schedule 04.07.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что пример, на который вы хотите взглянуть, — это 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);
    }
};

И измените прослушиватель «включено» на «после».

editor.after('nodeChange', logFn);

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

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

person mjhm    schedule 05.07.2011