如何基于编辑器组件外部的单击向编辑器添加文本

Question

我已经尽力了，这里我添加了两个按钮，当用户点击时将值存储在状态中，然后将该状态传递给编辑器，复制为道具。然后我试图将值转换为html代码，然后连接复制道具，然后再次转换为html草案格式，然后更新状态，但我无法修复。

Codesandbox链接: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>
</>

<<p>编辑组件/strong>

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"
/>
);
}

Answer 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;

<<p>编辑组件/strong>

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