在使用自定义编辑器插件添加此按钮后，Google Closure添加onclick to按钮

Question

我正在为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();

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

Answer 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中的范围问题，在Closure代码本身中记录： https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174

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