javascript - 如何在没有 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

最简单的方法是在禁用编辑的情况下使用相同的 react-quill 组件。

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

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

它看起来像这样:

注意:ReactQuill 带有两个内置主题(泡泡和雪)。

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

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

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

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

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