flutter QuillEditor 如何添加自定义的标签

Flutter QuillEditor 是一个使用 Quill 编辑器的 Flutter 组件，Quill 编辑器是一个富文本编辑器库。要添加自定义的标签，需要执行以下步骤：

1. 首先，你需要安装 Quill 编辑器库，只需要在 pubspec.yaml 文件的 dependencies 中添加以下行：

   dependencies:
     quill: ^2.0.0

2. 在 Quill Editor 中，你可以使用 Delta 类来表示富文本。你可以使用 Delta 类中的 insert 方法来添加自定义标签：

   final Delta delta = Delta()
     ..insert('This is normal text')
     ..insert('This is custom tag', {'custom-tag': true})
     ..insert('This is more normal text');

在上面的代码中，通过传递一个 Map 对象，使用 insert 方法添加了一个具有自定义标签的文本。

3. 在 QuillEditor 中，要显示 Delta，请将其传递给 DeltaEditor 组件：

   QuillEditor(
     controller: _controller,
     readOnly: false, // Optional
     expands: false, // Optional
     padding: EdgeInsets.zero, // Optional
     customEditors: [
       const HrQuillEditor(),
     ],
     autoFocus: false, // Optional
   ),

在上面的 QuillEditor 示例中，添加了一个自定义组件 HrQuillEditor。

   class HrQuillEditor extends StatelessWidget implements CustomQuillEditor {
     const HrQuillEditor();

     @override
     Widget build(BuildContext context, QuillController controller) {
       return Container(
         color: Colors.grey[300],
         height: 1,
         margin: EdgeInsets.symmetric(vertical: 16),
       );
     }

     @override
     bool isBlock() {
       return true;
     }

     @override
     bool isContinuous(Map<String, dynamic> attributes) {
       final String tag = attributes['tag'] as String?;
       return tag == 'hr';
     }

     @override
     Delta insert(BuildContext context, QuillController controller) {
       return Delta()..insert('\n', {'tag': 'hr'});
     }
   }

在上述示例代码中，HrQuillEditor 是一个继承自 StatelessWidget 和 CustomQuillEditor 的自定义组件，并且实现了 build、isBlock、isContinuous 和 insert 方法。

* build 方法返回一个带有一条线的容器。

* isBlock 方法返回 true，因为 hr 标签通常被认为是一个块级元素。

* isContinuous 方法在 Delta 中插入一个新的行时，可以告诉 QuillEditor 是否应该添加一个连续的 hr 标签。

* insert 方法定义了将 Delta 中的 hr 标签插入 QuillEditor 的逻辑。

4. 通过这些步骤，你可以将自定义标签添加到 QuillEditor 中。

   final Delta delta = Delta()
     ..insert('This is normal text')
     ..insert('\n', {'tag': 'hr'})
     ..insert('This is more normal text');
   _controller = QuillController(
     document: Document.fromDelta(delta),
     selection: const TextSelection.collapsed(offset: 0),
   );

在上述示例代码中，使用了 Delta 类中的 insert 方法，将 hr 标签插入 Delta 中，然后将其添加到 QuillController 中。

以上是向 QuillEditor 添加自定义标签的基本步骤。虽然添加自定义标签有些复杂，但一旦你弄清了它的工作方式，就会发现 QuillEditor 可以非常灵活地满足你的需求。