Flutter中将HTML字符串转换为纯文本以供TextFormField编辑

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.4 # 请使用最新版本

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';

/// 将HTML字符串转换为纯文本
///
/// [htmlString] 待转换的HTML字符串。
/// 返回剥离HTML标签后的纯文本。
String convertHtmlToPlainText(String htmlString) {
  // 使用parse函数解析HTML字符串，得到一个Document对象
  final Document document = parse(htmlString);

  // 获取文档的body元素，并提取其所有文本内容
  // body?.text 会自动剥离所有HTML标签，并合并文本节点。
  // 如果body为空，则返回空字符串。
  final String? plainText = document.body?.text;

  // 返回处理后的纯文本，如果为null则返回空字符串
  return plainText ?? '';
}

import 'package:flutter/material.dart';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';

// 上面定义的 convertHtmlToPlainText 函数
String convertHtmlToPlainText(String htmlString) {
  final Document document = parse(htmlString);
  final String? plainText = document.body?.text;
  return plainText ?? '';
}

class HtmlTextEditorScreen extends StatefulWidget {
  final String initialHtmlContent;

  const HtmlTextEditorScreen({Key? key, required this.initialHtmlContent}) : super(key: key);

  @override
  _HtmlTextEditorScreenState createState() => _HtmlTextEditorScreenState();
}

class _HtmlTextEditorScreenState extends State<HtmlTextEditorScreen> {
  late TextEditingController _textEditingController;

  @override
  void initState() {
    super.initState();
    // 在initState中，将HTML内容转换为纯文本并赋值给TextEditingController
    final String plainText = convertHtmlToPlainText(widget.initialHtmlContent);
    _textEditingController = TextEditingController(text: plainText);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('编辑文章内容'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              controller: _textEditingController,
              maxLines: null, // 允许无限行
              keyboardType: TextInputType.multiline,
              decoration: const InputDecoration(
                labelText: '文章内容',
                hintText: '请输入纯文本内容',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 用户编辑后的纯文本内容
                final String editedContent = _textEditingController.text;
                print('用户编辑后的纯文本内容：\n$editedContent');
                // 在这里可以将编辑后的纯文本保存或进一步处理
                // 如果需要保存为HTML，则需要一个富文本编辑器来重新生成HTML
              },
              child: const Text('保存'),
            ),
          ],
        ),
      ),
    );
  }
}

// 如何在您的应用中使用这个屏幕
// void main() {
//   runApp(MaterialApp(
//     home: HtmlTextEditorScreen(
//       initialHtmlContent: '<h1>欢迎</h1><p>这是一段<b>HTML</b>内容，包含了一些<i>格式</i>。'
//           '还有一些 <a href="#">链接</a> 和 <br> 换行符。</p>'
//           '<script>alert("Hello");</script>',
//     ),
//   ));
// }