react quill

其他资源 • 2025-08-05

ReactQuill

React的Quill分量。

2025注

您可能不需要此库将Quill与React一起使用。请参阅https://**quilljs.c*om/playground/reeact

查看现场演示或Codepen。

  • 快速开始
    • 使用webpack或创建反应应用
    • 使用浏览器捆绑包
  • 用法
    • 控制模式警告
    • 使用三角洲
    • 主题
    • 自定义工具栏
      • 默认工具栏元素
      • HTML工具栏
    • 自定义格式
    • 自定义编辑区
  • 升级到ReactQuill V2
    • 弃用道具
    • ReactQuill Mixin
    • 工具栏组件
  • API参考
    • 出口
    • 道具
    • 方法
    • 无私人的编辑
  • 建筑和测试
  • 浏览器支持
  • ChangElog
  • 贡献者
  • 执照

这是ReactQuill V2的文档 - 先前的版本：V1

ReactQuill V2

ReactQuill 2在这里，宝贝！它为打字稿和反应16+，重构构建系统以及内部逻辑的一般拧紧。

我们努力避免引入任何行为变化。对于绝大多数案件，根本不需要迁移。但是，已删除了对长期剥夺的道具，反应Quill混合蛋白和工具栏组件的支持。确保阅读《迁移指南》。

我们预计此版本将是一个插入升级 - 如果不是这种情况，请提交V2标签问题。

快速开始

使用webpack或创建反应应用

确保您有反应和反应 - 以及某种方式加载样式（例如样式加载器）。有关更多信息，请参见主题的文档。 

npm install react-quill --save
; }">
 import React , { useState } from 'react' ;
import ReactQuill from 'react-quill' ;
import 'react-quill/dist/quill.snow.css' ;

function MyComponent ( ) {
  const [ value , setValue ] = useState ( '' ) ;

  return < ReactQuill theme = "snow" value = { value } onChange = { setValue } /> ;
}

使用浏览器捆绑包

 < link
  rel =" stylesheet "
  href =" https://unpk*g*.*com/react-quill@1.3.3/dist/quill.snow.css "
/> 
 < script
  src =" https://unpkg.*co**m/react@16/umd/react.development.js "
  crossorigin
>  script >
< script
  src =" https://un*pkg.*c*om/react-dom@16/umd/react-dom.development.js "
  crossorigin
>  script >
< script src =" https://un*p*kg*.com/react-quill@1.3.3/dist/react-quill.js " >  script >
< script src =" https://unpk*g.c**om/babel-standalone@6/babel.min.js " >  script >
< script type =" text/babel " src =" /my-scripts.js " >  script >

用法

控制模式警告

在受控模式下，组件应该可以防止局部状态变化，而只能通过onchange和value进行。

由于Quill可以处理自己的更改，并且不允许预防编辑，因此ReactQuill必须在受控模式和不受控制的模式之间定居。它不能阻止更改，但是每当价值与当前状态不同时，仍然会覆盖内容。

如果您经常需要操纵DOM或迫切使用Quill API，则可以考虑切换到完全不受控制的模式。 ReactQuill将使用DefaultValue初始化编辑器，但此后不会尝试将其重置。 Onchange回调仍然可以按预期工作。

阅读有关React文档中不受控制的组件的更多信息。

使用三角洲

您可以将Quill Delta（而不是HTML字符串）传递为值和DefaultValue属性。与HTML字符串相比，增量具有许多优势，因此您可能需要使用它们。但是请注意，比较Deltas进行更改要比比较HTML字符串要昂贵，因此可能值得介绍您的使用模式。

请注意，将值从HTML字符串转换为三角洲（反之亦然），无论它们是否代表同一文档，都会触发更改，因此您可能需要遵守格式并在整个过程中继续使用它。

配x请勿将您从Onchange事件收到的Delta对象用作值。该对象不包含完整文档，而只包含最后一个修改，并且这样做很可能会触发无限循环，其中一遍又一遍地应用相同的更改。事件期间使用editor.getContents（）获得完整文档的三角洲。 ReactQuill将阻止您犯这样的错误，但是，如果您绝对确定这是您想要的，则可以再次通过New Delta（）将对象传递给它以不对。

主题

奎尔编辑器支持主题。它包括一个成熟的主题，称为Snow ，即Quill的标准外观，并且与Medium上的Inline Editor相似。至少，必须包括工具栏或工具提示的模块，必须包括核心主题。

要激活主题，请将主题的名称传递给主题道具。传递虚假值（例如null）以使用核心主题。 

 < ReactQuill theme = "snow" . . . / >

然后，导入要使用的主题的样式表。

这可能取决于应用程序的结构，目录或其他方式。例如，如果您使用CSS预处理器（例如Sass），则可能需要在自己的内部导入该样式。这些样式表可以在Quill分布中找到，但是为了方便起见，它们也可以在ReactQuill的Dist文件夹中链接。

这是使用用于WebPack的样式加载程序或Create-react-app的示例，该示例将自动注入页面上的样式： 

 import 'react-quill/dist/quill.snow.css' ;

该样式也可以通过CDN获得： 

 < link
  rel =" stylesheet "
  href =" https://unpk*g*.*com/react-quill@1.3.3/dist/quill.snow.css "
/>

自定义工具栏

默认工具栏元素

Quill工具栏模块API提供了一种使用一系列格式名称来配置默认工具栏图标的简便方法。

示例代码
); } } export default MyComponent;">
 class MyComponent extends Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = {
      text : "" ,
    }
  }

  modules = {
    toolbar : [
      [ { 'header' : [ 1 , 2 , false ] } ] ,
      [ 'bold' , 'italic' , 'underline' , 'strike' , 'blockquote' ] ,
      [ { 'list' : 'ordered' } , { 'list' : 'bullet' } , { 'indent' : '-1' } , { 'indent' : '+1' } ] ,
      [ 'link' , 'image' ] ,
      [ 'clean' ]
    ] ,
  } ,

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

  render ( ) {
    return (
      < div className = "text-editor" >
        < ReactQuill theme = "snow"
                    modules = { this . modules }
                    formats = { this . formats } >
         ReactQuill >
       div >
    ) ;
  }
}

export default MyComponent ;

HTML工具栏

您还可以提供自己的HTML/JSX工具栏，其中包含不属于Quill主题的自定义元素。

请参阅该示例在Codepen上实时：自定义工具栏示例

示例代码
; /* * Event handler to be attached using Quill toolbar module * http://qu*i*lljs.c*om/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 = () => (
); /* * 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 (
); } } /* * Quill modules to attach to editor * See http://qu*il*ljs.*com/docs/modules/ for complete options */ Editor.modules = { toolbar: { container: '#toolbar', handlers: { insertStar: insertStar, }, }, }; /* * Quill editor formats * See http://q*uil*ljs.co*m/docs/formats/ */ Editor.formats = [ 'header', 'font', 'size', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'link', 'image', 'color', ]; /* * PropType validation */ Editor.propTypes = { placeholder: React.PropTypes.string, }; /* * Render component on page */ ReactDOM.render( , document.querySelector('.app') );">
 /*
 * Custom "star" icon for the toolbar using an Octicon
 * https://octicons.gith***ub.io
 */
const CustomButton = ( ) => < span className = "octicon octicon-star" /> ;

/*
 * Event handler to be attached using Quill toolbar module
 * http://qu*i*lljs.c*om/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://qu*il*ljs.*com/docs/modules/ for complete options
 */
Editor . modules = {
  toolbar : {
    container : '#toolbar' ,
    handlers : {
      insertStar : insertStar ,
    } ,
  } ,
} ;

/*
 * Quill editor formats
 * See http://q*uil*ljs.co*m/docs/formats/
 */
Editor . formats = [
  'header' ,
  'font' ,
  'size' ,
  'bold' ,
  'italic' ,
  'underline' ,
  'strike' ,
  'blockquote' ,
  'list' ,
  'bullet' ,
  'indent' ,
  'link' ,
  'image' ,
  'color' ,
] ;

/*
 * PropType validation
 */
Editor . propTypes = {
  placeholder : React . PropTypes . string ,
} ;

/*
 * Render component on page
 */
ReactDOM . render (
  < Editor placeholder = { 'Write something or insert a star ★' } /> ,
  document . querySelector ( '.app' )
) ;

自定义格式

该组件具有两种类型的格式：

  1. 使用格式prop启用/禁用的默认羽毛笔格式。默认情况下启用所有格式。
  2. 使用羊皮纸创建并在您的组件的Quill实例上注册的自定义格式
示例代码
 import ReactQuill , { Quill } from 'react-quill' ; // ES6
const ReactQuill = require ( 'react-quill' ) ; // CommonJS 
 /*
 * Example Parchment format from
 * https://q*ui*ll*js.com/guides/cloning-medium-with-parchment/
 * See the video example in the guide for a complex format
 */
let Inline = Quill . import ( 'blots/inline' ) ;
class BoldBlot extends Inline { }
BoldBlot . blotName = 'bold' ;
BoldBlot . tagName = 'strong' ;
Quill . register ( 'formats/bold' , BoldBlot ) ;

const formats = [ 'bold' ] ; // add custom format name + any built-in formats you need

/*
 * Editor component with default and custom formats
 */
class MyComponent extends React . Component {
  constructor ( props ) {
    this . formats = formats ;
    this . state = { text : '' } ;
  }

  handleChange ( value ) {
    this . setState ( { text : value } ) ;
  }

  render ( ) {
    return (
      < ReactQuill
        value = { this . state . text }
        onChange = { this . handleChange }
        formats = { this . formats }
      />
    ) ;
  }
}

自定义编辑区

如果您实例化没有孩子的ReactQuill，它将为您创建一个

，以用作Quill的编辑区域。如果愿意，可以指定自己的元素以供reactquill使用。请注意，目前Quill不支持