Flutter如何实现富文本编辑器

在Flutter中实现富文本编辑器有哪些推荐的方法或插件？目前看到有使用flutter_quill和Zefyr的方案，但不确定哪个更适合移动端开发。想了解如何实现以下功能：

  1. 文本加粗/斜体/下划线等基础样式
  2. 插入图片和超链接
  3. 支持撤销/重做操作
  4. 适配不同屏幕尺寸

是否需要自己处理键盘交互和光标定位？官方有没有提供原生的富文本支持方案？最好能提供简单的代码示例或实现思路。

2 回复

Flutter中可通过TextField或TextFormField结合TextSpan实现基础富文本编辑器。复杂功能需使用flutter_quill等第三方库，支持加粗、斜体、图片插入等。

更多关于Flutter如何实现富文本编辑器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中实现富文本编辑器有多种方式，以下是常用的方法：

1. 使用 TextField 或 TextFormField

适合简单的富文本需求，支持基本的文本样式：

TextField(
  maxLines: null,
  decoration: InputDecoration(
    hintText: '输入文本...',
    border: InputBorder.none,
  ),
  style: TextStyle(fontSize: 16),
)

2. 使用 flutter_quill 库（推荐）

功能最完整的富文本编辑器：

# pubspec.yaml
dependencies:
  flutter_quill: ^7.0.0

import 'package:flutter_quill/flutter_quill.dart';

class RichTextEditor extends StatefulWidget {
  @override
  _RichTextEditorState createState() => _RichTextEditorState();
}

class _RichTextEditorState extends State<RichTextEditor> {
  final QuillController _controller = QuillController.basic();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          QuillToolbar.basic(controller: _controller),
          Expanded(
            child: QuillEditor(
              controller: _controller,
              scrollController: ScrollController(),
              scrollable: true,
              padding: EdgeInsets.all(16),
              autoFocus: false,
              readOnly: false,
            ),
          ),
        ],
      ),
    );
  }
}

3. 使用 super_editor 库

另一个强大的选择，支持更复杂的编辑功能：

import 'package:super_editor/super_editor.dart';

SuperEditor(
  editor: DocumentEditor(
    document: MutableDocument(
      nodes: [
        ParagraphNode(
          id: DocumentEditor.createNodeId(),
          text: AttributedText(text: '开始编辑...'),
        ),
      ],
    ),
  ),
)

4. 使用 flutter_markdown（Markdown编辑器）

适合需要Markdown格式的场景：

MarkdownEditor(
  controller: MarkdownEditingController(text: '# 标题'),
)

主要功能对比

  • flutter_quill：功能最全面，支持图片、表格、代码块等
  • super_editor：性能优秀，适合复杂文档
  • 原生TextField：简单文本编辑
  • Markdown编辑器：轻量级，适合技术文档

推荐优先考虑 flutter_quill，它提供了最接近专业编辑器的体验，且社区活跃，文档完善。

回到顶部