将HTML文本转换为纯文本以在Flutter的TextFormField中编辑

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

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

/// 将HTML字符串转换为纯文本
String convertHtmlToPlainText(String htmlString) {
  // 使用parse函数解析HTML字符串，返回一个Document对象
  final Document document = parse(htmlString);

  // 从文档的body元素中提取所有文本内容
  // .text属性会递归获取所有子节点的文本，并自动忽略HTML标签
  final String? plainText = document.body?.text;

  // 如果body为空，则返回空字符串，否则返回提取到的纯文本，并去除首尾空白
  return plainText?.trim() ?? '';
}

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

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

class HtmlTextEditorScreen extends StatefulWidget {
  @override
  _HtmlTextEditorScreenState createState() => _HtmlTextEditorScreenState();
}

class _HtmlTextEditorScreenState extends State<HtmlTextEditorScreen> {
  final TextEditingController _textEditingController = TextEditingController();
  String _originalHtml = "<p>Hello <b>World</b>!</p><p>This is a <i>test</i> with some <a href='https://example.com'>link</a>.</p>";

  @override
  void initState() {
    super.initState();
    // 将HTML转换为纯文本并设置给TextEditingController
    String initialPlainText = convertHtmlToPlainText(_originalHtml);
    _textEditingController.text = initialPlainText;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML to Plain Text Editor'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Original HTML:', style: TextStyle(fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            Container(
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(_originalHtml),
            ),
            SizedBox(height: 20),
            Text('Editable Plain Text:', style: TextStyle(fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            TextFormField(
              controller: _textEditingController,
              maxLines: null, // 允许文本框多行显示
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter your text here...',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 当用户编辑后，可以获取纯文本内容
                print('Current edited text: ${_textEditingController.text}');
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Edited text: ${_textEditingController.text}')),
                );
              },
              child: Text('Get Edited Text'),
            ),
          ],
        ),
      ),
    );
  }
}