TinyMCE React 添加自定义组件到工具栏

Question

在 React 中创建 TinyMCE 编辑器时，可以使用以下代码将自定义按钮添加到工具栏：

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

除了

addButton

之外，还有其他选项，例如

addIcon

、

addMenuItem

和

addSidebar

。但是，我不知道如何包含我自己的自定义组件。

假设我想添加一个非常简单的 div/组件

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

或

<TestComponent />

到工具栏的末尾，我该怎么做？

有什么想法吗？

Answer 1

官网

官方 Github

您可以尝试通过关键词在网站或Github中搜索以探索更多示例或测试。

这是你需要的。

添加按钮

1. registry by registry.addButton，在onAction中编写你的功能，比如insertContent。
2. 在工具栏中添加您注册的名称，以空格分隔，例如：

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>`);
      }
    });
  },
}}

添加图标

1. 注册您的自定义图标。
2. 在其他 api 配置中使用 icon:"your-custom-icon"，例如 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>`);
        }
    });
  },
 }}

添加菜单项

1. 设置中的注册表菜单项。
2. 自定义菜单
3. 在菜单栏中使用自定义菜单

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>');
      }
    });
  },
 }}

添加边栏

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

Answer 2

我创建了一个简单示例，说明如何添加您自己的自定义组件，例如

addIcon

、

addMenuItem

和

addSidebar

。

您可以在文档链接here下找到有关自定义的更多信息。

请注意大多数示例都在

How-to guides -> Creating custom UI

组件下。

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')
    })
  }
})

我还提供了一个示例codepen供您参考。

Answer 3

你可以使用 Editor.ui.registry.addButton 方法。

尝试像下面的例子

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 组件在 Editor 组件之前，以便它出现在工具栏中。单击该按钮时，它将插入文本“Hello World!”进入编辑器。

Answer 4

您需要将键

test

添加到

toolbar

对象中的

init

属性

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