如何在Flutter中创建支持多格式输出的自定义文本编辑器？

一、推荐库选择 #

• flutter_quill：成熟的富文本编辑库，自带加粗、斜体等格式化工具栏，基于轻量的Delta格式存储富文本，方便后续转换为各类平台输出格式。
• 替代选项：flutter_markdown_editor（适合Markdown优先场景，但自定义格式转换需额外开发）

二、编辑器界面实现（基于flutter_quill） #

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter_quill: ^9.0.0

2. 基础编辑器页面代码：

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

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

  @override
  State<TextEditorPage> createState() => _TextEditorPageState();
}

class _TextEditorPageState extends State<TextEditorPage> {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文本编辑器')),
      body: Column(
        children: [
          // 默认格式化工具栏：包含加粗、斜体、下划线等按钮
          QuillToolbar.basic(controller: _controller),
          // 编辑区域
          Expanded(
            child: QuillEditor.basic(
              controller: _controller,
              readOnly: false,
              padding: const EdgeInsets.all(16),
            ),
          ),
          // 导出操作按钮
          Padding(
            padding: const EdgeInsets.all(12),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: _exportToHtml,
                  child: const Text('导出HTML'),
                ),
                ElevatedButton(
                  onPressed: _exportToWhatsApp,
                  child: const Text('导出WhatsApp格式'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 后续实现导出逻辑
  void _exportToHtml() {}
  void _exportToWhatsApp() {}
}

三、多格式转换核心逻辑 #

flutter_quill用Delta格式存储富文本，我们只需遍历Delta的操作节点，将格式标记转换为对应平台的语法：

1. Delta转HTML #

String deltaToHtml(Delta delta) {
  String result = '';
  for (final operation in delta.toList()) {
    if (operation.insert is String) {
      String text = operation.insert as String;
      // 处理格式属性
      if (operation.attributes != null) {
        if (operation.attributes!['bold'] == true) {
          text = '<strong>$text</strong>';
        }
        if (operation.attributes!['italic'] == true) {
          text = '<em>$text</em>';
        }
        // 可扩展：添加下划线(<u>)、删除线(<s>)等格式转换
      }
      result += text;
    }
  }
  return result;
}

2. Delta转WhatsApp格式 #

WhatsApp使用Markdown子集：加粗用*，斜体用_

String deltaToWhatsApp(Delta delta) {
  String result = '';
  for (final operation in delta.toList()) {
    if (operation.insert is String) {
      String text = operation.insert as String;
      if (operation.attributes != null) {
        if (operation.attributes!['bold'] == true) {
          text = '*$text*';
        }
        if (operation.attributes!['italic'] == true) {
          text = '_$text_';
        }
      }
      result += text;
    }
  }
  return result;
}

3. 完善导出函数 #

将转换逻辑整合到按钮点击事件：

import 'package:flutter/services.dart';

void _exportToHtml() {
  final html = deltaToHtml(_controller.document.toDelta());
  // 复制到剪贴板
  Clipboard.setData(ClipboardData(text: html));
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('HTML已复制到剪贴板')),
  );
}

void _exportToWhatsApp() {
  final waText = deltaToWhatsApp(_controller.document.toDelta());
  Clipboard.setData(ClipboardData(text: waText));
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('WhatsApp格式已复制到剪贴板')),
  );
}

四、扩展优化建议 #

• 处理嵌套格式：比如同时加粗+斜体，HTML需保证标签嵌套顺序（<strong><em>文本</em></strong>），WhatsApp可使用*_文本_*组合
• 自定义工具栏：若默认工具栏不符合需求，可通过QuillToolbar.custom自定义按钮，调用_controller.formatText触发格式切换
• 支持更多格式：添加下划线、删除线等，对应HTML的<u>/<s>，WhatsApp的__/~~

内容的提问来源于stack exchange，提问作者Aniket Vishal