反应本地丰富的文本编辑器 10tap

TenTap是一个被打出,易于使用,可自定义,以及可扩展的Rich Text编辑器,用于基于Tiptap和Prosemiror的React-Native. 它提供了一种"插和玩"的经验,并带有许多基本特征出柜,可以被快速地融入到您的应用中. 此外, TenTap 允许开发者根据您的应用程序特定需要调整编辑器 .

特征

• 基于小费
• 可扩展
• 支持动态计划
• QQ 本地工具栏
• QQ 自定义键盘
• QQ 自定义样式
• 🌒 Darkmode和自定义主题支持
• • 支持新建筑(包括无桥建筑)和旧建筑

为什么?

在为移动开发丰富的文本编辑器多年之后,我们意识到在移动上,尤其是为ReactNative开发的开源RichText编辑器存在空虚. 因此,我们决定制定这个一揽子方案,纳入我们所学到的一切,提供尽可能最好的工具。 Tentap旨在获得在移动上编辑丰富文本的最佳经验,灵感来自:gdocs,概念,dropbox paper等最先进的移动编辑器.

文件和实例

单击这里获取完整的文档

安装

原生反应

1. yarn add @10play/tentap-editor react-native-webview
2. cd ios && pod install

该套装包括一个小型本土模块(TenTapKeyboard)被自定义键盘所使用. 它是自动链接的, 所以你只需要在安装或升级后重建您的应用程序 。 编辑本身没有它.

博览

npx expo install @10play/tentap-editor react-native-webview

• Dev 客户端/ 预建 : 包括本地键盘驱动器 不需要配置插件; 重建您的 发展 安装或升级后。 高级设置还需要一个dev客户端.
• 博览去: 编辑器工作,自定义键盘使用JavaScript倒置(参见 博览去和倒置驱动程序) (中文(简体) ).

所需资源

反应-本土-网络视图 13.7+. 原生模块需要回放原生0.74+(Expo SDK 51+),新旧架构. 这个 react-native 同伴依赖是 *,所以没有检查安装。 见 所需经费。 。 。 .

博览网

TenTap 支持 expo 网络 ! 见设置 这里

使用量

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import {
  EditorKeyboardAvoidingView,
  RichText,
  Toolbar,
  useEditorBridge,
} from '@10play/tentap-editor';

export const Basic = () => {
  const editor = useEditorBridge({
    autofocus: true,
    avoidIosKeyboard: true,
    initialContent: 'Start editing!',
  });

  return (
    <SafeAreaView style={styles.fullScreen}>
      <EditorKeyboardAvoidingView style={styles.fullScreen}>
        <View style={styles.fullScreen}>
          <RichText editor={editor} />
        </View>
        <View style={styles.toolbarRow}>
          <Toolbar editor={editor} />
        </View>
      </EditorKeyboardAvoidingView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  fullScreen: { flex: 1 },
  toolbarRow: { flexDirection: 'row' },
});

EditorKeyboardAvoidingView 将工具栏保留在键盘上方,没有 keyboardVerticalOffset还在边缘到边缘的Android上 见 键盘和护栏。 。 。 .

实例

• example/: a React Introduct CLI app(React Introduct 0.81,新旧架构),每个实例包括自定义键盘,动态高度和高级设置.
• example-expo/:一个有基本编辑器,动态高度,自定义键盘和一个屏幕上的两个编辑器的博览会应用(开发建设). 也通于网络.

常见问题(清单 react-native-render-html中读取内容 onChange,字体,内含图像,编辑器在 a ScrollView答案载于 财务问题。 。 。 .

升级

• 从1.0或0.7.x到1.1:见 1.1 移徙指南 编辑 更改日志。 。 。 .

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

制造的 创建- 反应- 本土- 图书馆