如何在没有html标记的情况下呈现React Quill的内容? [英] How to render the content of React Quill without the html markup?

问题描述

我设法使羽毛笔正常工作，但现在我想显示没有html标记的编辑器中的内容.我尝试使用 react-render-html npm包，在此之前它可以正常工作但是现在它不再维护了，给了我一个错误

I managed to get my Quill working, but now I wanted to display the contents from the editor without the html markup. I tried using react-render-html npm package, it was working fine before but now it is no longer maintained and gives me a error

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 ，

also it shows up with html markup. So i tried using react-html-parser , htmr , html-to-react npm packages , it works perfectly for single elements but it is not working for multiple elements. So i tried console.log to see what i am receiving from backend which gave me this

<p>&lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt; &lt;h2&gt;Hello&lt;/h2&gt;&lt;p&gt;how are you ? &lt;/p&gt;

现在，我想呈现不带有html标记的代码，因此我再次执行console.log，以查看是否通过执行正确转换了

Now i wanted to render this without the html markup , so i did again console.log to see whether it is getting converted properly by doing

  //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 但它不再起作用

I also tried with dangerouslysetinnerhtml but it isn't working again

推荐答案

看您的服务器响应，HTML标记被转义.您需要先对其进行转义，然后再传递给HTML解析器.

Looking at your server response, the HTML tag is escaped. You need to escape it first before passing to HTML parser.

您可以使用 html-实体来解码服务器响应.最简单的方法是替换所有& lt; 和& gt; 字符.

You can use html-entities to decode the server response. The easiest way is to replace all < and > characters.

const decodedHtml = htmlEntities.decode(html)
// or
const decodedHtml = html.replace(/&lt;/g, '<').replace(/&gt;/g, '>')

return htmr(decodedHtml)

这篇关于如何在没有html标记的情况下呈现React Quill的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！