Flutter富文本编辑插件quill_native_bridge_syncme的使用

🪶 Quill Native Bridge

quill_native_bridge_syncme 是一个内部插件，用于访问平台特定的API，主要用于 flutter_quill 包。

注意事项

• 仅限内部使用：仅限于 flutter_quill 使用。可能会有破坏性更改。

平台支持特性

🔧 平台配置

为了在Android上支持将图像复制到系统剪贴板，需要进行平台配置设置。如果没有设置，在调试模式下会出现在日志中警告，而在生产模式下则会抛出异常。

重要提示

此配置仅在Android平台上使用 copyImageToClipboard 时需要。如果该方法未被使用，则其他功能在Android上仍然可以正常工作。更多信息，请参阅Android FileProvider文档。

1. 更新 AndroidManifest.xml

打开 your_project/android/app/src/main/AndroidManifest.xml 并在 <application> 标签内添加以下内容：

<manifest>
    <application>
        ...
        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true" >
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths" />
        </provider>
        ...
    </application>
</manifest>

2. 创建 file_paths.xml

创建文件 your_project/android/app/src/main/res/xml/file_paths.xml，内容如下：

<paths>
    <cache-path name="cache" path="." />
</paths>

🚧 实验性

尽管该包的版本较高，但由于它之前与 flutter_quill 的版本相同，现在已分离。flutter_quill 发布工作流会为所有包发布一个稳定版本，即使没有引入任何更改。

修复版本需要取消对 quill_native_bridge 的支持并发布新包。

完整示例代码

以下是完整的示例代码，展示了如何使用 quill_native_bridge_syncme 插件的功能。

import 'package:flutter/material.dart';
import 'package:quill_native_bridge/quill_native_bridge_syncme.dart' 
    show QuillNativeBridge, QuillNativeBridgeFeature;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Quill Native Bridge'),
        ),
        body: const Center(
          child: Buttons(),
        ),
      ),
    );
  }
}

class Buttons extends StatelessWidget {
  const Buttons({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.isIOSSimulator,
            context: context,
          ),
          label: const Text('Is iOS Simulator'),
          icon: const Icon(Icons.apple),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.getClipboardHtml,
            context: context,
          ),
          label: const Text('Get HTML from Clipboard'),
          icon: const Icon(Icons.html),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.copyHtmlToClipboard,
            context: context,
          ),
          label: const Text('Copy HTML to Clipboard'),
          icon: const Icon(Icons.copy),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.copyImageToClipboard,
            context: context,
          ),
          label: const Text('Copy Image to Clipboard'),
          icon: const Icon(Icons.copy),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.getClipboardImage,
            context: context,
          ),
          label: const Text('Retrieve Image from Clipboard'),
          icon: const Icon(Icons.image),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.getClipboardGif,
            context: context,
          ),
          label: const Text('Retrieve Gif from Clipboard'),
          icon: const Icon(Icons.gif),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonClick(
            QuillNativeBridgeFeature.getClipboardFiles,
            context: context,
          ),
          label: const Text('Retrieve Files from Clipboard'),
          icon: const Icon(Icons.file_open),
        ),
      ],
    );
  }

  Future<void> _onButtonClick(
    QuillNativeBridgeFeature feature, {
    required BuildContext context,
  }) async {
    final scaffoldMessenger = ScaffoldMessenger.of(context);

    final isFeatureUnsupported = !(await QuillNativeBridge.isSupported(feature));
    final isFeatureWebUnsupported = isFeatureUnsupported && kIsWeb;
    switch (feature) {
      case QuillNativeBridgeFeature.isIOSSimulator:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? "无法在网页上检查设备是否为iOS模拟器。"
                : '必须在iOS设备上才能检查是否为模拟器。',
          );
          return;
        }
        final result = await QuillNativeBridge.isIOSSimulator();
        scaffoldMessenger.showText(result
            ? "你正在运行iOS模拟器的应用。"
            : "你正在运行真实的iOS设备上的应用。");
        break;
      case QuillNativeBridgeFeature.getClipboardHtml:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? '在网页上无法从剪贴板检索HTML。'
                : '在${defaultTargetPlatform.name}上无法从剪贴板获取HTML。',
          );
          return;
        }
        final result = await QuillNativeBridge.getClipboardHtml();
        if (result == null) {
          scaffoldMessenger.showText(
            '剪贴板上没有可用的HTML。',
          );
          return;
        }
        scaffoldMessenger.showText(
          '剪贴板上的HTML: $result',
        );
        debugPrint('剪贴板上的HTML: $result');
        break;
      case QuillNativeBridgeFeature.copyHtmlToClipboard:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? '在网页上无法将HTML复制到剪贴板。'
                : '在${defaultTargetPlatform.name}上无法将HTML复制到剪贴板。',
          );
          return;
        }
        const html = '''
          <strong>Bold text</strong>
          <em>Italic text</em>
          <u>Underlined text</u>
          <span style="color:red;">Red text</span>
          <span style="background-color:yellow;">Highlighted text</span>
        ''';
        await QuillNativeBridge.copyHtmlToClipboard(html);
        scaffoldMessenger.showText(
          'HTML已复制到剪贴板: $html',
        );
        break;
      case QuillNativeBridgeFeature.copyImageToClipboard:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? '在网页上无法将图像复制到剪贴板。'
                : '在${defaultTargetPlatform.name}上无法将图像复制到剪贴板。',
          );
          return;
        }
        final imageBytes = await loadAssetFile('path_to_your_image'); // 替换为实际路径
        await QuillNativeBridge.copyImageToClipboard(imageBytes);

        // 不广泛支持，但一些应用程序会将图像作为文本复制：
        // final file = File(
        //   '${Directory.systemTemp.path}/clipboard-image.png',
        // );
        // await file.create(recursive: true);
        // await file.writeAsBytes(imageBytes);
        // Clipboard.setData(
        //   ClipboardData(
        //     // 目前Android插件不支持content://
        //     text: 'file://${file.absolute.path}',
        //   ),
        // );

        scaffoldMessenger.showText(
          '图像已复制到剪贴板。',
        );
        break;
      case QuillNativeBridgeFeature.getClipboardImage:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? '在网页上无法从剪贴板检索图像。'
                : '在${defaultTargetPlatform.name}上无法从剪贴板检索图像。',
          );
          return;
        }
        final imageBytes = await QuillNativeBridge.getClipboardImage();
        if (imageBytes == null) {
          scaffoldMessenger.showText(
            '剪贴板上没有可用的图像。',
          );
          return;
        }
        if (!context.mounted) {
          return;
        }
        showDialog(
          context: context,
          builder: (context) => Dialog(
            child: Image.memory(imageBytes),
          ),
        );
        break;
      case QuillNativeBridgeFeature.getClipboardGif:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? '在网页上无法从剪贴板检索GIF。'
                : '在${defaultTargetPlatform.name}上无法从剪贴板检索GIF。',
          );
          return;
        }
        final gifBytes = await QuillNativeBridge.getClipboardGif();
        if (gifBytes == null) {
          scaffoldMessenger.showText(
            '剪贴板上没有可用的GIF。',
          );
          return;
        }
        if (!context.mounted) {
          return;
        }
        showDialog(
          context: context,
          builder: (context) => Dialog(
            child: Image.memory(gifBytes),
          ),
        );
        break;
      case QuillNativeBridgeFeature.getClipboardFiles:
        if (isFeatureUnsupported) {
          scaffoldMessenger.showText(
            isFeatureWebUnsupported
                ? '在网页上无法从剪贴板检索文件。'
                : '在${defaultTargetPlatform.name}上无法从剪贴板检索文件。',
          );
          return;
        }
        final files = await QuillNativeBridge.getClipboardFiles();
        if (files.isEmpty) {
          scaffoldMessenger.showText('剪贴板上没有文件。');
          return;
        }
        scaffoldMessenger.showText(
          '${files.length} 文件来自剪贴板: ${files.toString()}',
        );
        debugPrint('文件来自剪贴板: $files');
        break;
    }
  }
}

extension ScaffoldMessengerX on ScaffoldMessengerState {
  void showText(String text) {
    clearSnackBars();
    showSnackBar(
      SnackBar(
        content: Text(text),
      ),
    );
  }
}