将 Quill 导入 React 应用程序会引发“未定义 React”、“意外的令牌导入”

Posted 2023-03-23

【中文标题】将 Quill 导入 React 应用程序会引发“未定义 React”、“意外的令牌导入”

【英文标题】：Importing Quill to React app throws "React is not defined", "Unexpected token import"

【发布时间】：2018-09-27 15:22:00

【问题描述】：

我正在尝试让 Quill 在我的 React 应用程序上工作，但根据我的 webpack 配置，它会引发两个错误：

Uncaught SyntaxError: Unexpected token import

或

Uncaught ReferenceError: React is not defined

请注意，我没有使用 react-quill 或 create-react-app。

解决第一个错误会产生另一个错误，我读到我需要在 webpack 中创建一个异常以允许它从 quill 文件夹导入。

exclude: /node_modules/

进入

/node_modules(?!\/quill)/

现在它抛出第二个错误。

我的 webpack 配置文件：

module.exports = 
  entry: [
    './src/index.js'
  ],
  output: 
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  ,
  module:    
    loaders: [
      exclude: /node_modules(?!\/quill)/,
      loader: 'babel',
      query: 
        presets: ['react', 'es2015', 'stage-1']
      
    ]
  ,
  resolve: 
    extensions: ['', '.js', '.jsx']
  ,
  devServer: 
    historyApiFallback: true,
    contentBase: './'
  
;

我正在使用来自 Quill 文档的基本代码来导入所需内容：

import React,  Component  from 'react';

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 Header from 'quill/formats/header';

Quill.register(
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
);
class Tutorial extends Component 
    constructor(props)
        super(props);
        this.editor = null;
    
    render()
        return (
            <div className="verb-container">
                <div className="editor"></div>
            </div>
        );
    


export default Tutorial;

当我只导入时：

import Quill from 'quill';

或

import Quill from 'quill/core';

如果我像这样初始化它，就会出现一个基本编辑器：

this.editor = new Quill('.editor');

但是当我尝试导入时

import Snow from 'quill/themes/snow';

它显示：

React 没有定义

如果我错过了任何重要信息，请告诉我。

【参考方案1】：

你的问题帮助我弄清楚了如何让 Quill 在 React 应用程序中工作，所以谢谢你！

“React 未定义”错误可能与 Quill 无关。

这里可能的解决方案：Uncaught ReferenceError: React is not defined

不管怎样，下面是我将 Quill 导入 React 组件的方法。

注意这是在 React 应用程序中使用 Quill，而不是使用 react-quill npm 包。

import React from 'react';

// import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';

import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow'; //snow works, but need to import and register formats, and replace icons...

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
import Underline from 'quill/formats/underline';
import Link from 'quill/formats/link';
import List,  ListItem  from 'quill/formats/list';

import Icons from 'quill/ui/icons'; 

export default class QuillEditor extends React.Component 

  componentDidMount() 

    Quill.register(
      'modules/toolbar': Toolbar,
      'themes/snow': Snow,
      'formats/bold': Bold,
      'formats/italic': Italic,
      'formats/header': Header,
      'formats/underline': Underline,
      'formats/link': Link,
      'formats/list': List,
      'formats/list/item': ListItem,
      'ui/icons': Icons
    );

    var icons = Quill.import('ui/icons');
    icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
    icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';
    icons['underline'] = '<i class="fa fa-underline" aria-hidden="true"></i>';
    icons['link'] = '<i class="fa fa-link" aria-hidden="true"></i>';
    icons['clean'] = '<i class="fa fa-eraser" aria-hidden="true"></i>'; 

    var quill = new Quill('#editor', 
      theme: 'snow', //this needs to come after the above, which registers Snow...
      placeholder: "Write something awesome..."
    );
   //componentDidMount

  render() 
    return (
      <div>
          <div id="QuillEditor-container">
            /* <!-- Create the editor container --> */
            <div id="editor">
              <p>Hello World!</p>
              <p>Some initial <strong>bold</strong> text</p>
              <p></p>
            </div>
          </div>
      </div>
    )
  

【讨论】：

你能告诉我如何编写 onChange 事件并提交这个编辑器的内容吗？