react quill

 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 ; 

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

 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 }
      />
    ) ;
  }
}

 class MyComponent extends React . Component {

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

} ) ; 

在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 >
    ) ;
  }
}

 const editor = this . reactQuillRef . getEditor ( ) ;
const unprivilegedEditor = this . reactQuillRef . makeUnprivilegedEditor ( editor ) ;
// You may now use the unprivilegedEditor proxy methods
unprivilegedEditor . getText ( ) ;