How to call a React component in a Custom Plugin? Is there a way to write custom plugins other than public folder of the project?

[X0rD3v1L]

I want to call a react component onClick of the custom plugin icon of the toolbar. Is there any way to do that?

The red underlined ones are the custom components designed. How to call a react component on the click of that any icon?

Following is the code to add pagebreak to toolbar,

tinymce.PluginManager.add("pagebreak", function (editor, url) {
    function pagebreak() {
        return '<div style="height:3px;width:100%;background-color:black;">‎</div>';
    }
    editor.ui.registry.addButton("pagebreak", {
        icon: 'document-properties',
        onAction: function () {
        let html = pagebreak();
        editor.insertContent(html);
        }
    });
});

And also is there a way to write these plugins other than public folder of the project as when these plugins aren't working if we write in anyother path.

import { Editor } from '@tinymce/tinymce-react';
return (
     <>
       <Editor
         onInit={(evt, editor) => editorRef.current = editor}
         cloudChannel='5'
         init={{
           height: 412,
           width: 900,
           forced_root_block: 'div',
           menubar: false,
           statusbar: false,
           inline: false,
           plugins: [
             'advlist autolink lists link image charmap print preview anchor',
             'searchreplace visualblocks code fullscreen',
             'insertdatetime media table paste code help wordcount'
           ],
           external_plugins: {
            horizontalrule : "/plugins/demo.js",
            addtable: "/plugins/demo.js",
            checkbox: "/plugins/demo.js",
            textarea: "/plugins/demo.js",
            pagebreak: "/plugins/demo.js",
            imageupload: "/plugins/demo.js",
            tableNoborder: "/plugins/demo.js",
            tableborder: "/plugins/demo.js",
            addrow: "/plugins/demo.js",
            removerow: "/plugins/demo.js",
            editrow: "/plugins/demo.js",
            addcol: "/plugins/demo.js",
            removecol: "/plugins/demo.js"
          },
           toolbar1:
           'bold italic underline | alignleft aligncenter alignright | numlist bullist outdent indent | removeformat undo redo | forecolor backcolor | horizontalrule charmap | addtable checkbox textarea | pagebreak',
           toolbar2:
           'fontselect fontsizeselect | imageupload tableNoborder tableborder link | addrow removerow editrow | addcol removecol',
         }}
       />
</>

[exalate-issue-sync[bot]]

Ref: INT-3005

[tiny-james]

I want to call a react component onClick of the custom plugin icon of the toolbar. Is there any way to do that?

Here's an example of calling a react callback from a custom plugin:

https://codesandbox.io/s/custom-plugin-calling-react-0w5710

is there a way to write these plugins other than public folder of the project

There are 2 alternatives:

1. Keep the source out of the public folder but have webpack compile into public/PATH/FILE.js (names should not matter) file in the public folder and add it to external_plugins as { PLUGINNAME: "/PATH/FILE.js" } where PLUGINNAME matches what is listed in the plugin's tinymce.PluginManager.add call.
2. Any time after TinyMCE has loaded (but before you initialize it) run tinymce.PluginManager.add with your custom plugin. It will use the plugin function registered in the PluginManger without trying to find a separate file. You will not need to list it in the external_plugins.