#html #angular #rte
#HTML #angular #rte
Вопрос:
Просто чтобы прояснить ситуацию, я использовал RTE в серверной части для хранения некоторого описания. Позже, через API, я получаю описание вместе с другими деталями в качестве ответа. Теперь стили не повреждены до сих пор. Например, заголовки, выделенные жирным шрифтом. Но когда я отображаю его в HTML-документе, используя свойство innerHTML, все, что я вижу, это неформатированный текст. Заголовки больше не выделены жирным шрифтом.
Вот часть ответа:
</p>rnnrn<p><span style="font-weight: bold;">Features</span> n </p>rnnrn<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>rnnrn<p><span style="font-weight: bold;">Features</span> n </p>rnnrn<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>rnnrn<p><span style="font-weight: bold;">How To Use n</span></p>rnnrn<p>Apply Dr G oil or Dr G gel as per your skin type covering the face and neck. </p>rn<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>rn<p>You can sweep it 3-5 times per area. </p>rn<p>Recommended at least a few times a week for best results. </p>rnnrn<p><span style="font-weight: bold;">About Dr G</span> n </p>rnnrn<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
}
]
}
}
Комментарии:
1. Я должен был бы увидеть полный ответ от серверной части, но если бы мне пришлось делать ставки на предположение, я бы проверил, являются ли закодированные кавычки проблемой (т.е. «).
2. @AldinBradaric, я тоже изначально об этом думал. Является ли sit тем, что текст преобразуется в строку при отправке в качестве ответа? Единственная причина знать это заключается в том, что клиент может указать что угодно в описании в любом формате (жирный шрифт, курсив и т.д.). Мы просто не хотим ничего жестко кодировать. Спасибо за вашу помощь!
3. Как сказал Олдин Брадарик, для прояснения этой проблемы необходим полный ответ. Но вы должны закодировать свой HTML (например, в строку Base64), прежде чем привязывать его к интерфейсу и декодировать его там.
4. Я обновил его с полным ответом, пожалуйста, взгляните. Спасибо!
Ответ №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-код перед отправкой его во frondend. Вы могли бы использовать Base64, который можно легко закодировать в бэкэнде и декодировать во внешнем интерфейсе перед его отображением.
Если эти «неправильные» символы уже присутствуют, когда вы получаете этот HTML-код (на вашем сервере), вы должны сначала проанализировать его, чтобы очистить.
Комментарии:
1. Отвечаю здесь, чтобы любому другому разработчику, имеющему аналогичную проблему, не приходилось тратить много времени, поэтому проблема не в » n», а в DOMSanitization в angular. Подробнее об этом здесь: angular.io/api/platform-browser/DomSanitizer Решение: Используйте простой трубопровод, чтобы обойти дезинфекцию, если вы доверяете внешнему источнику.