Flutter富文本编辑器插件super_editor的使用

简介

Super Editor 是一个开源、可配置和可扩展的Flutter文本编辑器和文档渲染器。它支持多种后端集成，您可以根据需要插入自己的后端服务。

更新说明 (2024年6月)

我们正在积极改进核心编辑器功能，如撤销/重做、稳定的编辑器管道和有用的编辑器反应。这些API已经发生了很大变化，因此我们有一段时间没有发布标准版本。不过，Super Editor及其相关项目仍在定期开发中。我们现在开始发布开发者版本，以便社区可以了解我们的工作进展。

支持平台

• 支持的平台

  • Mac OS
  • Web
  • Android
  • iOS

• 未验证的平台

  • Windows
  • Linux

运行示例实现

Super Editor 包含一个示例应用程序，用于展示核心功能和交互UI元素。您可以通过以下命令运行示例应用程序：

cd example
flutter run -d macos

显示编辑器

基本用法

要显示一个默认的富文本编辑器，可以使用 SuperEditor 小部件：

class _MyAppState extends State<MyApp> {
  late final MutableDocument _document;
  late final MutableComposer _composer;
  late final Editor _editor;

  @override
  void initState() {
    super.initState();

    // 创建初始文档内容
    _document = MutableDocument(
      nodes: [
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText('This is a header'),
          metadata: {
            'blockType': header1Attribution,
          },
        ),
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText('This is the first paragraph'),
        ),
      ],
    );

    // 创建用户选择器
    _composer = MutableDocumentComposer();
    
    // 创建编辑器
    _editor = createDefaultDocumentEditor(document: _document, composer: _composer);
  }

  @override
  Widget build(BuildContext context) {
    return SuperEditor(
      document: _document,
      composer: _composer,
      editor: _editor,
    );
  }
}

自定义样式和组件

您可以自定义 SuperEditor 的样式和组件：

class _MyAppState extends State<MyApp> {
  late final MutableDocument _document;
  late final MutableComposer _composer;
  late final Editor _editor;

  @override
  void initState() {
    super.initState();

    _document = MutableDocument(
      nodes: [
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText('Custom Task Node Example'),
        ),
      ],
    );

    _composer = MutableDocumentComposer();
    _editor = createDefaultDocumentEditor(document: _document, composer: _composer);
  }

  @override
  Widget build(BuildContext context) {
    return SuperEditor(
      editor: _editor,
      selectionStyle: null,
      stylesheet: defaultStylesheet.copyWith(
        addRulesAfter: [
          StyleRule(
            const BlockSelector("task"),
            (document, node) {
              if (node is! TaskNode) {
                return {};
              }

              return {
                Styles.padding: const CascadingPadding.only(top: 24),
              };
            },
          )
        ],
      ),
      componentBuilders: [
        ...defaultComponentBuilders,
        // 添加自定义组件构建器
      ],
    );
  }
}

示例代码

以下是完整的示例代码，展示了如何创建和运行一个基本的富文本编辑器：

import 'package:flutter/material.dart';
import 'package:super_editor/super_editor.dart';

void main() async {
  runApp(SuperEditorDemoApp());
}

class SuperEditorDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Super Editor Demo App',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: HomeScreen(),
      supportedLocales: const [
        Locale('en', ''),
        Locale('es', ''),
      ],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late final MutableDocument _document;
  late final MutableComposer _composer;
  late final Editor _editor;

  @override
  void initState() {
    super.initState();

    _document = MutableDocument(
      nodes: [
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText('This is a header'),
          metadata: {
            'blockType': header1Attribution,
          },
        ),
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText('This is the first paragraph'),
        ),
      ],
    );

    _composer = MutableDocumentComposer();
    _editor = createDefaultDocumentEditor(document: _document, composer: _composer);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Super Editor Demo'),
      ),
      body: Center(
        child: SuperEditor(
          document: _document,
          composer: _composer,
          editor: _editor,
        ),
      ),
    );
  }
}

通过以上代码，您可以快速上手并创建一个简单的富文本编辑器应用。如果您需要更复杂的定制化功能，可以参考官方提供的更多示例和文档。