Quill 工具栏未渲染（显示图标路径而不是渲染）答案

【问题标题】：Quill toolbar is not rendering (icon paths are displayed instead of being rendered)Quill 工具栏未渲染（显示图标路径而不是渲染）
【发布时间】：2020-02-14 09:25:44
【问题描述】：

我正在尝试在 React 中运行本机 Quill。我遵循 quill 的快速入门，但不幸的是，工具栏渲染存在问题（见下文）。图标路径被显示而不是被渲染。请给我同样的指示:)

羽毛笔组件：

import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import React, { Component, Fragment } from 'react';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
});


class MyQuill extends Component {

  constructor(props) {
    super(props);
  }


  componentDidMount(props) {
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
  }

  render() {
    return (
      <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
      </div>
    );
  }
}
export default MyQuill;

【问题讨论】：

标签： reactjs quill

【解决方案1】：

最后我能够修复它（见下文）。可惜这么棒的工具却有这么差的文档。

更改自：

import Quill from 'quill/core';

到

import Quill from 'quill/dist/quill.js';

来自：

Quill.register({
  'themes/snow': Snow,
});

到

Quill.register({
  'themes/snow.js': Snow,
});

【讨论】：