渲染从草稿js保存的html [英] Render html saved from draft-js

问题描述

我正在学习React:完全是新手.

I'm learning React: totally newbie.

如果我直接从draft.js(或者总是基于它的变体)中将HTML保存在数据库中，然后在我的React SPA的查看页面中，我通过API从数据库中检索HTML:

If I save in DB the HTML directly from draft.js (or it's variants always based on it) and then in a view page of my React SPA I retrieve HTML from DB through my API:

问题:

• 如何呈现HTML?

• how can I render that HTML?

dangerouslySetInnerHTML?或者也许是其中之一(您有什么建议?)?

dangerouslySetInnerHTML? Or maybe one of this (what do you suggest?)?

• https://github.com/wrakky/react-html-parser
• https://github.com/pveyes/htmr
• https://github.com/remarkablemark/html-react-parser
• https://github.com/utatti/react-render-html
• https://github.com/aknuds1/html-to-react

• https://github.com/wrakky/react-html-parser
• https://github.com/pveyes/htmr
• https://github.com/remarkablemark/html-react-parser
• https://github.com/utatti/react-render-html
• https://github.com/aknuds1/html-to-react

我读了诸如消毒"，保护HTML"之类的词.但是，怎么有图书馆呢?

I read words like "sanitize", "securing HTML". But how, there is a library?

当我将HTML保存在数据库中时或在渲染时，我需要从草稿js中保护html吗?

I need to secure html from draft-js when I save it in DB or after, when I'm rendering it?

推荐答案

Draft-JS不允许您直接从当前的EditorState生成HTML，这是一件好事.由于您无需处理原始HTML"，因此无需处理XSS攻击，因为如果有人在编辑器中插入脚本，草稿编辑器的内部状态将不会改变.

Draft-JS doesn't allows you to directly generate HTML from the present EditorState and that's a good thing. Since you are not dealing with "Raw HTML" you don't have to deal with XSS attacks as Draft Editors internal state won't get altered if someone inserts a script in the Editor.

Draft JS允许您导出当前的Editor状态，以便您轻松存储它.可以使用

Draft JS allows you the export the current Editor state so that you can store it easily. It can be done using

import {convertToRaw} from 'draft-js';

，在您的onChange处理程序中，您可以轻松完成

and in your onChange Handler you can simply do

const editorJSON = JSON.stringify(convertToRaw(EditorState.getContents()));

您可以根据需要存储此JSON，以备将来使用.

You can the store this JSON as you like for future use.

现在要渲染，您有两个选择:

Now for Rendering this you have two options :

1. 从存储的EditorState生成HTML.

这可以使用 https://www.npmjs之类的库来完成. com/package/draft-js-export-html .您可能要避免这种情况，因为我认为下一个选择更好.

This can be done using Libraries like https://www.npmjs.com/package/draft-js-export-html. You might want to avoid this as the next option in my opinion is way better.

使用此EditorState作为只读Dra​​ftJS编辑器组件的默认值.

您将需要DraftJS库中的convertFromRaw，然后制作一个类似这样的Nice StateLess React组件

You are going to need convertFromRaw from DraftJS Library and then you make a Nice StateLess React Component like this

import React from 'react';
import {Editor, ConvertFromRaw} from 'draft-js';

const ReadOnlyEditor = (props) => {
  const storedState =  ConvertFromRaw(JSON.parse(props.storedState));
  return (
     <div className="readonly-editor">
       <Editor editorState={storedState} readOnly={true} /> 
     </div>
  );
}

现在，您可以简单地使用它来显示您的内容.您还可以传递装饰器和自定义映射功能，通常将传递给普通编辑器的所有内容传递给普通编辑器，并且可以呈现内容而不会损失样式和使用HTML的乏味.

And Now you can simply use this to display your contents. You can also pass your decorators and custom mapping functions, typically everything you pass to the normal Editor and can render the content without loss of style and tedious dealing with HTML.

这篇关于渲染从草稿js保存的html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！