A rich text editor based on Darft-JS for the React framework, compatible with mainstream modern browsers.

The online demo

Feet: margox. Making. IO/braft – edito…

The installation

#Installation using YARN
yarn add braft-editor
#Install using NPM
npm install braft-editor --saveCopy the code

Use the sample

import React from 'react'
import ReactDOM from 'react-dom'

//Introduce the editor and editor styles
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'

class Demo extends React.Component {

  state = {
    content: null
  }

  render () {

    const editorProps = {
      height: 500,
      initialContent: this.state.content,
      onChange: this.handleChange,
      onHTMLChange: this.handleHTMLChange
    }

    return (
      <div className="demo">
        <BraftEditor {.editorProps}/>
      </div>)}handleChange = (content) = > {
    console.log(content)
  }

  handleHTMLChange = (html) = > {
    console.log(html)
  }

}Copy the code

contentFormat [string: raw | html]

Used to specify the content formats of initialContent and onChange. Raw means using editor raw data as input and output types, and HTML means using HTML strings as input and output types. The default is RAW.

To keep the content editable, it is strongly recommended to use the RAW format and get the content in HTML format through onHTMLChange

onChange [function(html|raw)]

Specifies the callback when the editor content changes

onHTMLChange [function(html)]

Specifies the callback to editor content when it changes, as HTML editor content

addonControls [array:[object]]

Specifies a custom control component that currently supports only splitter lines and buttons. Example:

[
  {
    type: 'split'
  },
  {
    type: 'button',
    text: 'Hello',
    className: 'preview-button'.onClick:(a)= > console.log('Hello World!')}]Copy the code

language [string]

Specifies the language of the editor. Currently zh and en are supported. Zh is the default

viewWrapper [string]

Specifies the selector string for the editor’s wrapper container (e.g. ‘#wrapper’, ‘.container’) for position adaptation of components such as drop-down menus. The default is body

fontSizes [array:[number]]

Specifies a list of sizes available to the editor to set the size of text content. The default size is:

[
  12.14.16.18.20.24.28.30.32.36.40.48.56.64.72.96.120.144
]Copy the code

media [object]

Configure the editor’s multimedia insertion function:

{
  image: true.//The image insertion function is enabled
  video: false.//The video insertion function is enabled
  audio: true.//The audio insertion function is enabled
  uploadFn: null //Instructions are given below
}Copy the code

media.uploadFn:param [object]

When the editor calls this function, it passes in an object containing the body of the file, the progress callback, the success callback, and the failure callback:

{
  file: [File Object].progress: function (progress) {
    //Progress is 0 to 100
  },
  success: function (res) {
    //Res must be an object containing the URL property of the uploaded file:
  },
  error: function (err) {}}Copy the code

UploadFn example:

const uploadFn = (param) = > {

  const serverURL = 'http://upload-server'
  const xhr = new XMLHttpRequest
  const fd = new FormData(a)const successFn = (response) = > {
    //Assume that the server directly returns the address after the file is uploaded
    //Call param.success and pass in the uploaded file address
    param.success({
      url: xhr.responseText})}const progressFn = (event) = > {
    //Param.progress is called when the upload progress changes
    param.progress(event.loaded / event.total * 100)}const errorFn = (response) = > {
    //Param.error is called when an upload error occurs
    param.error({
      msg: 'unable to upload.'})}xhr.upload.addEventListener("progress", progressFn, false)
  xhr.addEventListener("load", successFn, false)
  xhr.addEventListener("error", errorFn, false)
  xhr.addEventListener("abort", errorFn, false)

  fd.append('file'.param.file)
  xhr.open('POST', serverURL, true)
  xhr.send(fd)

}Copy the code

Known issues

  1. Placeholder text doesn’t disappear. Placeholder text disappears when you input arbitrary text