Javascript YUI3富文本编辑器：动态视觉样式

完全是新手

当用户在YUI3文本编辑器控件中键入文本时，我需要动态为文本背景着色，如下所示：

• 文本的第一行是橙色的
• 在以

  --

  开头的行之前，所有行都是橙色的
• 之后的所有行，包括带有

  --

  的行，直到下一行，以

  --

  开始，都是蓝色的
• 在那之后-又是橙色等等

如果第一行以

--

开头，则应为橙色

用户不得对可视文本样式进行任何手动控制，粘贴时必须插入纯文本并重新上色

文本背景颜色必须在用户键入文本时“实时”更新

例如：

orange orange orange orange -- blue blue blue -- blue -- orange -- blue -- orange orange orange 橙橙 橙色 橙色 --蓝蓝 蓝色的-- 蓝色 --橙色的 --蓝色的 --橙橙 橙色 请告诉我从哪里开始挖掘如何实现这一点。我浏览了这些例子，但还不能完全理解这些东西

---

注意：如果你知道一个更适合我需要的编辑器，对于任何一个健全的JS框架，请给出建议。

我想你要看的例子是。对于您的应用程序，您需要查找“enter up”nodeChange事件。然后，您应该能够使用e.dompath中的NodeList来获取要设置样式的适当节点。对于一个应该开始的示例，请将示例中的“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”

从中可以看到，在一行中单击“回车”后，前一行的背景色应变为蓝色。不完全是你想要的，但希望方向正确

警告——富文本编辑器是一个非常复杂的小部件，您可以在第一次体验YUI3时使用它。如果您能够很好地处理YUI3事件和节点，这将变得更容易，尽管如果您需要破解实际的RTE代码，您可能会遇到相当大的挑战

editor.after('nodeChange', logFn);