Super Editor实战应用指南：从基础集成到高级定制

2026-04-24 10:10:39作者：秋泉律Samson

引言：什么是Super Editor

Super Editor是一个基于Flutter构建的文档编辑工具包，旨在帮助开发者快速构建功能丰富的文档编辑器、阅读器和文本输入组件。它提供了完整的文本编辑解决方案，包括基础文本操作、格式设置、富媒体支持以及高度可定制的界面组件。

核心功能概览

Super Editor作为一个全面的文本编辑框架，具备以下核心能力：

多平台支持：基于Flutter框架，可在iOS、Android、macOS、Windows等多平台运行
丰富的文本格式化：支持粗体、斜体、下划线、字体大小调整等常见文本格式
文档结构管理：支持段落、列表、标题等复杂文档结构
主题定制：内置明/暗两种主题模式，支持自定义样式
扩展性：通过插件系统支持Markdown、拼写检查等高级功能

快速开始

环境准备

在开始前，请确保您的开发环境已安装以下工具：

Flutter SDK (2.10.0或更高版本)
Dart SDK (2.16.0或更高版本)
Git

获取代码库

git clone https://gitcode.com/gh_mirrors/su/super_editor
cd super_editor

安装依赖

flutter pub get

运行示例应用

flutter run -t lib/main.dart

基础集成示例

以下是一个简单的Super Editor集成示例，展示如何在Flutter应用中快速添加一个功能完善的编辑器：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Super Editor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const EditorScreen(),
    );
  }
}

class EditorScreen extends StatefulWidget {
  const EditorScreen({super.key});

  @override
  State<EditorScreen> createState() => _EditorScreenState();
}

class _EditorScreenState extends State<EditorScreen> {
  late final Document _document;
  late final Editor _editor;

  @override
  void initState() {
    super.initState();
    // 初始化文档
    _document = Document(
      nodes: [
        ParagraphNode(
          id: '1',
          text: AttributedText('开始编辑您的文档...'),
          metadata: {'blockType': 'paragraph'},
        ),
      ],
    );
    // 创建编辑器实例
    _editor = Editor(
      document: _document,
      editContext: EditContext(
        document: _document,
        selection: const DocumentSelection.collapsed(
          position: DocumentPosition(
            nodeId: '1',
            nodePosition: TextNodePosition(offset: 0),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Super Editor'),
      ),
      body: SuperEditor(
        editor: _editor,
      ),
    );
  }
}

主题与样式定制

Super Editor提供了灵活的主题定制能力，让您可以根据应用需求调整编辑器的外观和感觉。

切换明/暗模式

Super Editor内置了明暗两种主题模式，可通过切换ThemeMode实现：

// 暗模式界面
SuperEditor(
  editor: _editor,
  stylesheet: darkEditorStylesheet,
)

自定义文本样式

您可以通过自定义Stylesheet来修改编辑器中的文本样式：

final customStylesheet = Stylesheet(
  documentPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
  paragraph: (document, node) {
    return ParagraphStyle(
      fontSize: 16,
      lineHeight: 1.5,
      color: Colors.teal,
      fontFamily: 'Roboto',
    );
  },
  // 其他样式定义...
);

// 在SuperEditor中使用自定义样式
SuperEditor(
  editor: _editor,
  stylesheet: customStylesheet,
)

文本选择与编辑

Super Editor提供了完整的文本选择和编辑功能，支持光标定位、文本选择、复制粘贴等操作。

文本选择示例

// 以编程方式设置文本选择
void selectAllText() {
  _editor.execute([
    ChangeSelectionCommand(
      DocumentSelection(
        base: DocumentPosition(
          nodeId: '1',
          nodePosition: const TextNodePosition(offset: 0),
        ),
        extent: DocumentPosition(
          nodeId: '1',
          nodePosition: TextNodePosition(offset: _document.nodes.first.text.text.length),
        ),
      ),
    ),
  ]);
}

高级功能

Markdown支持

Super Editor通过super_editor_markdown包提供Markdown格式的解析和渲染支持：

import 'package:super_editor_markdown/super_editor_markdown.dart';

// 将Markdown字符串解析为文档
final document = markdownToDocument('# Hello World\n\nThis is a paragraph.');

// 将文档序列化为Markdown
final markdown = documentToMarkdown(document);

拼写检查

Super Editor提供拼写检查功能，可通过super_editor_spellcheck包启用：

SuperEditor(
  editor: _editor,
  spellCheckConfiguration: SpellCheckConfiguration(
    enabled: true,
    dictionary: const ['custom', 'words'],
  ),
)