Google Closure add onclick to button after adding this button with custom editor plugin

Question

I am making a custom plugin for the editor provided by Google Closure. The plugin makes it able to add a button.

I am having problems by setting an onclick on the button, the other values are nicely set.

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

var extraClasses = event.extraClasses;

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

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

Does anyone know what I am doing wrong and how I can fix this?

After creating a button it is added to the editors SeamlessField. A second problem that I currently have is that after creating the button, my pointer is inside the button and I can't seem to get it out of there.

I've got the follow piece of code for handling this at the moment. The var button is the created button. button contains: <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();

Any ideas about how I could fix this second problem aswell?

Answer 1

For the first, it does not look like you have begun using Google Closure event code. Wiring up the button to the 'click' event in Google Closure would be as follows:

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

You should also be investigating the goog.dom and goog.dom.classes namespaces if you'd like to use Google Closure's wrappers around standard CSS class and text DOM manipulation.

---

For the second, were you testing in Chrome? If so, you might have ran into a range issue in Webkit, documented within the Closure code itself: https://code.google.com/p/closure-library/source/browse/closure/goog/editor/range.js#174

I have gotten around this in the past by inserting an empty <span> element as a sibling after the offending element (the button, in your case), and placing the cursor next to the <span> instead. However, there's nothing stopping the user from moving the cursor back inside your button. You'll have to add more logic to prevent a user from placing the cursor within the button's text.