我设法让我的 Quill 工作,但现在我想制作一个漂亮的分屏,就像我们在这个论坛上所做的那样,但我无法弄清楚的一件事是如何将 Quill 的输入转换为预览上漂亮的文本侧面。
我可以显示文本,但它仍然包含所有 html 标签,这当然是我不想要的。
这是我到目前为止的 Quill 设置:
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>
)}
}
非常感谢任何帮助!
最简单的方法是使用相同的react-quill组件并禁用编辑。 此方法不需要您安装任何额外的包。您可以通过传递一个值为 true 的 prop readOnly 来实现(默认为 false)
这是您可以用来预览的组件的代码:
<ReactQuill
value={this.state.content}
readOnly={true}
theme={"bubble"}
/>
注意: ReactQuill 带有两个内置主题(气泡和雪)。
您应该通过在主题属性中传递字符串“bubble”来使用“bubble”主题来显示编辑器内容。这是因为它不像“雪”主题那样在顶部有一个工具栏。
为了使用气泡主题,您还必须为此特定主题导入 CSS 样式表,如下所示:*
import 'react-quill/dist/quill.bubble.css'
经过一些研究,我找到了答案:
为了在预览部分显示 Quill 的内容而不使用 html 标签,我使用了以下代码:
<div dangerouslySetInnerHTML={{__html: this.state.content}}></div>
onChange(content, delta, source, editor) {
const text = editor.getText(content);
this.setState ({ content: text });
console.log(text)
}
你需要 html-react-parser
import Parser from 'html-react-parser';
... // in your render
<ReactQuill
...
value={code}
onChange={this.previewCode}
/>
...
{Parser(code)}
我在 React.js 中这样使用它.. 要在 div 中显示 quil 内容,我使用类“ql-editor”,因为通过此我们的 div 可以使用 quil 默认类...有效..
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>
}
这是文档链接:https://github.com/zenoamaro/react-quill#the-unprivileged-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 }} />
祝你好运...
要在 REACT 中预览网页中的 HTML,您有 2 个选项,
使用依赖项html-react-parser 请按照以下步骤操作, 步骤1: 使用以下命令安装依赖项, npm 我 html-react-parser 如果您使用的是 yarn 那么请使用以下命令, 纱线添加 html-react-parser
第2步:
const parse = require('html-react-parser');
parse(`<div>${this.state.content}</div>`);
使用下面的代码设置编辑器内容,
<div
dangerouslySetInnerHTML={{
__html: this.state.content,
}}
使用“html-react-parser”对我有用
保存 quill 编辑器的 html 输出。然后将其呈现为 div 上的innerHTML。将 class="ql-editor" 赋予 div,html 将按照我们在编辑器中看到的格式进行格式化。无需实例化编辑器上下文。只需导入 quill 的 css 文件即可。
Vue 示例:
import '@vueup/vue-quill/dist/vue-quill.snow.css';
<div class="ql-editor" v-html="result"></div>
我尝试使用 2 个选项:-
1> Using **dangerouslySetInnerHTML**, but this I will not recommend.
2> WE can try using a npm package for react such as
**html-react-parser**. Try it out, as its easy to use.
当您将数据从 Quill 等编辑器保存到数据库然后检索它时,有时会遇到存储在数据库中的编码 HTML 的问题。当 HTML 在上下文数据库中被理解和处理时,通常会发生这种情况。
1。将数据保存为纯文本:
const convertHtmlToPlainText = (html) => {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || '';
};
const plainText = convertHtmlToPlainText(quillContent);
2。使用dangerouslySetInnerHTML:
<div dangerouslySetInnerHTML={{ __html: quillContent }} />
3.显示前转义 HTML:
import he from 'he';
const escapedHtml = he.escape(quillContent);
示例
Use dangerouslySetInnerHTML
: