As per title, what I'm trying to achieve is to display the Wysiwyg content from the Editor to another component.
I created a sample on codesandbox here: https://codesandbox.io/s/boring-tharp-zwflu
As you can see, the editor works fine and is returning the values as it should.
My issue here is I'm not able to convert that String I get returned, into JSX tags.
I did a deep search, but couldn't find anything related.
Thank you in advance for your time and help!
You have to install
npm i react-html-parser
import it to your component
import ReactHtmlParser from "react-html-parser";";
and render it
<div className="wysiwyg">
{ReactHtmlParser(wysiwyg)}
</div>
I actually found the solution at the end, sorry for not having updated it already!
Here the answer I got from TinyMCE for this issue: https://github.com/tinymce/tinymce-react/issues/138
So, you should use directly a parser, in this case react-html-parser will do the job.
I created another codesandbox so you can directly have a look at the working copy: https://codesandbox.io/s/crazy-greider-dl2mv
Hope that help!
Related
I'm currently running into a problem that I can't solve (I've been searching for solutions since this morning, but I can't manage to find what I need).
I created a React app using react-markdown, allowing the user to edit some post-its, whose content is stored in Markdown format in my DB. But the thing is, I discovered there was no way to underline a text (I thought that if you could do it on Discord, then it means that it's the same in Markdown).
What I'd like is a solution allowing me to simply transform this:
**Bold text**
__Underlined text__
Into... well... you know what I mean. It doesn't have to be this exact syntax, but at least something similar. The only thing I've found is to create custom components, which I don't want because it requires using an already existing syntax, or, to convert the Markdown with replace() functions and use dangerouslySetInnerHTML to display it, which I don't want either, because isn't it called "dangerouslySetInnerHTML" for a reason?
I'd really appreciate if someone could help. And by the way, sorry for any grammar mistakes, English isn't my native language...
Right now there are no identifiers for underlining text in markdown syntax.
But as you know we can achieve it by using html tags in our markdown.
But we don't have to use dangerouslySetInnerHTML in react-markdown for parsing HTML tags. react-markdown (Check Appendix A: HTML in markdown) uses a plugin rehype-raw.
You can question the thing that rehype-raw internally implements allowDangerousHtml:true, but to prevent this , we can wrap our markdown content around Dompurify.sanitize() to reduce code vulnerablity.
I also faced the same problem , so this is the approach I tried and it worked for me .
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import DOMpurify from 'dompurify';
import "./styles.css";
export default function App() {
const markdown = `
**Parsing html in react markdown**
<u>underlined text</u>
`;
return (
<div className="App">
<ReactMarkdown rehypePlugins={[rehypeRaw]}>
{DOMpurify.sanitize(markdown)}
</ReactMarkdown>
</div>
);
}
CodeSandBoxLink
I am making a blog website in React in which user can submit code with other text. The entire code and other text will later be saved into the database. I am looking for the functionality like Stackoverflow's in which user can submit code and it is shown in the post in the original format.
I tried my best to search for the exact name of this functionality(My best guess is using LateX) but couldn't find any. So my exact question is what module or package do I need to represent the code submitted by the user in the original format as in Stackoverflow's question.
Please help me in the problem so I can get along with my work on my website.
After a bit of research into the topic of markdown, I found that react-markdown is a npm module that can be used to create markdown in text string. It is almost similar to the one used in Stackoverflow. But the recent version seems to have some bug, so I used an older version(5.0.0). If you also want to include syntax highlighting, you can use highlight.js. It can be very easily included with react-markdown. Below is an example of react-markdown:
import React from "react";
import ReactMarkdown from "react-markdown";
export default class App3 extends React.Component {
render(){
var value='
#Heading1
<b>line break</b>
_italics_';
return (
<div className="App">
<ReactMarkdown source={value} />
</div>
);}
}
u can also use
dangerouslySetInnerHTML
if u don't to install 3rd libary
Hi Im getting text data from react markdown ,
const exampleMarkDown=
`<ol>
<li>example1</li>
<li>example2</li>
<li>example3</li>
</ol>`
and the output is
1.example1
2.example2
3.example2
and I would like to add material ui icon right next to
1. example <ICON HERE>
in react component.
so is there's any way I can do that??
You can use string literals and include the component next to the string.
const exampleMarkDown=
`<ol>
<li>example1 ${<Icon>}</li>
<li>example2 ${<Icon>}</li>
<li>example3 ${<Icon>}</li>
</ol>
`
EDIT: Ah, i just noticed you said you're using react markdown, sorry about that. I haven't used that library before, the only thing I can think of is adding the icon in the markdown before you receive it.
I am practicing react on condesanbox.io installed jsx- control-statement dependency. When iam adding any of the control statement it is undefined.
How to configure jsx- control-statements in codesandbox.io.
This question might be couple of month old and its look like the questioner has not find the solution yet,so here is my fix
Solution: Instead of using just jsx syntax inside the return statement wrap the jsx with react fragment,below is the example
return (<>
{user ? <Component1/>:<Component2/>}
</>)
You will not be able to use jsx-control-statements in codesandbox.io in the similar way that you might in a local babel environment.
(i guess strikethrough isn't a thing on stackoverflow?) ~~You will have to import { If } from 'jsx-control-statements' to get access to the If tag, for example.~~
edit:
I've seen people import it in the past (similar to this example https://github.com/PedroBern/react-tiger-transition/issues/2 ) but, as I'm sure you're aware, the jsx-control-statements lib is a babel plugin; the code seen in that example is probably only serving to calm eslint in an older version of control-statements.
If you pull the jsx-control-statements dependency into codesandbox and cast it to a variable via import whatever from 'jsx-control-statements', and look at 'whatever', you'll see that it is a function. (see the link below for the full code.)
You COULD maybe go down the road of hackifying a dumbed-down version of babel-core, and passing it into whatever(babel) but you're better off creating your own If tag that has a condition property and conditionally renders children.
https://github.com/AlexGilleran/jsx-control-statements/blob/master/src/index.js
This is my first using of react.js and
Code works in browser but html is highlighting in red how to fix this. I'm using JSX Harmony, Webstorm 11 ?
You can't put raw HTML/JSX into render. If you look at the docs, you'll see that you need to pass a ReactElement to render.
The easiest way to do that would be to create a simple React class using React.createClass()