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

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

插件介绍

quill_native_bridge 是一个内部的Flutter插件，用于 flutter_quill 包访问平台特定的API。该插件提供了多种功能，如获取剪贴板中的HTML、将HTML复制到剪贴板、从系统相册中打开图片等。

功能列表

以下是 quill_native_bridge 的一些主要功能及其在不同平台上的支持情况：

• ⚪: 该功能在此平台上不适用或不支持。
• ❌: 插件当前未实现该功能。
• ✅: 支持并可正常工作。

使用示例

以下是一个完整的示例代码，展示了如何使用 quill_native_bridge 插件进行富文本编辑的相关操作：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:quill_native_bridge/quill_native_bridge.dart';

// 创建一个全局实例，允许在测试中覆盖
QuillNativeBridge quillNativeBridge = QuillNativeBridge();

void main() => runApp(const MainApp());

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

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton.icon(
          onPressed: () => _onButtonPressed(
            QuillNativeBridgeFeature.isIOSSimulator,
            context: context,
          ),
          label: const Text('Is iOS Simulator'),
          icon: const Icon(Icons.apple),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonPressed(
            QuillNativeBridgeFeature.getClipboardHtml,
            context: context,
          ),
          label: const Text('Get HTML from Clipboard'),
          icon: const Icon(Icons.html),
        ),
        ElevatedButton.icon(
          onPressed: () => _onButtonPressed(
            QuillNativeBridgeFeature.copyHtmlToClipboard,
            context: context,
          ),
          label: const Text('Copy HTML to Clipboard'),
          icon: const Icon(Icons.copy),
        ),
        // 其他按钮类似...
      ],
    );
  }
}

Future<void> _onButtonPressed(
  QuillNativeBridgeFeature feature, {
  required BuildContext context,
}) async {
  final scaffoldMessenger = ScaffoldMessenger.of(context);
  final isFeatureUnsupported = !(await quillNativeBridge.isSupported(feature));

  switch (feature) {
    case QuillNativeBridgeFeature.isIOSSimulator:
      if (isFeatureUnsupported) {
        scaffoldMessenger.showText(
          kIsWeb
              ? "Can't check if the device is an iOS simulator on the web."
              : 'Available only on iOS to determine if the device is a simulator.',
        );
        return;
      }
      final result = await quillNativeBridge.isIOSSimulator();
      scaffoldMessenger.showText(result
          ? "You're running the app on iOS simulator."
          : "You're running the app on a real iOS device.");
      break;
    case QuillNativeBridgeFeature.getClipboardHtml:
      if (isFeatureUnsupported) {
        scaffoldMessenger.showText(
          kIsWeb
              ? 'Retrieving HTML from the clipboard is currently not supported on the web.'
              : 'Retrieving HTML from the clipboard is currently not supported on ${defaultTargetPlatform.name}.',
        );
        return;
      }
      final result = await quillNativeBridge.getClipboardHtml();
      if (result == null) {
        scaffoldMessenger
            .showText('The HTML is not available on the clipboard.');
        return;
      }
      scaffoldMessenger.showText('HTML from the clipboard: $result');
      debugPrint('HTML from the clipboard: $result');
      break;
    case QuillNativeBridgeFeature.copyHtmlToClipboard:
      if (isFeatureUnsupported) {
        scaffoldMessenger.showText(
          kIsWeb
              ? 'Copying HTML to the clipboard is not supported on the web.'
              : 'Copying HTML to the clipboard is not supported on ${defaultTargetPlatform.name}.',
        );
        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 copied to the clipboard: $html');
      break;
    // 其他case类似...
  }
}

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

平台设置

某些功能需要特定平台的配置，例如在Android平台上使用 copyImageToClipboard 需要更新 AndroidManifest.xml 文件并创建 file_paths.xml 文件。

Android 设置

1. 更新 AndroidManifest.xml

   <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

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

iOS 设置

保存图片到相册时需要权限设置，具体步骤如下：

1. 打开 ios/Runner/Info.plist 文件并添加以下键：

   <key>NSPhotoLibraryAddUsageDescription</key>
   <string>Your description here</string>
   
   <key>NSPhotoLibraryUsageDescription</key>
   <string>Your description here</string>