Question

在这里完成YUI新手。

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

文字的第一行是橙色。
直到以--开头的行的所有行都是橙色。
之后的所有行，包括--的行，直到下一行，以--开头都是蓝色。
之后 - 橙色再次等等。

如果第一行以--开头，那么它应该是橙色的。

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

当用户键入文本时，文本背景颜色必须在“实际”时间内更新。

示例：

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

请指出我从哪里开始挖掘如何实现这一点。我浏览了这些例子，但还不能完全理解这些东西。

注意：如果您知道一个更适合我需要的编辑器，那么对于任何理智的JS框架，请提供建议。

Answer 1

我认为您要查看的示例是YUI3 nodeChange。对于您的应用程序，您将需要查找“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”。

editor.after('nodeChange', logFn);

你应该看到的是，在一行上点击“输入”后，前一行的背景颜色应该变为蓝色。不完全是你想要的，但希望在正确的方向。

警告 - 富文本编辑器是一个非常复杂的小工具，可以为您的第一次YUI3体验而深入探讨。如果你能很好地处理YUI3事件和节点会更容易，但如果你需要破解实际的RTE代码，你可能会遇到很大的挑战。

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

1 个答案: