Verbum

Verbum - 用于 React 的灵活文本编辑器

Verbum 是一个基于 lexical-playground 和 lexical 框架的全面灵活的富文本编辑器。

⚠️ 由于 Lexical 框架目前处于早期开发阶段，该组件库也可能会经常发生变化

安装

npm install verbum --save

演示

在线演示即将推出...

使用

import { FC } from 'react';
import {
  EditorComposer,
  Editor,
  ToolbarPlugin,
  AlignDropdown,
  BackgroundColorPicker,
  BoldButton,
  CodeFormatButton,
  FloatingLinkEditor,
  FontFamilyDropdown,
  FontSizeDropdown,
  InsertDropdown,
  InsertLinkButton,
  ItalicButton,
  TextColorPicker,
  TextFormatDropdown,
  UnderlineButton,
  Divider,
} from 'verbum';

const NoteViewer: FC = () => {
  return (
    <EditorComposer>
      <Editor hashtagsEnabled={true}>
        <ToolbarPlugin defaultFontSize="20px">
          <FontFamilyDropdown />
          <FontSizeDropdown />
          <Divider />
          <BoldButton />
          <ItalicButton />
          <UnderlineButton />
          <CodeFormatButton />
          <InsertLinkButton />
          <TextColorPicker />
          <BackgroundColorPicker />
          <TextFormatDropdown />
          <Divider />
          <InsertDropdown enablePoll={true} />
          <Divider />
          <AlignDropdown />
        </ToolbarPlugin>
      </Editor>
    </EditorComposer>
  );
};

export default NoteViewer;

API

<EditorComposer />

<Editor />

自动浏览器语言检测支持

如果未提供 locale，Verbum 默认支持自动浏览器语言检测。如果浏览器语言设置为 fr，编辑器将自动本地化为法语。如果浏览器语言设置为 en，编辑器将自动本地化为英语。如果浏览器语言设置为任何其他语言，编辑器将自动本地化为英语。

插件

<ToolbarPlugin />

工具栏组件

<FontFamilyDropdown />

添加您自己的字体系列。

<FontSizeDropdown />

添加您自己的字体大小。

<InsertDropdown />

<MentionsPlugin />

GetTypeaheadValues<A>

PopoverCard<A>

插件支持

开发

开发时使用：

$ npm install（如果出错，请运行 `npm install --legacy-peer-deps`）
$ npm start

你也可以使用Storybook在本地进行测试：

$ npm run storybook

未来计划

• 测试覆盖
• 以JSON格式编程访问编辑器输入
• 本地化
• 具有不同选项的现成模板（MUI、Bootstrap等）
• 深色/浅色模式
• 自定义样式灵活性
• 将工具栏全部拆解，使其能作为嵌套组件使用，提高灵活性
• 使能够通过编程方式调整编辑器设置，如只读模式等

许可证

基于MIT许可证授权。