Flutter富文本编辑器插件wysiwyg_flutter_quill的使用

Flutter 富文本编辑器插件 wysiwyg_flutter_quill 的使用

Flutter Quill

Flutter Quill

Flutter Quill 是一个为现代 Android、iOS、Web 和桌面平台设计的富文本编辑器。它是一个基于 Quill 的 Flutter 组件。

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  QuillController _controller;

  @override
  void initState() {
    super.initState();
    _controller = QuillController.basic();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Quill Demo'),
      ),
      body: Column(
        children: [
          QuillSimpleToolbar(
            controller: _controller,
            configurations: const QuillSimpleToolbarConfigurations(),
          ),
          Expanded(
            child: QuillEditor.basic(
              controller: _controller,
              configurations: const QuillEditorConfigurations(),
            ),
          ),
        ],
      ),
    );
  }
}

安装

在 pubspec.yaml 文件中添加以下依赖：

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

或者直接从 Git 仓库安装：

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

平台特定配置

flutter_quill 包使用了以下插件：

  1. url_launcher 用于打开链接。
  2. quill_native_bridge 用于访问编辑器的平台特定 API。
  3. flutter_keyboard_visibility_temp_fork 用于监听键盘可见性变化。

这些插件都不需要任何平台特定的设置。

使用

  1. 实例化一个控制器：
QuillController _controller = QuillController.basic();
  1. 使用 QuillEditor 和 QuillSimpleToolbar 小部件，并将 QuillController 附加到它们上：
QuillSimpleToolbar(
  controller: _controller,
  configurations: const QuillSimpleToolbarConfigurations(),
),
Expanded(
  child: QuillEditor.basic(
    controller: _controller,
    configurations: const QuillEditorConfigurations(),
  ),
)
  1. 在 dispose 方法中释放 QuillController：
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

输入 / 输出

该库使用 Quill Delta 来表示文档内容。Delta 格式是一种紧凑且灵活的方式来描述文档更改。它由一系列操作组成，每个操作代表文档内的插入、删除或格式更改。

使用 _controller.document.toDelta() 提取 Delta：

final delta = _controller.document.toDelta();

使用 _controller.document.toPlainText() 提取纯文本：

final plainText = _controller.document.toPlainText();

保存文档为 JSON：

final json = jsonEncode(_controller.document.toDelta().toJson());

打开带有现有 JSON 表示的编辑器：

final json = jsonDecode(r'{"insert":"hello\n"}');
_controller.document = Document.fromJson(json);

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

1 回复

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


wysiwyg_flutter_quill 是一个基于 quill 的 Flutter 富文本编辑器插件，它允许你在 Flutter 应用中集成一个功能丰富的富文本编辑器。quill 是一个流行的富文本编辑器库，支持多种格式、插入图片、视频、链接等功能。

下面是如何在 Flutter 项目中使用 wysiwyg_flutter_quill 的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 wysiwyg_flutter_quill 依赖：

dependencies:
  flutter:
    sdk: flutter
  wysiwyg_flutter_quill: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入库

在你的 Dart 文件中导入 wysiwyg_flutter_quill：

import 'package:wysiwyg_flutter_quill/wysiwyg_flutter_quill.dart';

3. 使用 QuillEditor

你可以使用 QuillEditor 小部件来显示和编辑富文本内容。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:wysiwyg_flutter_quill/wysiwyg_flutter_quill.dart';

class RichTextEditorScreen extends StatefulWidget {
  @override
  _RichTextEditorScreenState createState() => _RichTextEditorScreenState();
}

class _RichTextEditorScreenState extends State<RichTextEditorScreen> {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rich Text Editor'),
      ),
      body: Column(
        children: [
          QuillToolbar.basic(controller: _controller),
          Expanded(
            child: QuillEditor(
              controller: _controller,
              readOnly: false, // 设置为 true 时，编辑器为只读模式
              autoFocus: true,
              focusNode: FocusNode(),
              padding: EdgeInsets.all(16),
              expands: false,
            ),
          ),
        ],
      ),
    );
  }
}

4. 控制器的使用

QuillController 用于控制编辑器的内容和状态。你可以使用它来获取或设置编辑器的内容。例如：

// 获取编辑器内容
final String content = _controller.document.toDelta().toString();

// 设置编辑器内容
_controller.document = Document.fromDelta(Delta.fromJson(content));

5. 自定义工具栏

QuillToolbar.basic 提供了一个基本的工具栏，但你也可以自定义工具栏，添加或移除按钮。例如：

QuillToolbar(
  controller: _controller,
  showAlignmentButtons: true,
  showBackgroundColorButton: true,
  showBoldButton: true,
  showColorButton: true,
  showCodeBlock: true,
  showDirectionButton: true,
  showFontFamily: true,
  showFontSize: true,
  showHeaderStyle: true,
  showItalicButton: true,
  showJustifyAlignment: true,
  showLink: true,
  showListBullets: true,
  showListCheck: true,
  showListNumbers: true,
  showQuote: true,
  showSearchButton: true,
  showStrikeThrough: true,
  showUnderLineButton: true,
  showUndo: true,
  showRedo: true,
)

6. 其他功能

quill 还支持插入图片、视频、链接等功能。你可以通过 QuillController 的 document 和 format 方法来实现这些功能。

例如，插入图片：

_controller.document.insert(index, 'image', {'src': 'https://example.com/image.png'});

插入链接：

_controller.formatText(index, length, LinkAttribute('https://example.com'));

7. 保存和加载内容

你可以将编辑器中的内容保存为 JSON 或 Delta 格式，并在需要时加载它。

// 保存内容
final String content = _controller.document.toDelta().toString();

// 加载内容
_controller.document = Document.fromDelta(Delta.fromJson(content));

8. 处理键盘输入

QuillEditor 已经处理了大部分的键盘输入，但你可以通过 FocusNode 和 onChanged 回调来进一步控制编辑器的行为。

QuillEditor(
  controller: _controller,
  readOnly: false,
  autoFocus: true,
  focusNode: FocusNode(),
  padding: EdgeInsets.all(16),
  expands: false,
  onChanged: (value) {
    // 处理内容变化
  },
)

9. 处理图片上传

如果你需要处理图片上传，可以通过 ImageEmbedBuilder 来自定义图片的显示和上传逻辑。

QuillEditor(
  controller: _controller,
  readOnly: false,
  autoFocus: true,
  focusNode: FocusNode(),
  padding: EdgeInsets.all(16),
  expands: false,
  imageEmbedBuilder: (context, image) {
    return Image.network(image['src'] as String);
  },
)

10. 处理视频嵌入

类似于图片，你也可以处理视频嵌入。

QuillEditor(
  controller: _controller,
  readOnly: false,
  autoFocus: true,
  focusNode: FocusNode(),
  padding: EdgeInsets.all(16),
  expands: false,
  videoEmbedBuilder: (context, video) {
    return VideoPlayerWidget(video['src'] as String);
  },
)
回到顶部