2

在这里完成 YUI 新手。

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

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

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

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

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

例子：

橙橙
橙
橙
——蓝蓝
蓝色的  - 
蓝色的
-  橙
-  蓝色的
——橙橙
橙

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

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

4

1 回答 1

1

我认为您要查看的示例是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 代码，你可能会面临相当大的挑战。

于 2011-07-05T08:26:59.597 回答