Flutter Web：如何通过代码实现HTML编辑器内容的富文本复制效果？

问题核心在于Flutter原生的Clipboard.setData只能写入纯文本，而手动按CTRL+C时，浏览器会自动将选中内容以富文本（HTML）格式存入剪贴板，Gmail这类应用能识别该格式并渲染带样式的文本。要模拟这一行为，需直接调用浏览器原生剪贴板API写入HTML格式内容。

实现步骤 #

1. 引入dart:js库调用浏览器JS API
2. 编写富文本复制方法，通过JS写入HTML格式的剪贴板项
3. 处理降级逻辑，为不支持API的浏览器提供纯文本备选

代码实现 #

首先导入依赖库：

import 'dart:js' as js;
import 'package:flutter/services.dart';

实现富文本复制方法：

Future<void> copyRichText(String html) async {
  // 生成纯文本备选（移除所有HTML标签）
  final plainText = html.replaceAll(RegExp(r'<[^>]*>'), '');

  // 构建同时包含HTML和纯文本的剪贴板数据
  final clipboardData = js.JsObject.jsify({
    'text/html': html,
    'text/plain': plainText,
  });

  final clipboardItem = js.JsObject(js.context['ClipboardItem'], [clipboardData]);

  try {
    // 调用浏览器剪贴板API写入富文本
    await js.context['navigator']['clipboard'].callMethod('write', [js.JsArray.from([clipboardItem])]);
  } catch (e) {
    // 浏览器不支持时降级为纯文本复制
    await Clipboard.setData(ClipboardData(text: plainText));
  }
}

使用方式 #

从编辑器获取HTML后调用复制方法：

// 获取编辑器中的HTML内容
final editorHtml = await _htmlEditorController.getText();
// 执行富文本复制
await copyRichText(editorHtml);

关键注意事项 #

• 必须在用户交互中触发：浏览器剪贴板API受安全策略限制，只能在按钮点击等用户主动操作的事件中执行，否则会抛出权限错误。
• 确保HTML格式有效：html_editor_enhanced返回的HTML需包含完整标签结构（如<p>、<b>、<i>等），Gmail才能正确解析样式。
• 兼容性处理：现代主流浏览器（Chrome、Firefox、Edge）均支持ClipboardItem API，旧浏览器会自动降级为纯文本复制。

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