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

Question

为了清楚起见，我在后端使用了 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
}
]
}
}

标签： htmlangularrte

Answer 1

您的回复中的 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（在您的后端）时已经存在此“错误”字符，则必须先对其进行解析以清除它。