Flutter中如何将Markdown编辑器内容转换并存储为HTML格式？

要实现Markdown转HTML并存储，需要完成以下几步：

1. 添加Markdown转HTML依赖 #

在pubspec.yaml的dependencies中添加：

markdown: ^7.1.0

执行flutter pub get安装依赖。

2. 修改代码实现转换功能 #

核心改动点：

• 为编辑器添加TextEditingController以获取输入内容
• 使用markdown库的markdownToHtml方法完成格式转换
• 添加触发转换的交互按钮

修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:markdown_editor_plus/markdown_editor_plus.dart';
import 'package:markdown/markdown.dart'; // 新增导入

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 新增控制器，用于获取编辑器内容
  final _autoPreviewController = TextEditingController();
  final _splittedController = TextEditingController();
  String _convertedHtml = '';

  // 新增转换方法
  void _convertMarkdownToHtml() {
    // 获取第一个编辑器的Markdown内容并转HTML
    String markdownContent = _autoPreviewController.text;
    String html = markdownToHtml(markdownContent);
    
    // 如果需要处理第二个编辑器的内容，可类似处理
    // String splittedMarkdown = _splittedController.text;
    // String splittedHtml = markdownToHtml(splittedMarkdown);

    setState(() {
      _convertedHtml = html;
    });

    // 这里可以将_convertedHtml存储到本地或服务器
    // 示例：print("转换后的HTML：$_convertedHtml");
  }

  @override
  void dispose() {
    // 销毁控制器
    _autoPreviewController.dispose();
    _splittedController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home Screen"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            MarkdownAutoPreview(
              controller: _autoPreviewController, // 绑定控制器
              decoration: const InputDecoration(
                hintText: 'Markdown Auto Preview',
              ),
              emojiConvert: true,
              maxLines: 5,
            ),
            SplittedMarkdownFormField(
              controller: _splittedController, // 绑定控制器
              markdownSyntax: '## Headline',
              decoration: const InputDecoration(
                hintText: 'Splitted Markdown FormField',
              ),
              emojiConvert: true,
              maxLines: 5,
            ),
            ElevatedButton(
              onPressed: _convertMarkdownToHtml,
              child: const Text("转换为HTML并存储"),
            ),
            // 预览转换后的HTML（可选）
            Expanded(
              child: SingleChildScrollView(
                child: Text(_convertedHtml),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 控制器绑定：通过TextEditingController可以实时获取编辑器的输入内容，这是转换的前提。
• 转换逻辑：markdownToHtml方法会将标准Markdown语法转换为对应的HTML标签，支持标题、列表、链接、加粗等常用格式。
• 存储处理：转换得到的_convertedHtml字符串可直接存储到本地数据库（如Hive、SharedPreferences）或上传至服务器。
• emoji支持：由于编辑器开启了emojiConvert: true，转换后的HTML会保留emoji字符，无需额外处理。

内容的提问来源于stack exchange，提问作者Krishna prasad