lll-for-test v0.15.0

Rich Text Slate React Component

Introduction

rich-text-slate-rc provides an out-of-the-box rich text editor based on slate, and supports image uploading via uss-js-sdk.

We know that the slate editor provides powerful customization capabilities, and we can freely develop various plugins according to our own business needs, but if we repeatedly develop plugins in each project, it is a time-consuming thing.

So we wrap the rich-text-slate-rc component to support a series of operations, including：

• redo
• undo
• bold
• italic
• underline
• h1
• h2
• h3
• alignmentleft
• alignmentcenter
• alignmentright
• numbered-list
• bulleted-list
• strikethrough
• image uploader
• tableInsert Column,Remove Column,Insert Row,Remove Row,Remove Table

Installation

• install from npm

yarn config set registry https://npm.shopee.io
yarn add rich-text-slate-rc

Getting Started

1. Rich text editor

import { RichEditor, encodeSlateValueToString } from 'rich-text-slate-rc'
import { Form } from 'antd'

// USS config of your project
export const USS_CONFIG = {
  appId: 'xxx',
  appSecret: 'xxx',
  baseUrl: 'https://xxx',
  bucketName: 'xxx'
}

const Com = () => {
  const [form] = Form.useForm()

  const handleFinish = values => {
    const { richText } = values
    const richTextString = encodeSlateValueToString(richText)
  }

  return (
    <Form form={form} onFinish={handleFinish}>
      <Form.Item name='richText' label='Rich Text'>
        <RichEditor ussOptions={USS_CONFIG} />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Save
        </Button>
      </Form.Item>
    </Form>
  )
}

2. Display rich text

import { RichTextDisplay } from 'rich-text-slate-rc'

const Com = ({ value }) => {
  return <RichTextDisplay value={value} />
}

API

RichTextDisplay

Component for displaying rich text.

RichEditor

Component for editing rich text.

IUSSOptions

IHrisStaffsRespDataItems

Methods

• encodeSlateValueToString
• decodeStringToSlateValue
• getText
• getSlateMentions
• isEmptyValue
• serializeHtml
• deserializeHtml

encodeSlateValueToString Encode the slate value as a string to save to the database.

decodeStringToSlateValue Decode encoded string to slate value.

getText Get plain text from slate value.

getSlateMentions Sometimes you want to get all mention email list from slate value to notify BE to send an email to the users.This function will return a list of email list.

isEmptyValue To check if slate value is empty.

serializeHtml Serialize slate value to html string.

deserializeHtml Deserialize html element to slate value.

Related Docs

• USS API 文档