Appflowy 网页编辑器

一个现代编辑库,支持丰富的文本,markdown,和代码编辑.

* 特性

• ++ 日/夜模式切换
• * 多种语文支助
• * 响应性设计
• QQ 类型脚本支持
• * * 丰富文本、减记和代码编辑
• 方便整合
• 还有更多!

* 安装

要安装 AppFlowy 网络编辑器, 请运行以下命令 :

npm install @appflowyinc/editor

# or

yarn add @appflowyinc/editor

# or

pnpm add @appflowyinc/editor

说明: 此软件包需要安装这些对等依赖 :

"peerDependencies": {
    "i18next": "^22.4.10",
    "i18next-resources-to-backend": "^1.2.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^14.1.0",
    "slate": "^0.112.0",
    "slate-history": "^0.110.3",
    "slate-react": "^0.112.0"
}

QQ 快速启动

要使用 AppFlowy 网页编辑器,请导入 Editor 财务报告和审定财务报表 EditorProvider 从软件包的组件并包装您的应用程序

注:使用编辑器需要 EditorProvider 组件。 因此,每个 Editor 组件需要被包裹 由相应的 EditorProvider

import { Editor, EditorProvider } from '@appflowyinc/editor';

const App = () => {
  return <EditorProvider>
    <Editor/>
  </EditorProvider>
};

export default App;

QQ 自定义工具栏

AppFlowy Web编辑器提供了包含各种编辑内容选项的工具栏. 您可以自定义工具栏 传递 ToolbarComponent 给 Editor 组件.

import { Editor, EditorProvider, FixedToolbar } from '@appflowyinc/editor';

const App = () => {
  return <EditorProvider>
    <Editor ToolbarComponent={FixedToolbar}/>
  </EditorProvider>;
};

export default App;

QQ 应用数据

你可以来 editor 从 useEditor 钩并应用数据到编辑器中.

import { Editor, EditorProvider, useEditor, NodeType } from '@appflowyinc/editor';

const App = () => {
  const editor = useEditor();

  useEffect(() => {
    editor.applyData({
      type: NodeType.Paragraph,
      delta: [
        {
          insert: 'Hello, World!',
        },
      ],
      children: []
    });

    // or apply markdown
    editor.applyMarkdown('# Hello, World!');
  }, []);

  return
  <Editor/>;
};

const Main = () => {
  return <EditorProvider>
    <App/>
  </EditorProvider>;
};

export default App;

主题切换

AppFlowy Web编辑器支持在光和暗模式之间切换主题. 您可以通过路过来自定义主题 页:1 theme 给 Editor 组件.

import { Editor, EditorProvider } from '@appflowyinc/editor';

const App = () => {
  return <EditorProvider>
    <Editor theme={'dark'}/>
  </EditorProvider>;
};

export default App;

多语种使用

AppFlowy网络编辑器支持多种语言. 您可以通过 : language 向 页:1 Editor 组件.

import { Editor, EditorProvider } from '@appflowyinc/editor';
// Optionally, you can import the language resources from the package
import zh from '@appflowyinc/editor/locales/zh-CN.json';

import hostI18n from 'i18next';

const App = () => {
  return <I18nextProvider i18n={hostI18n}>
    <EditorProvider>
      <Editor locale={{
        // The language code.
        lang: 'zh-CN',
        // Optionally, you can pass the language resources or let it use the default resources
        resources: zh,
      }}/>
    </EditorProvider>
  </I18nextProvider>;
};

export default App;

支持的语言

• 英语( en)
• 阿拉伯语( ar- SA)
• 加泰罗尼亚语( ca- ES)
• 中库尔德语( 克布- KU)
• 捷克语( cs- CZ)
• 德语( de- DE)
• 西班牙语( es- VE)
• 巴斯克语( eu- ES)
• 波斯语( 发)
• 法语( fr- CA)
• 法语( fr- FR)
• 希伯来语( 他)
• 匈牙利语( hu- HU)
• 印度尼西亚语( id- ID)
• 意大利语( It- IT)
• 日语( ja- JP)
• 韩语( ko- KR)
• 波兰语( pl- PL)
• 巴西葡萄牙语( pt- BR)
• 葡萄牙语( pt- PT)
• 俄语( ru- RU)
• 瑞典语( sv- SE)
• 泰语( 第- TH )
• 土耳其语( Tr- TR)
• 乌克兰语( uk- UA)
• 越南语( 六)
• 越南语( vi- VN)
• 简化中文(zh-CN)
• 传统汉语( zh- TW)

• API

编辑器Props

提供道具编辑器

编辑器数据

type EditorData = {
  type: NodeType;
  data: Record<string, any>;
  delta: DeltaOperation[];
  children: EditorData[];
};

节点Type

enum NodeType {
  Paragraph = 'paragraph',
  Heading = 'heading',
  NestedBlock = 'nested-block',
  Todo = 'todo_list',
  NumberedList = 'numbered_list',
  BulletedList = 'bulleted_list',
  Quote = 'quote',
}

钩子

使用编辑器

返回带有控制编辑器的方法的编辑器实例.

const editor = useEditor();

发展

指南

发展 模式

# Install dependencies

pnpm i

# Start development server

pnpm run dev

# Build library

pnpm run build

要在当地运行演示 :

pnpm install
pnpm run dev

打开 http://localhost:5173/ (英语) 使用浏览器查看结果.

通过点击右上角的主题切换器来切换光和暗模式.

许可证

MIT 许可证

[]: # (END) README.md