将 contentState 渲染到编辑器后，Draft.js 提及插件不起作用

Posted 2023-03-14

【中文标题】将 contentState 渲染到编辑器后，Draft.js 提及插件不起作用

【英文标题】：Draft.js Mention Plugin is not working after rendering contentState to the editor

【发布时间】：2021-09-30 10:32:20

【问题描述】：

我在 draft.js 中使用提及（例如 @yourname）并将其发送到数据库以保存并获取它以呈现在网页上，但事情没有按预期工作。

关于保存到数据库 ->

const contentState = editorState.getCurrentContent();
const currentStateData = convertToRaw(contentState);
const richStringifyValue = JSON.stringify(currentStateData);
// sending richStringifyValue to save in Mongo DB

在编辑器中获取和设置 ->

const [editorState, setEditorState] = React.useState(() => EditorState.createEmpty());
const parsedData = JSON.parse(post.contentStyled);
const fromRawData = convertFromRaw(parsedData );
EditorState.createWithContent(fromRawData);


// here is the view rendered part -
   <Editor 
     readOnly=true
     editorState=editorState
   />

但是在编辑器中设置后（在从 API 获取数据之后）我的提及（@...@...@...）丢失了 CSS。我们该怎么办？

关于使用编辑 ->

在编辑器中再次获取和设置 ->

我不知道为什么会这样，请帮忙解决这个问题！

【参考方案1】：

您应该执行以下操作：

const [editorState, setEditorState] = React.useState(() => 
  const parsedData = JSON.parse(post.contentStyled);
  const fromRawData = convertFromRaw(parsedData );
  return EditorState.createWithContent(fromRawData);
);

// ...
   <Editor 
     readOnly=true
     editorState=editorState
   />

如果您使用新创建的状态覆盖 editorState，您将删除插件添加的所有装饰器。

【讨论】：

没用，还是没看出区别