Reactjs 如何为REACT在kendo RichTextEditor的工具栏上添加自定义按钮

我想在工具栏上添加一个自定义按钮，该按钮在kendo RichTextEditor中为REACT执行自定义函数

我需要在单击edior工具栏上的图标时打开一个modalbox， 我可以在jquery的剑道ui中实现这一点

   $("#editor").kendoEditor({
           tools: [{
                name: "Custom Modal Popup",
                tooltip: "Show data in popup",
                exec: function(e) {
                    console.log('my custom function');
                    console.log('code to open modalbox and view content in it');
                }
            }]
   })

但我如何在剑道中做到这一点

<Editor tools={[ [ MyColorTool, MyCustomButtonForModalPopup] ]} contentStyle={{ height: 320 }} />

---

这可以通过制作自定义工具来完成

const createInsertTool = settings =>
props => {
    const { view } = props;
    const nodeType = view && view.state.schema.nodes[settings.nodeType];
    const canInsert = view && EditorUtils.canInsert(view.state, nodeType);
    return (
        <Button
            onClick={() => EditorUtils.insertNode(view, nodeType.createAndFill(settings.attrs))}
            disabled={!canInsert}
            onMouseDown={e => e.preventDefault()}
            onPointerDown={e => e.preventDefault()}
            {...settings.props}
        />
    );
};

const createInsertTool=settings=>
道具=>{
const{view}=props；
const nodeType=view&&view.state.schema.nodes[settings.nodeType]；
const canInsert=view&&EditorUtils.canInsert（view.state，nodeType）；
返回(
EditorUtils.insertNode（视图，nodeType.createAndFill（settings.attrs））}
已禁用={！canInsert}
onMouseDown={e=>e.preventDefault（）}
onPointerDown={e=>e.preventDefault（）}
{…settings.props}
/>
);
};

文档中有以下示例：

---

如果您使用Popper或Portal之类的工具，您可以创建一个自定义组件，该组件只包含一个按钮，然后单击打开所需的弹出窗口。在我的工具中，我传入组件的只是编辑器的视图，然后运行

EditorUtils.applyInlineStyle（视图，{style:…}）

例如，我在剑道编辑器中使用了一个颜色选择器工具：

import React, { useState } from "react";
import { EditorUtils } from "@progress/kendo-react-editor";
import ColorPicker from "../ColorSwatchButton/ColorSwatchButton";

const ColorTool = props => {
  const [toolColor, setToolColor] = useState({
    rgb: { r: 0, g: 0, b: 0, a: 0.5 },
  });

  const { view } = props;

  const handleColorChange = (color, event) => {
    setToolColor(color);
    EditorUtils.applyInlineStyle(view, { style: "color", value: color.hex });
  };

  return <ColorPicker color={toolColor} colorChangeFn={handleColorChange} isKendo/>;
};

export default ColorTool;

import React，{useState}来自“React”；
从“@progress/kendo react editor”导入{EditorUtils}”；
从“./ColorSwatchButton/ColorSwatchButton”导入颜色选择器；
const ColorTool=props=>{
常量[toolColor，setToolColor]=useState({
rgb:{r:0，g:0，b:0，a:0.5}，
});
const{view}=props；
常量handleColorChange=（颜色、事件）=>{
设置工具颜色（颜色）；
applyInlineStyle（视图，{style:“color”，值：color.hex}）；
};
返回；
};
导出默认颜色工具；

其中，

是打开我前面提到的模式的按钮

在此之后，您只需将

颜色选择器

与其他按钮一起传递到

工具

属性的