![](/img/trans.png)
[英]How do I display the content of React Quill without the html markup?
[英]How to render the content of React Quill without the html markup?
我设法让我的 Quill 工作,但现在我想显示编辑器中没有 html 标记的内容。 我尝试使用react-render-html npm package,它之前工作正常但现在不再维护并给我一个错误
Could not find a declaration file for module 'react-render-html'. /path/to/module
implicitly has an 'any' type.
Try `npm install @types/react-render-html` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-render-html';
它还显示了 html 标记。 所以我尝试使用react-html-parser 、 htmr 、 html-to-react npm 包,它非常适合单个元素,但不适用于多个元素。 所以我尝试了 console.log 来查看我从后端收到的信息,这给了我这个
<p><h2>Hello</h2><p>how are you ? </p> <h2>Hello</h2><p>how are you ? </p> <h2>Hello</h2><p>how are you ? </p> <h2>Hello</h2><p>how are you ? </p> <h2>Hello</h2><p>how are you ? </p>
现在我想在没有 html 标记的情况下呈现它,所以我又做了一次 console.log 以查看它是否通过执行正确转换
//import renderHtml from 'htmr';
//import renderHtml from 'html-to-react';
import renderHtml from 'react-html-parser';
console.log(renderHtml(${blog.excerpt}))
最终它给了我这个
<h2>Hello</h2><p>how are you ? </p>
<h2>Hello</h2><p>how are you ? </p>
<h2>Hello</h2><p>how are you ? </p>
<h2>Hello</h2><p>how are you ? </p>
<h2>Hello</h2><p>how are you ? </p>
我也尝试过dangerouslysetinnerhtml
但它不再工作了
查看您的服务器响应, HTML 标记已转义。 在传递给 HTML 解析器之前,您需要先对其进行转义。
您可以使用html-entities来解码服务器响应。 最简单的方法是替换所有的<
和>
人物。
const decodedHtml = htmlEntities.decode(html)
// or
const decodedHtml = html.replace(/</g, '<').replace(/>/g, '>')
return htmr(decodedHtml)
要解决这个问题,只需粘贴一行<div dangerouslySetInnerHTML={{ __html:value }} />
这里的值是你从 react-quill 得到的 HTML。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.