Provide example of otherEventHandlers

[thomasparsons]

I currently provide custom events for tinyMCE to allow for other components to work with the text editor,

can you provide a working example of the otherEventHandlers code, as it's not very clear how you would run code like this:

setup: (editor) => {
  editor.addButton('my button', {
    icon: false,
    id: 'myButtonID',
    text: null,
    onclick: (editor) => {
      console.log(editor.getContent())
    },
  });
},

[lukasz-wojcik]

I also wanted to use custom buttons. After looking at the code I realized that I cannot use addButton via otherEventHandlers. Code which uses those handlers handlers looks like this(version 1.2.1):

var handlers = this.props.otherEventHandlers;
for(var eventName in handlers) {
  if(handlers.hasOwnProperty(eventName)) {
    editor.on(eventName, handlers[eventName]);
  }
}

So it just add new on events which is not what we want sine we want editor.addButton

However this package allows to provide onSetupEditor function via props

So what I did:

...

setupEditor() {
  return (
    (editor) => {
      editor.addButton("my_button", {
        type: "listbox",
        text: "My button",
        icon: false,
        onselect: (e) => {
          editor.insertContent(e.control.state.data.value);
        },
        values: this.defineAvailableValues()
      });
    }
  );
}

render() {
  return(
     <TinyMCEInput
        value={this.getEditorContents()}
        onChange={this.handleEditorChange}
        tinymceConfig={this.tinyMceConfig()}
        onSetupEditor={this.setupEditor()}
      />
  );
}

...

Setting it up like that allowed me to see a custom button. I hope that helps