Ich hatte gestern den Fall, dass ich in Gutenberg unter „save“ eine Variable, die ich durch vorherige Eingaben vorbereitet hatte, als HTML speichern wollte. Diese Variable hat <br> Tags beinhaltet und diese wurden als Klartext gespeichert.
Da man in Gutenberg mit React arbeitet, habe ich etwas gegooglet und bin auf die Lösung mit dangerouslySetInnerHTML gekommen. Diese Funktion wird in der React Dokumentation wie folgt beschrieben:
dangerouslySetInnerHTML ist Reacts Ersatz für die Verwendung von innerHTML im Browser-DOM. Im Allgemeinen ist das Festlegen von HTML direkt im Code riskant, da Ihre Benutzer leicht versehentlich einem Cross-Site-Scripting-Angriff (XSS) ausgesetzt werden. Sie können HTML-Code also direkt in React festlegen, müssen jedoch dangerouslySetInnerHTML eingeben und ein Objekt mit einem __html-Schlüssel übergeben, um sich daran zu erinnern, dass es gefährlich ist.
React Dokumentation – DOM Elements
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}Meine Anwendung
Ich habe diese Methode dennoch verwendet, weil diese nicht zur Ausgabe sondern lediglich zum abspeichern der Variable dient. Diese Gefahr würde dann ausgehen, wenn man diese Funktion in der Ausgabe im Frontend verwenden würde und keine Sicherheitsvorkehrungen getroffen hätte.
Ich hoffe ihr habt Verständnis dafür, dass ich nur einen Teil des save-Abschnittes zeige.
save: ( props ) => {
const { attributes: { product_description }} = props;
return <span dangerouslySetInnerHTML={{__html: product_description}}></span>;
}Fazit
Das war die schnelle Lösung die ich gefunden habe und diesem habe ich auch erfolgreich getestet. Falls ihr der Meinung seid, dass das nicht unbedingt die beste Lösung ist, könnt ihr mir euren Vorschlag gerne per E-Mail zukommen lassen.
Ansonsten hoffe ich euch weitergeholfen haben zu können. Einen schönen Tag noch!
