JS草案,提到插件呈现为纯文本

Posted

技术标签:

【中文标题】JS草案,提到插件呈现为纯文本【英文标题】:Draft JS, mention plugin renders as plain text 【发布时间】:2021-01-27 12:30:46 【问题描述】:

我正在使用提及插件实现 React 的“draft js”。 https://www.draft-js-plugins.com/ 到目前为止,我能够创建编辑器并创建提及标签。我可以使用 rest API 将提及保存在我的数据库中。这是我在将内容保存到数据库时所做的:

 const contentState = this.state.MyInput.getCurrentContent();
 const raw = convertToRaw(contentState);
 const data =  JSON.stringify(raw, null, 2);

在此之后,我将数据传递给 API。直到这里它运行良好,现在当我尝试从数据库中检索数据时。我使用以下步骤

  handlePostDisplay = (post) => 
  const savedData = JSON.parse(post.body)
  if (savedData !== null) 
    const contentState = convertFromRaw(savedData);
    const newEditorState = EditorState.createWithContent(contentState);
    return newEditorState;
  

然后在我的帖子列表模块中,我将 newEditorState 作为道具传递。

<PostCard key=post.id ...post 
   postContent = this.handlePostDisplay(post)
/>

最后是我要显示的编辑器:

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

上面的代码呈现文本,但提及和 hastags 没有正确显示,它们显示为纯文本。我确信我在渲染时遗漏了任何步骤,从文档中我可以看到我们需要使用装饰器,但不确定我们如何使用。我将非常感谢任何帮助!

【问题讨论】:

【参考方案1】:

确保添加提及插件 css 文件。

导入'draft-js-mention-plugin/lib/plugin.css';

【讨论】:

以上是关于JS草案,提到插件呈现为纯文本的主要内容,如果未能解决你的问题,请参考以下文章

自定义 Jekyll 插件(液体过滤器?)将脚本标签呈现为文本,而不是 JavaScript

是否有将 HTML 转换为纯文本的功能?

将 vue.js 获取的 html 文本转化为纯文本

怎么使用js插件?

QueryDSL 注释处理器和 gradle 插件

IDEA插件系列(105):IDEA Mind Map插件——IDEA思维导图