re editor

re-editor ·

A React rich text editor out of the box

• How to use
  • Out of the box - Provide antd style toolbar
  • Custom - only introduces the editor core, customizes the toolbar
• FAQ
• Supported features

Features

• Out of the box, no configuration required
• Customized, you can develop toolbars of any style and form by yourself [API completion]
• Support element function settings, such as changing image size
• Support markdown syntax
• See more

How to use

To adapt to different development needs, the editor provides the following two usage methods.

Use out of the box

re-editor is an encapsulated component that can be used after installation. It contains @re-editor/core and @re-editor/toolbar-antd. The toolbar uses the antd style by default. If you want to use other toolbars, please refer to the following custom document

Installation dependencies

$ npm install re-editor

Introduce styles

Introduced in js

 import 're-editor/lib/styles/index.css'

It can also be introduced in CSS (requires CSS preprocessing support)

 @import 're-editor/lib/styles/index.css'

Props

property	illustrate	type
value	Editor's value	object
onChange	Callback for editor changes content	(value: Value) => void
placeholder	Placeholder text	string
readOnly	Read-only mode	boolean
onImageUpload	Custom picture bed	(file: File) => Promise<url: string>
tools	Set the display content of the toolbar	Array<Array

Set the toolbar to display content

tools props support array form, if it is a two-dimensional array, it will be displayed in groups

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

name	Function
bold	Bold
Italic	Italic
underline	Underline
Strikethrough	Delete line
orderedlist	Ordered list
unorderedlist	Unordered list
Heading	title
align	Alignment
image	picture
table	sheet
code	Code
undo	Revoke
redo	Rework
fullscreen	full screen

Customize

The editor is split into two parts, the content editing area and the toolbar. The following describes how to customize the toolbar

Install the Editor Core

$ npm install @re-editor/core

Create a toolbar

You can create an editor toolbar in any way. You need to pass the editor instance to the toolbar. You can refer to the implementation of re-editor and @re-editor/toolbar-antd to view the API documentation for details (this part of the document has not been written yet, will it be completed in the near future?)

For example, implement a bold function:

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

Introduction to packages

• re-editor: an encapsulated editor with toolbar
• @re-editor/core: Editor Core
• @re-editor/toolbar-antd: Toolbar based on antd, default
• @re-editor/examples: Demo project

FAQ

What is the difference between comparison with slate or draft-js?

Slate or draft is not a pure editor, they are more like a framework for building editors. Re-editor is developed based on Slate, so you don't have to pay attention to the process of构建编辑器.

How to modify the style

The style is divided into two parts, node (bold, h1, h2, etc.) and the toolbar. They can all rewrite the basic style through css, and the toolbar can also completely rewrite the style through css.

What should I do if the amount of data saved is too large each time?

Using incremental update, the value of the onChange callback is in the immutable format. You can use immutable-js-diff and other methods to obtain the content of diff for incremental update

How to specify an upload image server

The image is saved as base64 by default. If you need to upload the image to the specified server, you can use the onImageUpload function, (file: File) => Promise<url: string> Sample code

Function

Text decoration

粗体斜体下划线删除线下标

List

有序列表无序列表

Alignment

左对齐右对齐居中对齐两端对齐

title

h1 h2 h3 h4 h5 h6

other

• 图片
  • Set the size
  • Copy from the clipboard
  • Supports custom uploading of pictures server addresses
• 表格
  • Add rows
  • Add columns
  • Delete rows
  • Delete columns
• 代码高亮
  • js
  • css
  • html
• markdown
  • h1-h6: #
  • Quote: >
  • Ordered list: -
  • Unordered list: 1.
• Full screen editing

Other functions continue to increase...