Flutter富文本编辑扩展插件flutter_quill_extensions的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter Quill Extensions

An extension for flutter_quill to support embedding widgets, images, formulas, and videos.

📚 Table of Contents

📝 About

flutter_quill is a rich text editor that allows custom embed builders to render custom widgets in the editor. This extension enhances its functionalities by adding features like images, videos, and more.

📦 Installation

Follow the usage instructions of flutter_quill.

Add the flutter_quill_extensions dependency to your project:

dependencies:
  flutter_quill_extensions: ^<latest-version-here>

OR

dependencies:
  flutter_quill_extensions:
    git:
      url: https://github.com/singerdmx/flutter-quill.git
      ref: v<latest-version-here>
      path: flutter_quill_extensions

🛠 Platform Specific Configurations

The package uses the following plugins:

  1. gal to save images.
  2. image_picker for picking images.

Loading Images from the Internet

Android

  1. Add the necessary permissions to your AndroidManifest.xml.
  2. To restrict image and video loading to HTTPS only, configure your app accordingly.

macOS

Include a key in your Info.plist file to enable internet access.

🚀 Usage

Once you follow the Installation section, set the embedBuilders and embedToolbar params in configurations of QuillEditor and QuillToolbar.

Quill Toolbar

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

Quill Editor

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

⚙️ Configurations

📦 Embed Blocks

Implementations for image, video, and formula embed blocks are provided in this package.

🔍 Element properties

Currently, the library supports only width, height, margin for image and video properties.

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

🔧 Custom Element properties

Define flutterAlignment as follows:

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

🎨 Rich Text Paste Feature

Supported directly in flutter_quill.

🖼️ Image Assets

If you want to use image assets in the Quill Editor:

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

🎯 Drag and drop feature

Steps to implement drag-and-drop:

  1. Use any Flutter plugin like desktop_drop.

  2. Add the dependency:

    flutter pub add desktop_drop

    Import it with:

    import 'package:desktop_drop/desktop_drop.dart';

  3. Wrap the editor with DropTarget:

    import 'package:flutter_quill_extensions/flutter_quill_extensions.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(),
  ),
)

  4. Implement _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;
    }
    _controller.insertImageBlock(
      imageSource: file.path,
    );
    scaffoldMessenger.showSnackBar(
      const SnackBar(
        content: Text('Image is inserted.'),
      ),
    );
  };
}

🤝 Contributing

See Contributing for more details.


This Markdown document provides a comprehensive guide on using the `flutter_quill_extensions` plugin, including installation, platform-specific configurations, usage examples, and additional configurations. The code snippets included demonstrate how to integrate the plugin into a Flutter application effectively.

更多关于Flutter富文本编辑扩展插件flutter_quill_extensions的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter富文本编辑扩展插件flutter_quill_extensions的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_quill_extensions插件来实现富文本编辑功能的示例代码。flutter_quill_extensions是基于quill_delta库构建的，它提供了丰富的文本编辑功能，比如加粗、斜体、下划线、颜色、图片插入等。

首先，确保在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_quill: ^x.y.z  # 请检查最新版本号
  quill_delta: ^x.y.z    # 请检查最新版本号
  flutter_quill_extensions: ^x.y.z  # 请检查最新版本号

替换x.y.z为实际的最新版本号。

接下来，在你的Flutter项目中，你可以按照以下步骤使用flutter_quill_extensions：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:quill_delta/quill_delta.dart';
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
  1. 创建QuillEditor并配置扩展：
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Quill Extensions Demo'),
        ),
        body: QuillEditorScreen(),
      ),
    );
  }
}

class QuillEditorScreen extends StatefulWidget {
  @override
  _QuillEditorScreenState createState() => _QuillEditorScreenState();
}

class _QuillEditorScreenState extends State<QuillEditorScreen> {
  final QuillController _quillController = QuillController();

  @override
  void initState() {
    super.initState();

    // 初始化QuillController并添加扩展
    _quillController.addExtensions([
      // 添加一些基本的富文本编辑扩展
      BoldExtension(),
      ItalicExtension(),
      UnderlineExtension(),
      ColorExtension(),
      ImageExtension(),
      // 你可以添加更多的扩展，根据你的需求
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: QuillEditor(
        controller: _quillController,
        placeholder: 'Compose rich text...',
        scrollPhysics: BouncingScrollPhysics(),
      ),
    );
  }

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

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个QuillEditor。我们初始化了一个QuillController并为其添加了一些基本的富文本编辑扩展，如加粗、斜体、下划线、颜色和图片插入。

  1. 运行应用：

确保你已经安装了所有依赖，并在你的开发环境中运行Flutter应用。你现在应该能够看到一个富文本编辑器，你可以使用工具栏上的按钮来编辑文本，并应用各种格式。

这个示例代码展示了如何使用flutter_quill_extensions来扩展QuillEditor的功能。你可以根据项目的具体需求，添加或移除扩展，或者自定义扩展来满足特定的文本编辑需求。

回到顶部