如何在没有 html 标记的情况下显示 React Quill 的内容？

Question

我设法让我的 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>
  )}
}

目前我得到这个：

非常感谢任何帮助！

Answer 1

经过一些研究，我找到了答案：

要在没有 html 标签的情况下在预览部分显示 Quill 的内容，我使用了以下代码：

      <div dangerouslySetInnerHTML={{__html: this.state.content}}></div>

Answer 2

onChange(content, delta, source, editor) {
  const text = editor.getText(content);
  this.setState ({ content: text });
  console.log(text)
}

Answer 3

你需要html-react-parser

import Parser from 'html-react-parser';

...     // in your render
<ReactQuill
    ...
    value={code} 
    onChange={this.previewCode}
/>
...
{Parser(code)}

Answer 4

这是文档 link：https://github.com/zenoamaro/react-quill#the-unprivileged-editor

易于实现并从 quill 编辑器中获取文本

// 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 }} />

祝你好运...

Answer 5

最简单的方法是在禁用编辑的情况下使用相同的 react-quill 组件。 此方法不需要您安装任何额外的包。您可以通过传递一个属性 readOnly 来实现，其值设置为 true（默认为 false）

以下是可用于预览端的组件代码：

<ReactQuill
   value={this.state.content}
   readOnly={true}
   theme={"bubble"}
/>

这是它的样子：

注意： ReactQuill 带有两个内置主题（泡泡和雪）。

这是 雪花主题 中的样子。它的顶部有一个工具栏：

下面是它在 气泡主题 中的样子。

您应该通过在主题属性中传递字符串“bubble”来使用“bubble”主题来显示您的编辑器内容。这是因为它没有像“snow”主题那样的顶部工具栏。

为了使用泡泡主题，您还必须 import a CSS stylesheet 为这个特定的主题如下：*

import 'react-quill/dist/quill.bubble.css'

Answer 6

使用 'html-react-parser' 对我有用

Answer 7

我在React.js中是这样使用的.. 要在 div 中显示 quil 内容，我使用 class “ql-editor” 因为通过这个我们的 div 可以使用 quil 默认值 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>
}

Answer 8

保存 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>

Answer 9

要在 REACT 中在您的网页中预览 HTML，那么您有 2 个选项，

使用依赖项html-react-parser 按照以下步骤， 第一步： 使用以下命令安装依赖项， 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 Quill 的内容？

How do I display the content of React Quill without the html markup?

javascript

reactjs

quill