React版Toast UI Editor按钮点击插入文本的实现方法

要实现点击按钮向编辑器插入指定文本，核心是利用Toast UI Editor实例提供的文本插入方法，以下是针对你现有代码的修正方案：

核心方法说明 #

Toast UI Editor的实例提供两个实用的文本操作方法：

• insertText(text)：在当前光标位置插入指定文本，支持Markdown语法
• replaceSelection(text)：替换选中的文本，若未选中内容则效果等同于insertText

修正后的完整代码 #

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

function Editor4() {
  const editorRef = createRef();

  // 组件挂载时注册工具栏自定义命令
  useEffect(() => {
    if (editorRef.current) {
      const editorInstance = editorRef.current.getInstance();
      // 注册additem命令，点击工具栏自定义按钮时触发插入
      editorInstance.addCommand("markdown", "additem", () => {
        editorInstance.insertText("「工具栏按钮插入的文本」");
      });
    }
  }, []);

  // 外部按钮点击事件：插入加粗格式的文本
  const handleClick = () => {
    const editorInstance = editorRef.current.getInstance();
    editorInstance.insertText("**外部按钮插入的加粗文本**");
  };

  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}>插入加粗文本</button>
      </div>
    </div>
  );
}

export default Editor4;

关键修改点 #

1. 工具栏自定义按钮逻辑：

   • 通过useEffect在组件挂载时注册additem命令，避免重复注册
   • 命令内部直接调用insertText实现文本插入

2. 外部按钮逻辑：

   • 移除原有冗余的addCommand调用，直接获取编辑器实例执行插入操作
   • 示例中插入了带Markdown加粗格式的文本，可根据需求修改内容

内容的提问来源于stack exchange，提问作者Vasanthkumar Sadasivam