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

Zefyr 是一个基于 Flutter 的富文本编辑器插件，提供了类似于现代文本编辑器的功能，如加粗、斜体、下划线、列表、链接等。它使用了 Notus 作为其文档模型，Notus 是一个基于 Quill 的文档格式，专为富文本编辑设计。

以下是使用 Zefyr 的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 zefyr 依赖：

dependencies:
  flutter:
    sdk: flutter
  zefyr: ^0.13.0

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

2. 创建 Zefyr 编辑器

在你的 Flutter 应用中，你可以通过以下方式创建一个 ZefyrEditor：

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

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

class _RichTextEditorState extends State<RichTextEditor> {
  ZefyrController? _controller;

  @override
  void initState() {
    super.initState();
    // 初始化一个空的 Notus 文档
    final document = NotusDocument();
    _controller = ZefyrController(document);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zefyr Rich Text Editor'),
      ),
      body: ZefyrScaffold(
        child: ZefyrEditor(
          controller: _controller!,
        ),
      ),
    );
  }
}

3. 使用 ZefyrToolbar

Zefyr 提供了一个 ZefyrToolbar 组件，可以方便地添加富文本编辑的工具栏：

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

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

class _RichTextEditorState extends State<RichTextEditor> {
  ZefyrController? _controller;

  @override
  void initState() {
    super.initState();
    final document = NotusDocument();
    _controller = ZefyrController(document);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zefyr Rich Text Editor'),
      ),
      body: Column(
        children: [
          ZefyrToolbar(controller: _controller!),
          Expanded(
            child: ZefyrScaffold(
              child: ZefyrEditor(
                controller: _controller!,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. 处理文档数据

你可以通过 ZefyrController 来获取或设置文档的内容。例如，保存文档内容：

void saveDocument() {
  final content = _controller!.document.toPlainText();
  print('Saved content: $content');
}

5. 自定义样式

你可以通过 ZefyrTheme 来自定义编辑器的样式：

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

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

class _RichTextEditorState extends State<RichTextEditor> {
  ZefyrController? _controller;

  @override
  void initState() {
    super.initState();
    final document = NotusDocument();
    _controller = ZefyrController(document);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zefyr Rich Text Editor'),
      ),
      body: ZefyrTheme(
        data: ZefyrThemeData(
          toolbarTheme: ZefyrToolbarTheme.fallback(context).copyWith(
            color: Colors.grey[200],
          ),
        ),
        child: ZefyrScaffold(
          child: ZefyrEditor(
            controller: _controller!,
          ),
        ),
      ),
    );
  }
}

6. 处理图片上传（可选）

Zefyr 支持图片插入，但需要你自己实现图片上传逻辑。你可以通过 ZefyrController 来处理图片上传：

_controller!.imageDelegate = MyImageDelegate();

其中 MyImageDelegate 是你自己实现的图片上传逻辑。

7. 处理其他功能

Zefyr 还支持链接、列表、代码块等富文本功能，你可以通过 ZefyrToolbar 或直接通过 ZefyrController 来控制这些功能。

8. 保存和加载文档

你可以将文档保存为 JSON 格式，并在需要时加载：

// 保存文档
final json = _controller!.document.toJson();

// 加载文档
final document = NotusDocument.fromJson(json);
_controller = ZefyrController(document);