在这里完成 YUI 新手。
当用户在 YUI3 文本编辑器控件中键入文本时，我需要为文本背景动态着色，如下所示:
- 文本的第一行是橙色的。
- 以
--开头的行之前的所有行都是橙色的。 - 之后的所有行，包括带有
--的行，直到下一行，以--开头的行都是蓝色的。 - 之后 — 再次变成橙色，依此类推。
如果第一行以 -- 开头，它仍然应该是橙色的。
用户不得对视觉文本样式进行任何手动控制，粘贴时必须插入纯文本并重新着色。
文本背景颜色必须在用户键入文本时“实时”更新。
例子:
orange orange orange orange -- blue blue blue -- blue -- orange -- blue -- orange orange orange
请指出从哪里开始挖掘如何实现它。我浏览了示例，但还不能完全理解其中的内容。
注意:如果您知道更适合我需要的编辑器，对于任何健全的 JS 框架，请告知。
最佳答案
我想你想看的例子是 YUI3 nodeChange .对于您的应用程序，您需要寻找“进入”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”。
editor.after('nodeChange', logFn);
从这里您应该看到，当您在一行中点击“enter”后，前一行的背景颜色应该变为蓝色。不完全是你想要的，但希望方向正确。
注意——富文本编辑器是一个相当复杂的小部件，您需要在第一次体验 YUI3 时深入了解它。如果您能很好地处理 YUI3 事件和节点，事情会更容易，但如果您需要破解实际的 RTE 代码，您可能会遇到很大的挑战。
关于javascript - YUI3 富文本编辑器 : dynamic visual styles，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6567580/