如何在 Toast UI 编辑器 [React] 中插入文本以单击按钮答案

【问题标题】：How to insert text in Toast UI Editor [React] for button click如何在 Toast UI 编辑器 [React] 中插入文本以单击按钮
【发布时间】：2022-11-11 11:08:40
【问题描述】：

如何在编辑器中插入文本以单击 toast ui 反应编辑器上的按钮我们在 toastui 编辑器选项卡中创建了一个单独的按钮，在下面的代码中，我们在控制台中插入了按钮单击的文本，我们想在编辑器中插入相同的文本

import React from "react";
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";

function Editor4() {
  let editorRef = React.createRef();

  //Adding item based on button click
  const handleClick = () => {
    editorRef.current
      .getInstance()
      .addCommand("markdown", "additem", function additem() {
        console.log("ButtonClicked");
      });
  };
  return (
    <div>
      <div>
        <Editor
          initialValue="Hello"
          previewStyle="vertical"
          height="400px"
          initialEditType="markdown"
          ref={editorRef}
          toolbarItems={[
            [
              "heading",
              "bold",
              {
                name: "Button",
                tooltip: "myItem",
                command: "additem",
                className: "toastui-editor-toolbar-icons",
                text: "V",
              }]
          ]}
        />
        <button onClick={handleClick}>makeBold</button>
      </div>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs toast-ui-editor

【解决方案1】：

您可以使用 porpertie insertText(YourText: string)

例子：

 editorRef.current.getInstance().insertText('ButtonClicked')

【讨论】：