Question 74142 in Reactjs Question posted in
The new location for the React Documentation can be found here.

TinyMCE React add custom component to toolbar – Reactjs

When creating a TinyMCE editor in React, it is possible to add a custom button to the toolbar using the following code:

<Editor
...
init={{
    ...
    setup: (editor) => {
        editor.ui.registry.addButton('test' {
            text: 'Test',
            onAction: () => console.log('Test')
        });
    }
}}
/>

Besides addButton, there are other options such as addIcon, addMenuItem, and addSidebar. However, I can’t figure out how to include my own custom component.

Say I wanted to add a very simple div/component

<div>
    <ul>
        <li>Test 1</li>
        <li>Test 2</li>
    </ul>
</div>

or

<TestComponent />

to the end of the toolbar, how would I do this?

Any ideas?

Tags:

4

Answers


  1. 0

    You need to add the key test to the toolbar property in your init object

    <Editor
    init={{
        toolbar: "test",
        setup: (editor) => {
            editor.ui.registry.addButton('test' {
                text: 'Test',
                onAction: () => console.log('Test')
            });
        }
    }}
/>
    Login or Signup to reply.
  2. 0

    official website

    official Github

    You can try to search in website or Github by keywords to explore more examples or tests.

    Here are what you needed.

    addButton

    1. registry by registry.addButton, code your feature in onAction, such as insertContent.
    2. add the name which you registry in toolbar, split by space, for example:
    toolbar: 'undo redo addTestList'


    init={{
  toolbar: 'addTestList',
  setup: function (editor) {

    editor.ui.registry.addButton('addTestList', {
      text: 'addTestList',
      onAction: function (_) {
        editor.insertContent(`<div>
        <ul>
            <li>Test 1</li>
            <li>Test 2</li>
        </ul>
    </div>`);
      }
    });
  },
}}

    addIcon

    1. registry your custom icon.
    2. use icon:"your-custom-icon" in other api config, for example addButton.
    init={{
  toolbar: 'addTestList undo',
  setup: function (editor) {
    editor.ui.registry.addIcon('addTestListIcon', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>');

    editor.ui.registry.addButton('addTestList', {
        icon: "addTestListIcon",
        onAction: function (_) {
          editor.insertContent(`<div>
              <ul>
                  <li>Test 1</li>
                  <li>Test 2</li>
              </ul>
          </div>`);
        }
    });
  },
 }}

    addMenuItem

    1. registry menu item in setup.
    2. set menu to custom
    3. use custom menu in menubar
    init={{
  menu: {
    custom: {
      title: "Custom",
      items: "myCustomMenuItem"
    }
  },
  menubar: "custom",
  setup: function (editor) {
    editor.ui.registry.addMenuItem("myCustomMenuItem", {
      text: "My Custom Menu Item",
      onAction: function () {
        editor.insertContent('<input type="checkbox">Hello</input>');
      }
    });
  },
 }}

    addSidebar

    init={{
  toolbar: 'mysidebar undo',
  setup: function (editor) {
    editor.ui.registry.addSidebar('mysidebar', {
      tooltip: 'My sidebar',
      icon: 'comment',
      onShow: (api) => {
        api.element().innerHTML = 'Hello world!';
      },
    });
  },
 }}
    Login or Signup to reply.
  3. 0

    I’ve created a simple example on how to add your own custom components such as addIcon, addMenuItem, and addSidebar.

    You may find more information on customization under the docs link here.

    Do note most of the examples are under How-to guides -> Creating custom UI components.

    tinymce.init({
  selector: 'textarea#toolbar-button',
  toolbar: 'myOwnComponent mysidebar',
  menu: {
    custom: { title: 'Custom Menu', items: 'undo redo myCustomMenuItem' }
  },
  menubar: 'undo redo custom',
  setup: (editor) => {
    editor.ui.registry.addButton('myOwnComponent', {
      text: 'This is my component',
      tooltip: 'Hover to see me',
      icon: 'triangleUp',
      onAction: (_) => editor.insertContent(`
      <div>
        <ul>
          <li>Test 1</li>
          <li>Test 2</li>
        </ul>
      </div>`)
    }), 
    editor.ui.registry.addIcon('triangleUp', '<svg height="24" width="24"><path d="M12 0 L24 24 L0 24 Z" /></svg>'),
    editor.ui.registry.addSidebar('mysidebar', {
      tooltip: 'My sidebar',
      icon: 'comment',
      onShow: (api) => {
        api.element().innerHTML = `
      <div>
        <ul>
          <li>Test 1</li>
          <li>Test 2</li>
        </ul>
      </div>`;
      },
    }),
    editor.ui.registry.addMenuItem('myCustomMenuItem', {
      text: 'My Custom Menu Item',
      onAction: () => alert('Menu item clicked')
    })
  }
})

    I have also included an example codepen for your reference.

    Login or Signup to reply.
  4. 0

    you can use the Editor.ui.registry.addButton method.

    Try like below example

    import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

const MyCustomButton = ({ editor }) => {
  const handleClick = () => {
    editor.insertContent('Hello World!');
  };

  return (
    <button type="button" onClick={handleClick}>
      My Button
    </button>
  );
};

const App = () => {
  const handleEditorChange = (content, editor) => {
    console.log(content);
  };

  return (
    <Editor
      apiKey="YOUR_API_KEY"
      onEditorChange={handleEditorChange}
      init={{
        height: 500,
        menubar: false,
        plugins: ['lists', 'code'],
        toolbar: 'undo redo | bold italic underline | myCustomButton',
        setup: editor => {
          editor.ui.registry.addButton('myCustomButton', {
            text: 'My Button',
            onAction: () => {
              editor.insertContent('Hello World!');
            }
          });
        }
      }}
      render={({ editor, ...rest }) => (
        <>
          <MyCustomButton editor={editor} />
          <Editor {...rest} />
        </>
      )}
    />
  );
};

export default App;

    MyCustomButton component before the Editor component so that it appears in the toolbar. When the button is clicked, it will insert the text "Hello World!" into the editor.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search