英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

mui-rte

Material-UI 富文本编辑器和查看器

mui-rte 是一个完整的 MUI 库（原 Material-UI）文本编辑器和查看器，基于 draft-js 并使用 Typescript 编写。它开箱即用，同时支持用户定义的块、样式、自动完成策略、异步/同步自定义原子块、回调和装饰器，以及工具栏和主题自定义，以满足所有编辑需求。

安装

npm install mui-rte --save

安装对等依赖：@mui/material、@mui/icons-material、@mui/styles、react 和 react-dom。你还需要安装 MUI 的对等依赖：@emotion/react 和 @emotion/styled。

演示

使用

import { createTheme, ThemeProvider } from '@mui/material/styles'
import MUIRichTextEditor from 'mui-rte'

const myTheme = createTheme({
    // Set up your custom MUI theme here
})

ReactDOM.render(
    <ThemeProvider theme={myTheme}>
        <MUIRichTextEditor label="Start typing..." />
    </ThemeProvider>, 
    document.getElementById("root")
)

您可以按如下示例加载默认内容。该值应为字符串化的 RawDraftContentState 对象：

import MUIRichTextEditor from 'mui-rte'

const data = getContentStateAsStringFromSomewhere()

ReactDOM.render(
    <ThemeProvider theme={myTheme}>
        <MUIRichTextEditor 
            defaultValue={data}
            label="Start typing..." 
        />
    </ThemeProvider>, 
    document.getElementById("root")
)

Material-UI v4 Compatibility

mui-rte 版本 2.x 仅兼容 MUI (v5)。您仍然可以使用适用于 Material-UI v4 的 1.x 版本。当前使用 mui-rte 版本 1.x 的代码应该与版本 2.x 兼容，唯一的破坏性更改是它要求像示例中那样被 ThemeProvider 包裹。

示例

请查看 examples 目录以获取更多信息。

自定义控件

您可以为编辑器定义自定义的内联样式、区块、原子区块和回调操作。只需从 @mui/icons-material 中选择一个图标，或创建您自己的 FunctionComponent 并定义您的规则。

添加自定义内联样式

此示例添加了一个控件，用于更改输入或选中文本的背景颜色和字体颜色：

import MUIRichTextEditor from 'mui-rte'
import InvertColorsIcon from '@mui/icons-material/InvertColors'

<MUIRichTextEditor 
    controls={["my-style"]}
    customControls={[
        {
            name: "my-style",
            icon: <InvertColorsIcon />,
            type: "inline",
            inlineStyle: {
                backgroundColor: "black",
                color: "white"
            }
        }
    ]}
/>

添加自定义块

此示例根据 React Element 向编辑器添加一个区块：

import MUIRichTextEditor from 'mui-rte'
import TableChartIcon from '@mui/icons-material/TableChart'

const MyBlock = (props) => {
    return (
        <div style={{
            padding: 10,
            backgroundColor: "#ebebeb"
        }}>
            My Block content is:
            {props.children}
        </div>
    )
}

<MUIRichTextEditor 
    controls={["my-block"]}
    customControls={[
        {
            name: "my-block",
            icon: <TableChartIcon />,
            type: "block",
            blockWrapper: <MyBlock />
        }
    ]}
/>

添加自定义原子块（异步）

可以使用 insertAtomicBlockAsync API 插入基于异步行为的自定义块。上面的示例展示了一个示例，说明如何上传图片并使用 MUIRichTextEditor 的默认图片控件进行进一步编辑。你可以使用这种行为，在编辑器中拖放文件时上传文件，并在上传后将其渲染为图片实体。

查看这个其他示例，展示了如何使用异步下载内容添加 @mui/material Card 组件。

添加自定义原子块（同步）

查看这个示例，展示了如何创建一个控件，将 @mui/material Card 组件添加到编辑器中。

添加自定义回调控件

此示例添加了一个控件，该控件将触发自定义回调函数以清除编辑器状态：

import MUIRichTextEditor from 'mui-rte'
import DoneIcon from '@mui/icons-material/Done'
import { EditorState } from 'draft-js'

<MUIRichTextEditor 
    controls={["my-callback"]}
    customControls={[
        {
            name: "my-callback",
            icon: <DoneIcon />,
            type: "callback",
            onClick: (editorState, name, anchor) => {
                console.log(`Clicked ${name} control`)
                return EditorState.createEmpty()
            }
        }
    ]}
/>

自动完成策略

您可以定义自动完成策略，根据文本输入显示建议内容列表。只需设置触发字符，添加一些搜索键和要插入的内容，编辑器就会为您完成所有操作。您可以使用键盘箭头导航建议，最后按“回车”将内容插入编辑器。

简单策略示例

这是一个示例，展示当用户开始输入类似 ':face'、':joy' 或 ':grin' 的文本时，如何显示表情符号建议：

import MUIRichTextEditor from 'mui-rte'

const emojis = [
    {
        keys: ["face", "grin"],
        value: "😀",
        content: "😀",
    },
    {
        keys: ["face", "joy"],
        value: "😂",
        content: "😂",
    },
    {
        keys: ["face", "sweat"],
        value: "😅",
        content: "😅",
    }
]

<MUIRichTextEditor 
    autocomplete={{
        strategies: [
            {
                items: emojis,
                triggerChar: ":"
            }
        ]
    }}
/>

查看此示例，展示了如何在单个编辑器中添加多种自动完成策略。

原子策略示例

查看此示例，展示了如何将原子自定义控件与自动完成策略功能结合使用。

自定义装饰器

您可以定义自定义装饰器，根据提供的正则表达式应用样式和/或功能。

使用装饰器添加自定义功能

要在用户输入 #hashtag 时添加一些功能，请使用以下示例。在这种情况下，每次用户输入以 # 字符开头的单词时，它都会自动转换为带样式的链接：

import MUIRichTextEditor from 'mui-rte'

const MyHashTagDecorator = (props) => {
    const hashtagUrl = "http://myurl/" + props.decoratedText
    return (
        <a 
            href={hashtagUrl}
            style={{
                color: "green"
            }}
        >
            {props.children}
        </a>
    )
}

<MUIRichTextEditor 
    label="Type something here..."
    decorators={[
        {
            component: MyHashTagDecorator,
            regex: /\#[\w]+/g
        }
    ]}
/>

内联工具栏

编辑器包含一个内联工具栏选项，当用户进行选择时，会在编辑器区域内显示弹出窗口。内联工具栏支持用户定义的控件。请注意，只有 inline 类型的控件会被渲染。主工具栏显示的控件可以与内联工具栏中的控件不同。你也可以隐藏主工具栏，只启用内联工具栏。

import MUIRichTextEditor from 'mui-rte'

<MUIRichTextEditor 
    label="Type something here..."
    inlineToolbar={true}
/>

编辑器样式

你可以使用 Material-UI 的主题功能来为编辑器设置样式。首先使用 createMuiTheme 创建一个主题，然后覆盖诸如 root、container、editor 和 editorContainer 的类。更多内容请查看 examples 目录。

import { createMuiTheme, MuiThemeProvider } from '@mui/material/styles'
import MUIRichTextEditor from 'mui-rte'

const defaultTheme = createMuiTheme()

Object.assign(defaultTheme, {
    overrides: {
        MUIRichTextEditor: {
            root: {
                marginTop: 20,
                width: "80%"
            },
            editor: {
                borderBottom: "1px solid gray" 
            }
        }
    }
})

<MuiThemeProvider theme={defaultTheme}>
    <MUIRichTextEditor 
        label="Type something here..."
    />
</MuiThemeProvider>

应用程序编程接口

<MUIRichTextEditor /> (TMUIRichTextEditorProps)

TCustomControl

TToolbarComponentProps

TDecorator

TKeyCommand

TDraftEditorProps

TAutocomplete

TAutocompleteStrategy

TAutocompleteItem

TMUIRichTextEditorRef

TAsyncAtomicBlockResponse

更新日志

查看 版本说明 以获取更新日志。

开发

用于开发：

$ npm run build
$ npm run serve

未来计划

• 添加测试覆盖
• 重构代码
• 添加新功能

建议和问题

请随时在 Issues 标签页上留下您的评论。

许可证

根据 MIT 许可证获得授权。