BlockNote

欢迎来到BlockNote ！基于开源块的React React文本编辑器。轻松在您的应用中添加现代文本编辑体验。

主页 – 文档 – QuickStart-示例

现场演示

请参阅我们的主页 @ https://www.b*lo*ckno*tejs.org或浏览示例。

示例代码（react）

BlockNote /react\”;
import { BlockNote View } from \”@ BlockNote /mantine\”;
import \”@ BlockNote /core/fonts/inter.css\”;
import \”@ BlockNote /mantine/style.css\”;

function App() {
const editor = useCreate BlockNote ();

return < BlockNote View editor={editor} />;
}\”>

 import { useCreate BlockNote } from \"@ BlockNote /react\" ;
import { BlockNote View } from \"@ BlockNote /mantine\" ;
import \"@ BlockNote /core/fonts/inter.css\" ;
import \"@ BlockNote /mantine/style.css\" ;

function App ( ) {
  const editor = useCreate BlockNote ( ) ;

  return < BlockNote View editor = { editor } / > ;
}

@ BlockNote /react带有完全样式的UI，它使其成为即时，抛光的编辑器，可以在您的应用中使用。

特征

BlockNote具有许多功能和组件，使您可以轻松地在应用中嵌入高质量的基于块的编辑器：

动画：

有用的占位符：

拖放块：

带有选项卡和Shift+Tab的嵌套 /凹痕：

Slash（/）菜单：

格式菜单：

实时合作：

反馈?‍♂️?‍♀️

我们很想听听您的想法并看到您的实验，所以请在Discord上打个招呼。

贡献?

有关如何运行项目的更多信息和指南，请参见贡献。

该代码库是使用Vitest和playwright自动测试的。

许可证?

BlockNote是100％开源软件。大多数BlockNote均根据MPL-2.0许可获得许可，该许可使您可以在商业（和封闭式）应用程序中使用BlockNote 。如果您更改BlockNote源文件，则希望您发布这些更改，以便更广泛的社区也可以受益。了解更多。

XL软件包（toxages /XL-*目录中的源代码，并在NPM中发布为 @ BlockNote /xl-*）已在AGPL-3.0下许可。如果您不能遵守此许可并想使用XL库，则需要商业许可证。有关更多信息，请参阅我们的网站。

学分❤️

BlockNote直接建立在两个很棒的项目上。 Marijn Haverbeke和Tiptap的Prosemirror。考虑使用BlockNote时，请考虑赞助这些库：tiptap。

BlockNote是作为Typecell的一部分而构建的。 Typecell由著名的NLNET基金会自豪地赞助，他们的使命是支持开放的互联网，并保护互联网用户的隐私和安全性。检查一下！

由Vercel提供动力的托管和部署：

该项目通过Browserstack进行了测试