添加自定义工具栏按钮后react-quill缺少样式答案

【问题标题】：react-quill missing style after adding custom toolbar button添加自定义工具栏按钮后react-quill缺少样式
【发布时间】：2018-10-09 14:12:55
【问题描述】：

我需要在 react quill HTML 编辑器中添加一个自定义工具栏按钮。

我已按照教程https://github.com/zenoamaro/react-quill#custom-toolbar 进行操作，但无法使其正常工作。代码如下。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import ReactQuill from 'react-quill'; // ES6

import './style.scss';

class DocumentForm extends Component {

  constructor(props) {
    super(props);

    this.state = {
      file: null,
      documentDetails: {},
      text: ''
    };
    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.modules =  {
      toolbar: [
        [{ 'header': [1, 2, false] }],
        ['bold', 'italic', 'underline','strike', 'blockquote'],
        [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
        ['link', 'image'],
        ['clean']
      ],
    }

    this.formats = [
      'header',
      'bold', 'italic', 'underline', 'strike', 'blockquote',
      'list', 'bullet', 'indent',
      'link', 'image'
    ]
  }

  handleEditorChange(value) {
    this.setDocumentDetails('html_content', value)
  }

  render() {
    let selectedDocument = this.state.documentDetails;
    return (
             <div>
                 <div>
                      <div className="form-group">
                        <label>File Content</label>
                        <Editor placeholder={'Write something or insert a star ★'}/>,
                      </div>
                  </div>
             </div>
    );
  }
}

export default  DocumentForm


/*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.github.io
 */
const CustomButton = () => <span className="octicon octicon-star" />

/*
 * Event handler to be attached using Quill toolbar module
 * http://quilljs.com/docs/modules/toolbar/
 */
function insertStar () {
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, "★")
  this.quill.setSelection(cursorPosition + 1)
}

/*
 * Custom toolbar component including insertStar button and dropdowns
 */
const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">
      <CustomButton />
    </button>
  </div>
)

/*
 * Editor component with custom toolbar and content containers
 */
class Editor extends React.Component {
  constructor (props) {
    super(props)
    this.state = { editorHtml: '' }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (html) {
    this.setState({ editorHtml: html });
  }

  render() {
    return (
      <div className="text-editor">
        <CustomToolbar />
        <ReactQuill
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
          modules={Editor.modules}
        />
      </div>
    )
  }
}

/*
 * Quill modules to attach to editor
 * See http://quilljs.com/docs/modules/ for complete options
 */
Editor.modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      "insertStar": insertStar,
    }
  }
}

/*
 * Quill editor formats
 * See http://quilljs.com/docs/formats/
 */
Editor.formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'color',
]

与教程不同的是，有 2 个工具栏显示了自定义工具栏，但按钮没有样式。按钮处理程序（insertStar）也不起作用。

页面截图如下。

关于如何解决这个问题的任何想法

【问题讨论】：

当渲染多个鹅毛笔编辑器但为您的自定义工具栏使用非唯一的工具栏查询选择器 (for example) 时，可能会出现这种故障类型的外观。不过，根据您的代码，您似乎只呈现了一个羽毛笔编辑器。

标签： javascript reactjs

【解决方案1】：

在 Reactquill 文档 https://www.npmjs.com/package/react-quill#import-the-stylesheet 中，样式表必须导入为：

require('react-quill/dist/quill.snow.css'); // CommonJS
import 'react-quill/dist/quill.snow.css'; // ES6

【讨论】：

【解决方案2】：

根据quill.js guide，你需要像下面这样导入CSS

@import "~quill/dist/quill.core.css"

【讨论】：

【解决方案3】：

尝试导入，样式表如下：

import "react-quill/dist/quill.snow.css"

【讨论】：