'How do I display the content of React Quill without the html markup?
I managed to get my Quill working, but now I wanted to make a nice splitscreen as we have on this forum but one thing I haven't been able to figure out is how to convert the input of Quill to nice text on the preview side.
I'm able to display the text but it still has all the html tags which of course I don't want.
So this is my Quill setup so far:
export default class AddSpark extends Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.state ={
content: '',
};
}
onChange(html) {
this.setState ({ content: html });
console.log(html)
}
render() {
return (
<div>
<Col xs={12} md={6}>
<form ref={(input) => this.sparkForm = input} onSubmit={(e) => this.createSpark(e)}>
<ControlLabel>Select your city</ControlLabel>
<select id="formControlsCity" placeholder="Choose your city" onChange={this.onChange} className="form-control" onClick={ moreOptions } ref={(input) => this.city = input}>
<option value="select">Choose your city</option>
<option value="Beijing">Beijing</option>
<option value="Shanghai">Shanghai</option>
<option value="Chengdu & Chongqing">Chengdu & Chongqing</option>
</select>
<ControlLabel>Select your person</ControlLabel>
<select id="formControlsPerson" placeholder="Choose your person" className="form-control" ref={(input) => this.person = input}>
<option value="select">First select your city</option>
</select>
<ControlLabel>Select your location</ControlLabel>
<select id="formControlsLocation" placeholder="Choose your location" className="form-control" ref={(input) => this.location = input}>
<option value="select">First select your city</option>
</select>
<ControlLabel>Title</ControlLabel>
<input type="text" label="Title" placeholder="Enter your title" className="form-control" ref={(input) => this.title = input}/>
<ControlLabel>Content</ControlLabel>
<div className='_quill'>
<ReactQuill
ref='editor'
onChange={this.onChange}
/>
</div>
<br />
<Button type="submit">Submit</Button>
</form>
</Col>
<Col xs={12} md={6}>
<h3>Preview</h3>
{this.state.content}
</Col>
</div>
)}
}At the moment I get this:
Any help is highly appreciated!
Solution 1:[1]
After doing some research I was able to find the answer:
To display the content of Quill in the preview section without the html tags I used this code:
<div dangerouslySetInnerHTML={{__html: this.state.content}}></div>Solution 2:[2]
The simplest way is to use the same react-quill component with editing disabled. This method doesn't need you to install any extra package. You can do it by passing a prop readOnly whose value is set to true (By default it is false)
Here is the code for the component which you can use to preview side:
<ReactQuill
value={this.state.content}
readOnly={true}
theme={"bubble"}
/>
This is how it will look like:
Note: ReactQuill comes with two inbuilt themes (bubble and snow).
Here is how it looks in the snow theme. It has a toolbar at the top:
And here is how it looks in bubble theme.
You should use the "bubble" theme by passing the string "bubble" in the theme prop to display your editor content. This is because it does not have a toolbar at the top like the "snow" theme.
In order to use the bubble theme, you'll also have to import a CSS stylesheet for this specific theme as follow:*
import 'react-quill/dist/quill.bubble.css'
Solution 3:[3]
onChange(content, delta, source, editor) {
const text = editor.getText(content);
this.setState ({ content: text });
console.log(text)
}
Solution 4:[4]
You need html-react-parser
import Parser from 'html-react-parser';
... // in your render
<ReactQuill
...
value={code}
onChange={this.previewCode}
/>
...
{Parser(code)}
Solution 5:[5]
i used it like this in React.js.. To display quil content in a div i use class "ql-editor" because through this our div can use the quil default classes...works..
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
const ReactMarkdown = require("react-markdown/with-html"); //for displaying html
function editorContent() {
<div className="ql-editor" style={{ padding: 0 }}>
<ReactMarkdown escapeHtml={false} source={quilGeneratedHtml} />
</div>
}
Solution 6:[6]
Here's the docs link: https://github.com/zenoamaro/react-quill#the-unprivileged-editor
simple to implement and getText out of quill editor
// define function to get text,
// here inpText is defined in your constructor, or any global variable
onChangeText = () => {
const editor = this.reactQuillRef.getEditor();
const unprivilegedEditor = this.reactQuillRef.makeUnprivilegedEditor(editor);
// You may now use the unprivilegedEditor proxy methods
this.inpText = unprivilegedEditor.getText();
console.log("unprivilegedEditor.getText()", unprivilegedEditor.getText());
}
// on submit, you can set state with that text binded in this.inpText
this.setState({text: this.inputText})
}
// define react quill component
<ReactQuill value={this.state.text} onChange={this.onChangeText} ref={(el) => { this.reactQuillRef = el }} />
Good Luck...
Solution 7:[7]
Using 'html-react-parser' worked for me
Solution 8:[8]
Save the html output from quill editor. Then render it as an innerHTML on a div. Give class="ql-editor" to the div and the html will be formatted as we see it in the editor. No need to instantiate editor context. Just import quill's css file.
Vue example:
import '@vueup/vue-quill/dist/vue-quill.snow.css';
<div class="ql-editor" v-html="result"></div>
Solution 9:[9]
To preview HTML in your web page in REACT then there are 2 options you have,
using dependency html-react-parser Follow below steps, Step1: Install dependency using below command, npm i html-react-parser If you are using yarn then use below command, yarn add html-react-parser
Step 2:
const parse = require('html-react-parser'); parse(`<div>${this.state.content}</div>`);Use below code to set the editor contents using below code,
<div dangerouslySetInnerHTML={{ __html: this.state.content, }}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow