Flutter富文本编辑与同步扩展插件flutter_quill_extensions_syncme的使用

Flutter富文本编辑与同步扩展插件flutter_quill_extensions_syncme的使用

📚 目录

• 📝 关于
• 📦 安装
• 🛠 平台特定配置
• 🚀 使用
• ⚙️ 配置
• 🤝 贡献

📝 关于

flutter_quill 是一个富文本编辑器。它具有自定义嵌入构建器，允许你在编辑器中渲染自定义小部件。

这是一个扩展包，通过添加更多功能（如图像、视频等）来扩展其功能。

📦 安装

请遵循flutter_quill的使用说明。

在你的项目中添加flutter_quill_extensions依赖：

dependencies:
  flutter_quill_extensions: ^<最新版本>

或者直接从GitHub拉取：

dependencies:
  flutter_quill_extensions:
    git:
      url: https://github.com/singerdmx/flutter-quill.git
      ref: v<最新版本>
      path: flutter_quill_extensions

🛠 平台特定配置

该包使用以下插件：

1. 使用gal来保存图片。确保遵循开始指南，因为它需要平台特定设置。
2. 使用image_picker来选择图片。请参阅安装部分。

加载互联网上的图片

Android

1. 在你的AndroidManifest.xml文件中添加必要的权限。详情请参考Android指南或Flutter联网指南。注意，只有调试版本默认包含互联网权限，发布版本需要显式添加。
2. 若要限制仅加载HTTPS，请按需配置你的应用。如果需要支持HTTP，请调整你的应用设置以适应发布模式。查阅Android明文HTTP指南获取更多信息。

macOS

在你的Info.plist文件中包含一个键以启用互联网访问。详情请参考Flutter macOS联网文档。

🚀 使用

一旦你完成了安装部分。 在QuillEditor和QuillToolbar的配置中设置embedBuilders和embedToolbar参数。

Quill工具栏

QuillToolbar.simple(
  configurations: QuillSimpleToolbarConfigurations(
    embedButtons: FlutterQuillEmbeds.toolbarButtons(),
  ),
),

Quill编辑器

Expanded(
  child: QuillEditor.basic(
    configurations: QuillEditorConfigurations(
      embedBuilders: kIsWeb ? FlutterQuillEmbeds.editorWebBuilders() : FlutterQuillEmbeds.editorBuilders(),
    ),
  ),
)

⚙️ 配置

📦 嵌入块

flutter_quill为所有用户提供了一个接口来实现嵌入块。这个包提供了图像、视频和公式嵌入块的实现。

使用嵌入块的说明见使用部分。

🔍 元素属性

当前库对图像和视频的支持有限，仅支持width、height、margin属性。

{
  "insert": {
    "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
  },
  "attributes": {
    "style": "width: 50px; height: 50px; margin: 10px;"
  }
}

🔧 自定义元素属性

不适用于官方Quill JS

定义flutterAlignment如下：

{
  "insert": {
    "image": "https://user-images.githubusercontent.com/122956/72955931-ccc07900-3d52-11ea-89b1-d468a6e2aa2b.png"
  },
  "attributes": {
    "style": "flutterAlignment: topLeft"
  }
}

这仅适用于非Web平台。

📝 富文本粘贴功能

现在flutter_quill直接支持富文本粘贴功能，因为平台代码未捆绑到项目中。

🖼️ 图像资产

如果你想在Quill编辑器中使用图像资源，你需要确保你的资源文件夹名为assets，否则：

QuillEditor.basic(
  configurations: const QuillEditorConfigurations(
    // ...
    sharedConfigurations: QuillSharedConfigurations(
      extraConfigurations: {
        QuillSharedExtensionsConfigurations.key:
            QuillSharedExtensionsConfigurations(
          assetsPrefix: 'your-assets-folder-name', // 默认为`assets`
        ),
      },
    ),
  ),
);

此信息对于包检查是否使用AssetImage提供者是必要的。

🎯 拖放功能

目前，拖放功能不被正式支持，但你可以很容易地通过以下步骤实现：

1. 拖放需要原生代码，你可以使用任何你喜欢的Flutter插件。如果你需要建议，我们推荐desktop_drop，它是为桌面开发的。它还支持Web和Android（iOS不支持）。
2. 在你的pubspec.yaml中添加依赖项：

flutter pub add desktop_drop

并在代码中导入它：

import 'package:desktop_drop/desktop_drop.dart';

1. 在QuillEditor的配置中，使用builder将编辑器包装在来自desktop_drop的DropTarget中：

import 'package:flutter_quill_extensions/flutter_quill_extensions_syncme.dart';

QuillEditor.basic(
  configurations: QuillEditorConfigurations(
    padding: const EdgeInsets.all(16),
    builder: (context, rawEditor) {
      return DropTarget(
        onDragDone: _onDragDone,
        child: rawEditor,
      );
    },
    embedBuilders: kIsWeb
        ? FlutterQuillEmbeds.editorWebBuilders()
        : FlutterQuillEmbeds.editorBuilders(),
  ),
)

1. 实现_onDragDone，根据你的用例不同，这只是一个简单的例子：

const List<String> imageFileExtensions = [
  '.jpeg',
  '.png',
  '.jpg',
  '.gif',
  '.webp',
  '.tif',
  '.heic'
];

OnDragDoneCallback get _onDragDone {
  return (details) {
    final scaffoldMessenger = ScaffoldMessenger.of(context);
    final file = details.files.first;
    final isSupported =
        imageFileExtensions.any((ext) => file.name.endsWith(ext));
    if (!isSupported) {
      scaffoldMessenger.showSnackBar(
        SnackBar(
          content: Text(
            'Only images are supported right now: ${file.mimeType}, ${file.name}, ${file.path}, $imageFileExtensions',
          ),
        ),
      );
      return;
    }
    // 为了获取这个扩展函数，请导入flutter_quill_extensions
    _controller.insertImageBlock(
      imageSource: file.path,
    );
    scaffoldMessenger.showSnackBar(
      const SnackBar(
        content: Text('Image is inserted.'),
      ),
    );
  };
}