Zeort-slate-editor NPM

slate-editor

Usage

import RichTextEditor from "@zhiyou/slate-editor";
import { useState } from "react";

const App = () {
    const [text] = useState([
        type: "paragraph",
        textAlign: "left",
        lineHeight: "1.25",
        children: [
          {
            text: "A line of text in a paragraph.",
            fontName: "Arial",
            fontSize: "16px",
            fontColor: "#000000",
          }
        ]
    ])

    return <RichTextEditor initialValue={text} />
};

export default App;

API

参数	说明	类型
readonly	是否为只读属性	boolean
placeholder	没有值时默认填充的文本	string
initialValue	初始文本内容	any[]
linkToolZIndex	链接弹框的 z-index	number
hoverLinkToolBar	修改/删除链接时的弹框	ReactNode
extraComponent	额外扩展组件	ExtraComponentType[]
onCompactState	当选中内容的 state 发生变化时，调用此函数	function (state: Record<string, StateType>)
onChange	当编辑器发生变化时，调用此函数	function (value: Descendant[])
onKeyDown	当编辑器按下键盘时，调用此函数	function (event: React.KeyboardEvent)

Ref

名称	说明
editor	对象存储 Slate 编辑器的所有状态，拿到这个才可以对编辑器内容进行修改操作
getInnerHTML	获取编辑器生成的 HTML 代码

1. Utils

组件提供的一些可供使用的函数

import RichTextEditor, { SlateEditor, utils } from "@zhiyou/slate-editor";
import { useRef } from "react";

const App = () {
    const richTextRef = useRef<SlateEditor.EditorRefProps>(null)

    const onBtnClick = () => {
        if (!richTextRef.current) return
        const { editor } = richTextRef.current

        utils.updateEditor(editor, [
            {
                type: 'paragraph',
                textAlign: 'left',
                lineHeight: '1.25',
                children: [{ text: 'A line of text in a paragraph.' }]
            }
        ])
    }

     return (<div>
       <RichTextEditor ref={richTextRef} />
       <button onClick={onBtnClick}></button>
     </div>)
};

export default App;

名称	说明	类型
alignmentMap	对齐方式的映射	Record<string, TextAlignType>
withExtraEditor	扩展组件在 Editor 中设置类型规则	function(editor: Editor): Editor
isBooleanMarkType	是否 mark 为 boolean 类型的 mark	function(type: any): boolean
isStringMarkType	是否 mark 为 string 类型的 mark	function(type: any): boolean
isAlignType	是否为对齐方式的类型	function(type: any): boolean
focusSelectAll	编辑器全选	function(editor: Editor): void
resetFocusRange	重新设置焦点	function(editor: Editor): void
updateEditor	更新富文本编辑器	function(editor: Editor, value: any[]): void
EditorCommand	编辑器操作命令	EditorCommandType

EditorCommand （编辑器操作命令）

集成了所有操作命令，包含状态获取，插入，删除，更新

import RichTextEditor, { utils } from "@zhiyou/slate-editor";
...
//ref 获取省略（参考上边代码）
const { editor } = richTextRef.current
const { EditorCommand } = utils
const command = new EditorCommand(editor)

// 状态
const linkState = command.state('link')
console.log(linkState)
// 插入
command.insert('link', {url: 'http://www.xxx.com'})
// 修改
command.update('link', {url: 'http://www.yyy.com'})
// 删除链接
command.remove('link')
...

基本组件：

BlockQuote(缩进)

state(editor: Editor): { blockQuote: StateType }

insert(editor: Editor): void

update(editor: Editor): void

remove(editor: Editor): void

BulletedList(无序列表)

state(editor: Editor): { unOrderedList: StateType }

insert(editor: Editor): void

remove(editor: Editor): void

NumberedList(有序列表)

state(editor: Editor): { orderedList: StateType }

insert(editor: Editor): void

remove(editor: Editor): void

Divider(分割线)

state(editor: Editor): { divider: StateType }

insert(editor: Editor, props: { color: string }): void

update(editor: Editor, props: { color: string }): void

ItemList(list 列表 \)

update(editor: Editor, props: { textAlign?: string, lineHeight?: string | number, fontSize?: string, fontColor?: string, fontName?: string, bold?: boolean, italic?: boolean }, options?: any): void

Leaf(文本节点)

state(editor: Editor): { bold: StateType, italic: StateType, underline: StateType, strikethrough: StateType, fontName: StateType, fontColor: StateType, fontSize: StateType }

insert(editor: Editor, props: { bold?: boolean, italic?: boolean, underline?: boolean, strikethrough?: boolean }): void

update(editor: Editor, props: { fontName?: string, fontColor?: string, fontSize?: string }): void

//特殊 清空所有格式 props: { all: true }
remove(editor: Editor, props: { bold?: boolean, italic?: boolean, underline?: boolean, strikethrough?: boolean, all: boolean }): void

Link(链接)

state(editor: Editor): { link: StateType }

insert(editor: Editor, props: { url: string, fontColor?: string }): void

update(editor: Editor, props: { url: string }): void

remove(editor: Editor): void

Paragraph(段落)

state(editor: Editor): { lineHeight: StateType, justifyCenter: StateType, justifyFull: StateType, justifyLeft: StateType, justifyRight: StateType }

update(editor: Editor, props: { lineHeight: string | number, textAlign: string }): void