Custom Toolbar Button

[vklein]

Is there a possibility to add Custom Toolbar Buttons with the React-Component?

In TinyMCE it should be possible by passing setup in the config. https://www.tinymce.com/docs/demo/custom-toolbar-button/

But in the React-Component you are overwriting the setup config before the init of the editor.

config.setup = function (editor) {
      EVENTS.forEach(function (event, index) {
        var handler = _this.props[HANDLER_NAMES[index]];
        if (typeof handler !== 'function') return;
        editor.on(event, function (e) {
          // native DOM events don't have access to the editor so we pass it here
          handler(e, editor);
        });
      });

      // need to set content here because the textarea will still have the
      // old `this.props.content`
      if (content) {
        editor.on('init', function () {
          editor.setContent(content);
        });
      };
    };

I think you could just add this to the new config.setup:

if (typeof this.props.config.setup === 'function') {
           this.props.config.setup(editor);
       }

Many thanks in advance.

[TroyAlford]

You should be able to add this into the config prop already. It would look something like:

<TinyMCE config={{
  setup: function (editor) {
      EVENTS.forEach(function (event, index) {
        var handler = _this.props[HANDLER_NAMES[index]];
        if (typeof handler !== 'function') return;
        editor.on(event, function (e) {
          // native DOM events don't have access to the editor so we pass it here
          handler(e, editor);
        });
      });

      // need to set content here because the textarea will still have the
      // old `this.props.content`
      if (content) {
        editor.on('init', function () {
          editor.setContent(content);
        });
      };
    };
}}/>

Could you give that a try and see if it works? Obviously you will need to define editor and _this - but you should be adding this within a parent React component anyway.

Alternatively - you could define your config object, exactly as you've done above (which might be easier for closures / references) - then add it as something like:

<TinyMCE config={config} />

If it's helpful, my current implementation uses a lot of config. I don't do any setup like what you're describing - but it might be helpful to you. Here is an example.

[vklein]

Thanks for your answer. I tried it the way you suggested. But the problem is that you cant configure the setup config param. All others are working.

I saw thats the problem is also mentioned here, also with a solution. https://github.com/instructure-react/react-tinymce/pull/16

I hope they will accept the pull request or enable the configuration of the setup in an other way. Thanks

[TroyAlford]

Ahh, gotcha. That's really unfortunate, yes. :(

In the meantime, I guess you could fork the repo and insert that changeset into your version?

[zeeshanjan82]

I am still not able to add a custom button. I have set up the setup function inside config but it does not seem to be called?

[leshek-pawlak]

I think this issue is closed. We can add custom button in the config object.