flutter如何使用quill富文本编辑器

我正在Flutter项目中集成Quill富文本编辑器，但遇到一些问题：

  1. 如何正确安装和配置Quill插件？文档中的依赖项似乎有变动
  2. 如何实现图片上传功能？官方示例不够详细
  3. 自定义工具栏按钮时遇到困难，比如添加字体颜色选择器
  4. 保存内容时获取的是Delta格式，如何转换为HTML或Markdown？
  5. 在iOS/Android上显示样式不一致，有什么兼容性注意事项？

有没有完整的集成示例或最佳实践可以分享？谢谢！

2 回复

在Flutter中使用Quill富文本编辑器：

  1. 添加依赖：quill_flutter: ^x.x.x
  2. 导入包：import 'package:quill_flutter/quill_flutter.dart';
  3. 创建控制器：QuillController _controller = QuillController.basic();
  4. 在build中使用QuillEditor和QuillToolbar组件

示例：

QuillEditor(
  controller: _controller,
  readOnly: false,
)
QuillToolbar.basic(controller: _controller)

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


在Flutter中使用Quill富文本编辑器需要以下步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_quill: ^latest_version

2. 基本使用

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

class RichTextEditor extends StatefulWidget {
  @override
  _RichTextEditorState createState() => _RichTextEditorState();
}

class _RichTextEditorState extends State<RichTextEditor> {
  final QuillController _controller = QuillController.basic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('富文本编辑器'),
        actions: [
          IconButton(
            icon: Icon(Icons.save),
            onPressed: () {
              // 获取编辑器内容
              final content = _controller.document.toPlainText();
              print('保存内容: $content');
            },
          )
        ],
      ),
      body: Column(
        children: [
          QuillToolbar.basic(controller: _controller),
          Expanded(
            child: QuillEditor(
              controller: _controller,
              scrollController: ScrollController(),
              scrollable: true,
              padding: EdgeInsets.all(16),
              autoFocus: false,
              readOnly: false,
            ),
          ),
        ],
      ),
    );
  }

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

3. 主要功能特性

  • 格式化文本：粗体、斜体、下划线、删除线
  • 段落样式：标题、列表、对齐方式
  • 插入内容：图片、链接、表格
  • 自定义工具栏：可配置显示的工具按钮

4. 获取和设置内容

// 获取HTML格式内容
String html = _controller.document.toPlainText();

// 设置初始内容
_controller.document = Document.fromJson([
  {'insert': 'Hello World\n'},
  {'insert': 'Flutter', 'attributes': {'bold': true}},
]);

5. 自定义配置

可以通过 QuillToolbar 和自定义配置来调整工具栏按钮，支持图片上传、自定义样式等功能。

这是一个完整的富文本编辑器实现，适合大多数应用场景。

回到顶部