如何基于在编辑器组件之外的单击将文本添加到编辑器答案

【问题标题】：How to add text based on click which is outside the Editor component , to the Editor如何基于在编辑器组件之外的单击将文本添加到编辑器
【发布时间】：2021-12-07 06:42:50
【问题描述】：

我尝试过的，在这里，当用户单击状态中的值存储时，我添加了两个按钮，而不是将该状态传递给编辑器，作为道具复制。然后我试图将值转换为 html 代码，然后连接复制道具，然后再次转换为 html 到草稿格式，然后更新状态，但我无法修复。

代码沙盒链接：code

当用户点击按钮时我想要什么，它应该在编辑器中附加文本值。

能够根据点击添加文本，但现在的问题是根据光标位置添加文本，目前它添加到末尾，我想添加到用户指向光标的位置，然后单击按钮应该在那里添加

父组件

import EditorWrapper from "./Editor";

export default function App() {
  const [copy, setCopy] = useState("");
  return (
    <>
      <div className="App">
        <div className="d-flex">
          <button
            onClick={() => setCopy("Welcome")}
            className="btn btn-primary me-2"
          >
            Welcome
          </button>
          <button
            onClick={() => setCopy("Thank you")}
            className="btn btn-primary"
          >
            Thank you
          </button>
        </div>
        <EditorWrapper copy={copy} />
      </div>
    </>

编辑器组件

import "./styles.css";
import React, { useState, useEffect } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState, convertToRaw } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import htmlToDraft from "html-to-draftjs";
import draftToHtml from "draftjs-to-html";

export default function EditorWrapper({ copy }) {
  const initialState = () => EditorState.createEmpty();

  const [editorState, setEditorState] = useState(initialState);

  const onChange = async (value) => {
    // const data = draftToHtml(convertToRaw(value.getCurrentContent()));
    // console.log(data.concat(`<p>${copy}</p>`));

    // const contentBlock = htmlToDraft(data);
    // const contentState = ContentState.createFromBlockArray(
    //   contentBlock?.contentBlocks
    // );

    // const updateState = EditorState.createWithContent(contentState);
    setEditorState(value);
  };
  return (
    <Editor
      editorState={editorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      onEditorStateChange={(value) => onChange(value)}
      stripPastedStyles
      ariaLabel="draftEditor"
    />
  );
}

【问题讨论】：

我对 Draftjs 不熟悉，但是查看您的代码，我想您将 data.concat(
${copy}
) 登录到控制台并忘记实际添加它到data 变量。
那不行，我已将数据转换为草稿格式，然后将其传递给 setEditorstate(updateState)
可以添加功能但现在的问题是，由于concat方法，无法将文本添加到它总是添加到字符串末尾的特定位置，请提供基于光标位置的解决方案@ 987654323@
React Draft.js Wysiwyg：如何以编程方式在光标位置插入文本？：stackoverflow.com/questions/59657399/…

标签： javascript reactjs ecmascript-6 draftjs react-draft-wysiwyg

【解决方案1】：

父组件

import { useState } from "react";
import { EditorState, Modifier } from "draft-js";
import EditorComponent from "./Editor";

const App = () => {
  const initialState = () => EditorState.createEmpty();
  const [editorState, setEditorState] = useState(initialState);

  const sendTextToEditor = (text) => {
    setEditorState(insertText(text, editorState));
  };

  const insertText = (text, editorValue) => {
    const currentContent = editorValue.getCurrentContent();
    const currentSelection = editorValue.getSelection();

    const newContent = Modifier.replaceText(
      currentContent,
      currentSelection,
      text
    );

    const newEditorState = EditorState.push(
      editorValue,
      newContent,
      "insert-characters"
    );
    return EditorState.forceSelection(
      newEditorState,
      newContent.getSelectionAfter()
    );
  };
  const buttonValue = ["welcome", "Thank you", "react"];

  return (
    <div>
      {buttonValue.map((i) => (
        <button
          className="btn btn-primary"
          key={i}
          type="button"
          onClick={() => sendTextToEditor(i)}
        >
          {i}
        </button>
      ))}
      <EditorComponent
        editorState={editorState}
        setEditorState={setEditorState}
      />
    </div>
  );
};
export default App;

编辑器组件

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const EditorComponent = ({ editorState, setEditorState }) => {
  const onChange = async (value) => {
    setEditorState(value);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={(value) => {
          onChange(value);
        }}
        stripPastedStyles
        ariaLabel="draftEditor"
      />
    </div>
  );
};
export default EditorComponent;

参考CodeSandbox

【讨论】：