หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ตอบโต้ขนนก

ส่วนประกอบ Quill สำหรับ React

ดูการสาธิตสดหรือ Codepen

  • เริ่มต้นอย่างรวดเร็ว
    • ด้วย webpack หรือ create-react-app
    • ด้วยชุดเบราว์เซอร์
  • การใช้งาน
    • คำเตือนโหมดควบคุม
    • การใช้เดลต้า
    • ธีมส์
    • แถบเครื่องมือแบบกำหนดเอง
      • องค์ประกอบแถบเครื่องมือเริ่มต้น
      • แถบเครื่องมือ HTML
    • รูปแบบที่กำหนดเอง
    • พื้นที่แก้ไขแบบกำหนดเอง
  • อัปเกรดเป็น ReactQuill v2.1
    • อุปกรณ์ประกอบฉากที่เลิกใช้แล้ว
    • ReactQuill มิกซ์อิน
    • ส่วนประกอบแถบเครื่องมือ
  • การอ้างอิง API
    • การส่งออก
    • อุปกรณ์ประกอบฉาก
    • วิธีการ
    • บรรณาธิการที่ไม่มีสิทธิพิเศษ
  • การสร้างและการทดสอบ
  • รองรับเบราว์เซอร์
  • บันทึกการเปลี่ยนแปลง
  • ผู้ร่วมให้ข้อมูล
  • ใบอนุญาต

นี่คือเอกสารประกอบสำหรับ ReactQuill v2 — รุ่นก่อนหน้า: v1

- ReactQuill เวอร์ชัน 2.1

ReactQuill 2 มาแล้วที่รัก! และนำพอร์ตเต็มรูปแบบมาสู่ TypeScript และ React 16+ ระบบการสร้างที่ปรับโครงสร้างใหม่ และตรรกะภายในโดยทั่วไปที่กระชับขึ้น

เราทำงานอย่างหนักเพื่อหลีกเลี่ยงการเปลี่ยนแปลงพฤติกรรมใดๆ สำหรับกรณีส่วนใหญ่ ไม่จำเป็นต้องย้ายข้อมูลเลย อย่างไรก็ตาม การสนับสนุนอุปกรณ์ประกอบฉากที่เลิกใช้มานานแล้ว ReactQuill Mixin และส่วนประกอบ Toolbar ได้ถูกนำออกไปแล้ว อย่าลืมอ่านคู่มือการย้ายข้อมูล

เราคาดว่ารุ่นนี้จะเป็นการอัปเกรดแบบดรอปอิน หากไม่เป็นเช่นนั้น โปรดแจ้งปัญหาโดยใช้ป้ายกำกับ v2

เริ่มต้นอย่างรวดเร็ว

ด้วย webpack หรือ create-react-app

ตรวจสอบให้แน่ใจว่าคุณมี react และ react-dom และวิธีการโหลดสไตล์ เช่น style-loader ดูเอกสารประกอบเกี่ยวกับธีมสำหรับข้อมูลเพิ่มเติม 

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://unpkg.com/[email protected]/dist/quill.snow.css "
/>
 < script
  src =" https://unpkg.com/react@16/umd/react.development.js "
  crossorigin
> </ script >
< script
  src =" https://unpkg.com/react-dom@16/umd/react-dom.development.js "
  crossorigin
> </ script >
< script src =" https://unpkg.com/[email protected]/dist/react-quill.js " > </ script >
< script src =" https://unpkg.com/babel-standalone@6/babel.min.js " > </ script >
< script type =" text/babel " src =" /my-scripts.js " > </ script >

การใช้งาน

คำเตือนโหมดควบคุม

ในโหมดควบคุม ส่วนประกอบควรป้องกันการเปลี่ยนแปลงสถานะในเครื่อง และให้เกิดขึ้นผ่าน onChange และ value เท่านั้น

เนื่องจาก Quill จัดการการเปลี่ยนแปลงของตัวเอง และไม่อนุญาตให้มีการป้องกันการแก้ไข ReactQuill จึงต้องชำระสำหรับไฮบริดระหว่างโหมดควบคุมและโหมดที่ไม่มีการควบคุม ไม่สามารถป้องกันการเปลี่ยนแปลงได้ แต่จะยังคงแทนที่เนื้อหาเมื่อใดก็ตามที่ value แตกต่างจากสถานะปัจจุบัน

หากคุณจำเป็นต้องจัดการ DOM หรือใช้ Quill API บ่อยครั้งโดยไม่จำเป็น คุณอาจพิจารณาเปลี่ยนไปใช้โหมดที่ไม่มีการควบคุมโดยสมบูรณ์ ReactQuill จะเริ่มต้นโปรแกรมแก้ไขโดยใช้ defaultValue แต่จะไม่พยายามรีเซ็ตหลังจากนั้น การโทรกลับ onChange จะยังคงทำงานตามที่คาดไว้

อ่านเพิ่มเติมเกี่ยวกับส่วนประกอบที่ไม่สามารถควบคุมได้ในเอกสาร React

การใช้เดลต้า

คุณสามารถส่ง Quill Delta แทนสตริง HTML เป็น value และคุณสมบัติ defaultValue เดลต้ามีข้อดีมากกว่าสตริง HTML หลายประการ ดังนั้นคุณอาจต้องการใช้เดลต้าแทน อย่างไรก็ตาม โปรดทราบว่าการเปรียบเทียบเดลต้าสำหรับการเปลี่ยนแปลงนั้นมีราคาแพงกว่าการเปรียบเทียบสตริง HTML ดังนั้นจึงอาจคุ้มค่าที่จะจัดทำโปรไฟล์รูปแบบการใช้งานของคุณ

โปรดทราบว่าการเปลี่ยน value จากสตริง HTML เป็นเดลต้าหรือกลับกัน จะทำให้เกิดการเปลี่ยนแปลง ไม่ว่าค่าเหล่านั้นจะแสดงเป็นเอกสารเดียวกันหรือไม่ ดังนั้นคุณอาจต้องการคงรูปแบบไว้และใช้รูปแบบนั้นอย่างต่อเนื่องตลอด

อย่าใช้วัตถุ delta ที่คุณได้รับจากเหตุการณ์ onChange เป็น value ออบเจ็กต์นี้ไม่มีเอกสารฉบับเต็ม แต่มีเพียงการแก้ไขครั้งล่าสุดเท่านั้น และการทำเช่นนี้มีแนวโน้มที่จะกระตุ้นให้เกิดวงวนที่ไม่สิ้นสุดซึ่งมีการใช้การเปลี่ยนแปลงเดียวกันซ้ำแล้วซ้ำเล่า ใช้ editor.getContents() ในระหว่างกิจกรรมเพื่อรับเดลต้าของเอกสารฉบับเต็มแทน ReactQuill จะป้องกันไม่ให้คุณทำผิดพลาด อย่างไรก็ตาม หากคุณมั่นใจอย่างยิ่งว่านี่คือสิ่งที่คุณต้องการ คุณสามารถส่งวัตถุผ่าน new Delta() อีกครั้งเพื่อกำจัดสิ่งปนเปื้อน

ธีมส์

เครื่องมือแก้ไข Quill รองรับธีม ประกอบด้วยธีมเต็มรูปแบบที่เรียกว่า สโนว์ ซึ่งเป็นรูปลักษณ์มาตรฐานของ Quill และธีม บับเบิล ที่คล้ายกับโปรแกรมแก้ไขอินไลน์บนสื่อ อย่างน้อยที่สุด จะต้องรวมธีม หลัก เพื่อให้โมดูล เช่น แถบเครื่องมือหรือคำแนะนำเครื่องมือทำงานได้

หากต้องการเปิดใช้งานธีม ให้ส่งชื่อของธีมไปที่พร็อพ theme ส่งค่าเท็จ (เช่น null ) เพื่อใช้ธีมหลัก 

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

จากนั้น นำเข้าสไตล์ชีตสำหรับธีมที่คุณต้องการใช้

สิ่งนี้อาจแตกต่างกันไปขึ้นอยู่กับว่าแอปพลิเคชันมีโครงสร้างอย่างไร ไดเร็กทอรีหรืออย่างอื่น ตัวอย่างเช่น หากคุณใช้ตัวประมวลผลล่วงหน้า CSS เช่น SASS คุณอาจต้องการนำเข้าสไตล์ชีตนั้นภายในของคุณเอง สไตล์ชีทเหล่านี้สามารถพบได้ในการแจกจ่าย Quill แต่เพื่อความสะดวกพวกเขายังเชื่อมโยงในโฟลเดอร์ dist ของ ReactQuill

นี่คือตัวอย่างการใช้ style-loader สำหรับ Webpack หรือ create-react-app ที่จะแทรกสไตล์บนเพจโดยอัตโนมัติ: 

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

สไตล์ยังมีให้บริการผ่าน CDN: 

 < link
  rel =" stylesheet "
  href =" https://unpkg.com/[email protected]/dist/quill.snow.css "
/>

แถบเครื่องมือแบบกำหนดเอง

องค์ประกอบแถบเครื่องมือเริ่มต้น

Quill Toolbar Module API มอบวิธีง่ายๆ ในการกำหนดค่าไอคอนแถบเครื่องมือเริ่มต้นโดยใช้ชื่อรูปแบบอาร์เรย์

รหัสตัวอย่าง 
 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: ตัวอย่างแถบเครื่องมือแบบกำหนดเอง

รหัสตัวอย่าง 
 /*
 * 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' ,
] ;

/*
 * 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' )
) ;

รูปแบบที่กำหนดเอง

คอมโพเนนต์มีรูปแบบ 2 ประเภท:

  1. รูปแบบปากกาขนนกเริ่มต้นที่เปิด/ปิดใช้งานโดยใช้ formats prop รูปแบบทั้งหมดจะถูกเปิดใช้งานตามค่าเริ่มต้น
  2. รูปแบบที่กำหนดเองที่สร้างขึ้นโดยใช้ Parchment และลงทะเบียนกับอินสแตนซ์ Quill ของส่วนประกอบของคุณ
รหัสตัวอย่าง 
 import ReactQuill , { Quill } from 'react-quill' ; // ES6
const ReactQuill = require ( 'react-quill' ) ; // CommonJS 
 /*
 * Example Parchment format from
 * https://quilljs.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 โดยไม่มีลูก มันจะสร้าง <div> ให้คุณ เพื่อใช้เป็นพื้นที่แก้ไขสำหรับ Quill หากต้องการ คุณสามารถระบุองค์ประกอบของคุณเองเพื่อให้ ReactQuill ใช้งานได้ โปรดทราบว่า Quill ยังไม่รองรับ <textarea> ในขณะนี้

หมายเหตุ: พื้นที่การแก้ไขแบบกำหนดเองจะสูญเสียโฟกัสเมื่อใช้ React 16 เป็น peer depe ในขณะนี้ (ข้อบกพร่อง) 

 class MyComponent extends React . Component {

  render ( ) {
    return (
      < ReactQuill >
        < div className = "my-editing-area" / >
      < / ReactQuill >
    ) ;
  }

} ) ;

อัปเกรดเป็น ReactQuill v2.1

การอัปเกรดเป็น ReactQuill v2 ควรทำได้ง่ายเหมือนกับการอัปเดตการพึ่งพาของคุณ อย่างไรก็ตาม มันยังลบการสนับสนุนสำหรับอุปกรณ์ประกอบฉากที่เลิกใช้งานมานานแล้ว ReactQuill Mixin และส่วนประกอบ Toolbar

อุปกรณ์ประกอบฉากที่เลิกใช้แล้ว

การสนับสนุนแถบ toolbar , styles , ตัวเลือก pollInterval Quill ถูกปิดใช้งานมานานแล้ว ตั้งแต่การเปิดตัวครั้งนี้ ReactQuill จะไม่เตือนคุณอีกต่อไปหากคุณลองใช้มัน

ReactQuill มิกซ์อิน

ReactQuill Mixin อนุญาตให้แทรกฟังก์ชันหลักที่ทำให้ ReactQuill ทำเครื่องหมายลงในส่วนประกอบของคุณเอง และสร้างเวอร์ชันที่ปรับแต่งอย่างลึกซึ้ง

Mixin ถือเป็นรูปแบบการต่อต้านมาเป็นเวลานานแล้ว ดังนั้นเราจึงได้ตัดสินใจที่จะสรุปการเลิกใช้งาน

ไม่มีเส้นทางการอัพเกรด หากคุณมีกรณีการใช้งานที่อาศัย Mixin ขอแนะนำให้คุณเปิดปัญหาและเราจะพยายามมอบฟีเจอร์ใหม่ให้กับคุณเพื่อให้เป็นไปได้ หรือการสนับสนุนเฉพาะเพื่อย้ายออกจากปัญหาดังกล่าว

ส่วนประกอบแถบเครื่องมือ

Quill ได้ให้การสนับสนุนแถบเครื่องมือแบบกำหนดเองในตัวมานานแล้ว ซึ่งมาแทนที่ส่วนประกอบแถบเครื่องมือของ ReactQuill (ค่อนข้างไม่ยืดหยุ่น)

ใช้โมดูลแถบเครื่องมือหรือคุณลักษณะแถบเครื่องมือ HTML แทน

การอ้างอิง API

การส่งออก 

 // ES6
import ReactQuill , { Quill } from 'react-quill' ;

// CommonJS
const ReactQuill = require ( 'react-quill' ) ;
const { Quill } = ReactQuill ;

Quill : เนมสเปซ Quill ที่คุณสามารถเรียก register

อุปกรณ์ประกอบฉาก

id : ID ที่จะใช้กับองค์ประกอบ DOM

className : คลาสที่จะใช้กับองค์ประกอบ DOM

value : ค่าสำหรับเอดิเตอร์ในฐานะส่วนประกอบที่ได้รับการควบคุม อาจเป็นสตริงที่มี HTML, อินสแตนซ์ Quill Delta หรือวัตถุธรรมดาที่แสดงถึง Delta โปรดทราบว่าเนื่องจากข้อจำกัดใน Quill จริงๆ แล้วโหมดนี้จึงเป็นโหมด กึ่งควบคุม ซึ่งหมายความว่าการแก้ไขจะไม่ถูกป้องกัน แต่ value ที่เปลี่ยนแปลงจะยังคงแทนที่เนื้อหา โปรดทราบว่าการส่ง Quill Delta ที่นี่ จากนั้นสตริง HTML หรือในทางกลับกัน จะทำให้เกิดการเปลี่ยนแปลงเสมอ ไม่ว่าสิ่งเหล่านั้นจะแสดงเป็นเอกสารเดียวกันหรือไม่ก็ตาม อย่าส่งวัตถุ delta จากเหตุการณ์ onChange เป็น value เนื่องจากจะทำให้เกิดการวนซ้ำ ดูการใช้เดลต้าสำหรับรายละเอียด

defaultValue : ค่าเริ่มต้นสำหรับเอดิเตอร์ในฐานะส่วนประกอบที่ไม่สามารถควบคุมได้ อาจเป็นสตริงที่มี HTML, Quill Delta หรือวัตถุธรรมดาที่แสดงถึง Delta

readOnly : หากเป็นจริง ตัวแก้ไขจะไม่อนุญาตให้เปลี่ยนแปลงเนื้อหา ล้อม API disable Quill

placeholder : ค่าเริ่มต้นสำหรับตัวแก้ไขว่าง หมายเหตุ: Quill API ไม่รองรับการเปลี่ยนแปลงค่านี้แบบไดนามิก ใช้การอ้างอิงและแอตทริบิวต์ข้อมูลแทน (ดู #340)

modules : วัตถุที่ระบุโมดูลที่เปิดใช้งานและการกำหนดค่า แถบเครื่องมือตัวแก้ไขเป็นโมดูลที่ปรับแต่งโดยทั่วไป ดูส่วนโมดูลในเอกสาร Quill สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโมดูลที่พร้อมใช้งาน

formats : อาร์เรย์ของรูปแบบที่จะเปิดใช้งานระหว่างการแก้ไข รูปแบบที่นำไปใช้ทั้งหมดจะถูกเปิดใช้งานตามค่าเริ่มต้น ดูรูปแบบสำหรับรายการ ไม่ควรรวมรูปแบบที่กำหนดเองไว้ในอาร์เรย์ตั้งแต่เวอร์ชัน 1.0.0 แต่ควรสร้างผ่าน Parchment และลงทะเบียนกับการส่งออก Quill ของโมดูลแทน

style : ออบเจ็กต์ที่มีกฎ CSS แบบกำหนดเองเพื่อนำไปใช้กับคอนเทนเนอร์ของตัวแก้ไข กฎควรอยู่ในรูปแบบการตั้งชื่อ "camelCased" ของ React

theme : ชื่อของธีมที่จะใช้กับเอดิเตอร์ ค่าเริ่มต้นคือ snow ธีมมาตรฐานของ Quill ผ่าน null เพื่อใช้ธีมหลักขั้นต่ำ ดูเอกสารเกี่ยวกับธีมสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการรวมสไตล์ชีตที่จำเป็น

tabIndex : ลำดับที่เอดิเตอร์โฟกัส ท่ามกลางการควบคุมอื่นๆ ในเพจ ระหว่างการนำทางด้วยแป้นพิมพ์

bounds : ตัวเลือกหรือองค์ประกอบ DOM ที่ใช้โดย Quill เพื่อจำกัดตำแหน่งของป๊อปอัป ค่าเริ่มต้นเป็น document.body

children : องค์ประกอบ React เดียวที่จะใช้เป็นพื้นที่แก้ไขสำหรับ Quill แทนที่ค่าเริ่มต้นซึ่งก็คือ <div> โปรดทราบว่าคุณไม่สามารถใช้ <textarea> ได้ เนื่องจากไม่รองรับเป้าหมาย โปรดทราบว่าการอัปเดตลูกมีค่าใช้จ่ายสูง เนื่องจากจะทำให้โปรแกรมแก้ไข Quill ถูกสร้างขึ้นใหม่ ตั้ง value prop หากคุณต้องการควบคุมเนื้อหา html ของเอดิเตอร์

onChange(content, delta, source, editor) : ถูกเรียกกลับพร้อมกับเนื้อหาใหม่ของเอดิเตอร์หลังการเปลี่ยนแปลง โดยจะถูกส่งผ่านเนื้อหา HTML ของตัวแก้ไข วัตถุเดลต้าที่แสดงการเปลี่ยนแปลง แหล่งที่มาของการเปลี่ยนแปลง และสุดท้ายคือพร็อกซีแบบอ่านอย่างเดียวไปยังผู้เข้าถึงตัวแก้ไข เช่น getHTML() อย่าใช้วัตถุ delta นี้เป็น value เนื่องจากจะทำให้เกิดการวนซ้ำ ใช้ editor.getContents() แทน ดูการใช้เดลต้าสำหรับรายละเอียด

onChangeSelection(range, source, editor) : ถูกเรียกกลับด้วยช่วงที่เลือกใหม่ หรือเป็นค่าว่างเมื่อไม่ได้โฟกัส โดยจะถูกส่งผ่านช่วงการเลือก แหล่งที่มาของการเปลี่ยนแปลง และสุดท้ายคือพร็อกซีแบบอ่านอย่างเดียวไปยังผู้เข้าถึงตัวแก้ไข เช่น getBounds()

onFocus(range, source, editor) : ถูกเรียกเมื่อเอดิเตอร์โฟกัส ก็จะได้รับช่วงการเลือกใหม่

onBlur(previousRange, source, editor) : ถูกเรียกเมื่อตัวแก้ไขสูญเสียโฟกัส กล้องจะได้รับช่วงการเลือกที่มีอยู่ก่อนจะสูญเสียโฟกัส

onKeyPress(event) : ถูกเรียกหลังจากกดและปล่อยคีย์แล้ว : โปรดทราบว่าจะไม่มีการเรียกคีย์พิเศษ เช่น shift หรือ Enter เช่นเดียวกับเวอร์ชันดั้งเดิม หากคุณต้องการสิ่งเหล่านั้น ให้เชื่อมต่อ onKeyDown หรือ onKeyUp

onKeyDown(event) : ถูกเรียกหลังจากกดปุ่มแล้ว แต่ก่อนที่จะปล่อย : โปรดทราบว่าเนื่องจากวิธีการทำงานของ Quill จึงเป็นไปได้ที่คุณจะไม่ได้รับเหตุการณ์สำหรับคีย์ เช่น enter , Backspace หรือ Delete หากเป็นเช่นนั้น ให้ลองเชื่อมต่อกับ onKeyUp แทน

onKeyUp(event) : ถูกเรียกหลังจากปล่อยคีย์แล้ว

preserveWhitespace : หากเป็นจริง แท็ก pre จะถูกใช้สำหรับพื้นที่เอดิเตอร์แทนแท็ก div เริ่มต้น วิธีนี้จะป้องกันไม่ให้ Quill ยุบช่องว่างต่อเนื่องเมื่อวาง ปัญหาที่เกี่ยวข้อง

วิธีการ

หากคุณมีการอ้างอิงถึงโหนด ReactQuill คุณจะสามารถเรียกใช้วิธีการต่อไปนี้:

focus() : เน้นตัวแก้ไข

blur() : ลบโฟกัสออกจากตัวแก้ไข

getEditor() : ส่งคืนอินสแตนซ์ Quill ที่สนับสนุนตัวแก้ไข แม้ว่าคุณจะสามารถใช้สิ่งนี้เพื่อเข้าถึงวิธีการต่าง ๆ เช่น getText() ได้อย่างอิสระ แต่โปรดหลีกเลี่ยงการจัดการกับอินสแตนซ์โดยไม่จำเป็น เพื่อหลีกเลี่ยงไม่ให้ ReactQuill และ Quill ไม่ซิงค์กัน มีโปรแกรมแก้ไขที่ไม่มีสิทธิพิเศษที่ปลอดภัยกว่ามากมาทดแทน

ตัวอย่าง

ดูตัวอย่างนี้ใน Codepen 

 class Editor extends React . Component {
  constructor ( props ) {
    super ( props ) ;
    this . quillRef = null ; // Quill instance
    this . reactQuillRef = null ; // ReactQuill component
  }

  componentDidMount ( ) {
    this . attachQuillRefs ( ) ;
  }

  componentDidUpdate ( ) {
    this . attachQuillRefs ( ) ;
  }

  attachQuillRefs = ( ) => {
    if ( typeof this . reactQuillRef . getEditor !== 'function' ) return ;
    this . quillRef = this . reactQuillRef . getEditor ( ) ;
  } ;

  insertText = ( ) => {
    var range = this . quillRef . getSelection ( ) ;
    let position = range ? range . index : 0 ;
    this . quillRef . insertText ( position , 'Hello, World! ' ) ;
  } ;

  render ( ) {
    return (
      < div >
        < ReactQuill
          ref = { ( el ) => {
            this . reactQuillRef = el ;
          } }
          theme = { 'snow' }
        / >
        < button onClick = { this . insertText } > Insert Text < / button >
      < / div >
    ) ;
  }
}

makeUnprivilegedEditor : สร้างโปรแกรมแก้ไขที่ไม่มีสิทธิ์ ส่งเมธอดนี้เพื่ออ้างอิงไปยังอินสแตนซ์ Quill จาก getEditor โดยปกติคุณไม่จำเป็นต้องใช้เมธอดนี้ เนื่องจากเอดิเตอร์ที่เปิดเผยต่อตัวจัดการเหตุการณ์นั้นไม่มีสิทธิพิเศษอยู่แล้ว

ตัวอย่าง 
 const editor = this . reactQuillRef . getEditor ( ) ;
const unprivilegedEditor = this . reactQuillRef . makeUnprivilegedEditor ( editor ) ;
// You may now use the unprivilegedEditor proxy methods
unprivilegedEditor . getText ( ) ;

บรรณาธิการที่ไม่มีสิทธิพิเศษ

ในระหว่างกิจกรรม ReactQuill จะทำให้ชุดย่อยแบบจำกัดของ Quill API พร้อมใช้งานเป็นอาร์กิวเมนต์ editor วิธีนี้จะป้องกันการเข้าถึงวิธีการทำลายล้าง ซึ่งอาจทำให้ ReactQuill ไม่ซิงค์กับส่วนประกอบ มันมีวิธีการดังต่อไปนี้ ซึ่งส่วนใหญ่เป็นพรอกซีของวิธีการ Quill ที่มีอยู่:

getLength() : ส่งคืนค่าความยาวของเนื้อหาเอดิเตอร์ เป็นอักขระ ไม่ใช่ inc

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด