在 HTML 文档中呈现时，富文本编辑器中的文本是否不继承样式？

如何解决在 HTML 文档中呈现时，富文本编辑器中的文本是否不继承样式？

为了清楚起见，我在后端使用了一个 RTE 来存储一些描述。后来，通过 api，我收到了描述以及其他详细信息作为响应。现在样式完好无损。例如，粗体标题。但是当我使用 innerHTML 属性在 HTML 文档中呈现它时，我看到的只是未格式化的文本。标题不再加粗。

以下是部分回复：

</p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone,smoother complexion and sculpted facial features.

很明显，这里可以看到 font-style="bold"。但在此之后，渲染版本不包含这些样式。

完整回复如下：

"cart_count":2,"images":[
],"success":true,"message":"Sucessfully","data":{
"product_id":1,"name":"Dr G Butterfly Gua Sha","category_id":1,"category":"Skin Tool","description":"<p>Dr G Butterfly Rose Quartz Gua Sha is a beauty and wellness tool designed to heal and enhance natural beauty. It lifts and sculpts your face,drains the lymph node,which reduces puffy eyes and face. By scraping with repeated strokes on the surface of the skin,this tool helps stimulate muscles and increases the blood flow. \n </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone,smoother complexion and sculpted facial features. Reduces the signs of ageing and gives younger-looking skin. Increases lymphatic function. Stimulates blood circulation. Improves the appearance of dark circles and reduces under-eye puffiness.  </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">How To Use  \n</span></p>\r\n\n\r\n<p>Apply Dr G oil or Dr G gel as per your skin type covering the face and neck. </p>\r\n<p>Hold the butterfly gua sha tool firmly and sweep across gently up and out,starting with the neck,cheeks,jawline,chin,around the mouth,and slowly glide under the eyes,across your eyebrows and from your forehead up to your hairline. </p>\r\n<p>You can sweep it 3-5 times per area. </p>\r\n<p>Recommended at least a few times a week for best results.  </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">About Dr G</span> \n </p>\r\n\n\r\n<p>Dr G offers luxury skincare products,backed by over a decade of dermatology expertise and on-ground practice. Made for Indian weather conditions,with variants for different skin types,including sensitive skin,and to address specific skin concerns - these innovative products are a perfect balance of nature and science. Drawing from ancient Ayurveda and combining natural extracts with skin-safe science,Dr G's range of products bridge modern skincare with holistic science.</p>","short_description":"Sculpts,Tones,Reduces Puffiness,Lifts","max_quantity":500,"status":1,"in_stock":1,"measurement":[
{
"is_cart":true,"ordered_quantity":2,"is_wish":false,"discounted_price":1400.0,"weight":"200 Gram","price":1400.0,"prod_id":1,"percentage":100,"max_quantity":500
}
]
}
}

解决方法

您回复中的 HTML 无效。如果将响应中的 HTML 字符串复制到以 .html 文件结尾的文本文件中，并使用浏览器（例如 index.html）打开它，则可以轻松测试它。或者使用像这样的验证器：https://www.freeformatter.com/html-validator.html

让我们从 HTML 字符串中挑出一个字符错误且未格式化显示的部分：

<span style=\"font-weight: bold;\">Features</span> \n

如果您删除此处的反斜杠 \，此和平将正确呈现：

<span style="font-weight: bold;">Features</span> \n

我建议您在将 HTML 发送给前端之前对其进行编码。您可以使用 Base64，它可以轻松地在后端编码并在显示之前在前端解码。

如果在您收到此 HTML 时（在您的后端）已经存在这个“错误”字符，您必须先解析它以清除它。