如何使用Flutter Quill编辑器编辑已有文档并初始化内容？

Quill Editor的内容基于Delta格式，无法像TextEditingController那样直接传入字符串初始化，需要通过构建Delta对象来定义初始的文本、图片等内容，再用该对象初始化QuillController。

修改后的完整代码 #

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

class Editor extends StatefulWidget {
  const Editor({super.key});

  @override
  State<Editor> createState() => _EditorState();
}

class _EditorState extends State<Editor> {
  // 构建包含文本与图片的初始Delta内容
  final Delta initialContent = Delta()
    ..insert('姓名：张三\n')
    ..insert('年龄：25\n')
    ..insert('联系方式：13800138000\n\n')
    // 替换为你的图片路径（本地资源需在pubspec.yaml配置）或网络URL
    ..insert({'image': 'assets/avatar.jpg'});

  // 用初始Delta初始化QuillController
  late final QuillController editorController = QuillController(
    document: Document.fromDelta(initialContent),
    selection: const TextSelection.collapsed(offset: 0),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          const SizedBox(height: 50),
          QuillToolbar.basic(
            controller: editorController,
            toolbarIconAlignment: WrapAlignment.start,
            embedButtons: FlutterQuillEmbeds.buttons(
              onImagePickCallback: (file) async {
                return file.path;
              },
            ),
            iconTheme: QuillIconTheme(
              iconSelectedFillColor: Colors.green,
              iconUnselectedFillColor: Colors.grey.shade300,
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(15, 15, 15, 0),
              child: QuillEditor.basic(
                embedBuilders: FlutterQuillEmbeds.builders(),
                controller: editorController,
                readOnly: false,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• Delta格式：Quill通过Delta描述文档结构，insert()方法可接受普通字符串，或图片这类嵌入对象（用Map格式传入）。
• 文本样式扩展：如果需要给特定文本添加格式（如加粗、变色），可在insert()后调用format()，示例：

  ..insert('姓名：')
  ..insert('张三\n', {'bold': true, 'color': '#ff0000'})
  

• 图片资源处理：本地图片需在pubspec.yaml的assets节点中声明路径；网络图片直接传入完整URL即可。

内容的提问来源于stack exchange，提问作者Flutter