使用自定义编辑器插件添加此按钮后，Google Closure 将 onclick 添加到按钮答案

【问题标题】：Google Closure add onclick to button after adding this button with custom editor plugin使用自定义编辑器插件添加此按钮后，Google Closure 将 onclick 添加到按钮
【发布时间】：2013-08-07 07:54:47
【问题描述】：

我正在为 Google Closure 提供的编辑器制作自定义插件。该插件使其能够添加按钮。

我在按钮上设置 onclick 时遇到问题，其他值设置得很好。

button.innerHTML = event.label;
button.className = event.initialClass;

var extraClasses = event.extraClasses;

if (extraClasses)
{
    button.className += ' ' + extraClasses
}

button.onclick = function() { event.onclick };

有谁知道我做错了什么以及如何解决这个问题？

创建按钮后，它被添加到编辑器SeamlessField。我目前遇到的第二个问题是，在创建按钮后，我的指针在按钮内，我似乎无法将其从那里取出。

我现在有以下代码来处理这个问题。 var 按钮是创建的按钮。按钮包含：<button class="orange">test</button>

// We want to insert the button in place of the user's selection.
// So we restore it first, and then use it for insertion.
this.restoreOriginalSelection();
var range = this.fieldObject.getRange();
button = range.replaceContentsWithNode(button);

// Done making changes, notify the editor.
this.fieldObject.dispatchChange();

// Put the user's selection right after the newly inserted button.
goog.editor.range.placeCursorNextTo(button, false);

// Dispatch selection change event because we just moved the selection.
this.fieldObject.dispatchSelectionChangeEvent();

关于如何解决第二个问题的任何想法？

【问题讨论】：

标签： plugins editor text-editor google-closure google-closure-library

【解决方案1】：

首先，您似乎还没有开始使用 Google Closure 事件代码。将按钮连接到 Google Closure 中的“点击”事件如下：

goog.events.listen(button, goog.events.EventType.CLICK, event.onclick)

如果您想使用 Google Closure 围绕标准 CSS 类和文本 DOM 操作的包装器，您还应该研究 goog.dom 和 goog.dom.classes 命名空间。

其次，您是否在 Chrome 中进行测试？如果是这样，您可能在 Webkit 中遇到了范围问题，该问题记录在闭包代码本身中： https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174

过去，我通过在有问题的元素（在您的情况下为按钮）之后插入一个空的 <span> 元素作为同级元素，并将光标放在 <span> 旁边来解决此问题。但是，没有什么能阻止用户将光标移回您的按钮内。您必须添加更多逻辑以防止用户将光标放在按钮的文本中。

【讨论】：