what the best way to use <Image /> comp from wysiwyg editor img tag?
Unanswered
Somali posted this in #help-forum
SomaliOP
Hi, i have backend admin with wysiwyg editor.
Manager can place h1-h6 headings,p tags and img tag or video,
i wanna wrap img tag with next/image comp.
And the solution that I came up with doesn’t quite suit me. I just want to parse all the html code coming from the backend, find the img tag there, get the url from it and somehow display it as an <Image /> inside my frontend application.
Perhaps my method is not very suitable and there are libraries that allow me to work more flexibly with dangerslyInnerHtml, like react mdx for md files.
Can you tell me more solutions? Thanks
Manager can place h1-h6 headings,p tags and img tag or video,
i wanna wrap img tag with next/image comp.
And the solution that I came up with doesn’t quite suit me. I just want to parse all the html code coming from the backend, find the img tag there, get the url from it and somehow display it as an <Image /> inside my frontend application.
Perhaps my method is not very suitable and there are libraries that allow me to work more flexibly with dangerslyInnerHtml, like react mdx for md files.
Can you tell me more solutions? Thanks
2 Replies
@Somali Hi, i have backend admin with wysiwyg editor.
Manager can place h1-h6 headings,p tags and img tag or video,
i wanna wrap img tag with next/image comp.
And the solution that I came up with doesn’t quite suit me. I just want to parse all the html code coming from the backend, find the img tag there, get the url from it and somehow display it as an <Image /> inside my frontend application.
Perhaps my method is not very suitable and there are libraries that allow me to work more flexibly with dangerslyInnerHtml, like react mdx for md files.
Can you tell me more solutions? Thanks
i would store the data in a json tree, something like
rather than storing html directly
then in nextjs you simply need to render a react tree based on this json tree where you can use any custom components you want
[
{ type: "h1", content: "Hello world" },
{ type: "image", url: "https://via.placeholder.com/300" },
];rather than storing html directly
then in nextjs you simply need to render a react tree based on this json tree where you can use any custom components you want
but if you must store html, ig you can use something like https://www.npmjs.com/package/html-react-parser