dart - 如何在 Quill 文本编辑器 (Flutter) 中监听文本更改

Question

我只熟悉HTML/CSS/JS，以及dart/flutter的基础知识

开发人员级别：初级
项目类型和语言：我正在为自己开发一个笔记应用程序，使用flutter。

我的目标是在更新文本后立即保存我的笔记...为此我需要使用 dart 函数在每个“文本更改”事件上运行..

如何使用 Quill Editor 的

Text-Changes

事件来检测内容的更改

下面给出了 JavaScript 中的等效项，但我不知道如何使用 DART 和 Flutter。

quill.on('text-change', function(delta, oldDelta, source) {
  if (source == 'api') {
    console.log("An API call triggered this change.");
  } else if (source == 'user') {
    console.log("A user action triggered this change.");
  }
});

Answer 1

您可以监听 quill 文档更改流并进行相应处理。

_controller.document.changes.listen((event) {
  print(event.item1); //Delta
  print(event.item2); //Delta
  print(event.item3); //ChangeSource
});

Answer 2

要监听并检测 Quill 编辑器中的更改，您可以使用

QuillController

，它提供了一种管理 Quill 编辑器状态并与之交互的方法。以下是该过程的细分：

1. 初始化：首先，创建并初始化一个

   QuillController

   实例。该控制器链接到 Quill 编辑器，并允许监视文本更改。

   late QuillController _quillController = QuillController.basic();
   

2. 监听文本更改：要检测编辑器内容的更改，请在初始化后立即向

   QuillController

   添加监听器，通常在小部件的

   initState

   方法内。每当编辑器中的文本发生更改时，此侦听器都会触发回调函数。

   @override
   void initState() {
     super.initState();
     _quillController.addListener(_onEditorTextChanged);
   }
   

3. 处理文本更改：只要编辑器的内容发生更改，就会调用回调函数

   _onEditorTextChanged

   。在此函数中，您可以访问编辑器的当前文本并执行任何必要的逻辑，例如解析文本以获取特定模式或根据文本内容更新小部件的状态。

   void _onEditorTextChanged() {
     final text = _quillController.document.toPlainText();
     // Implement your logic here, such as searching for URLs or updating the UI.
   }
   

4. Cleanup：在处理小部件时删除侦听器非常重要，以防止内存泄漏或意外行为。这是通过

   dispose

   方法完成的。

   @override
   void dispose() {
     _quillController.removeListener(_onEditorTextChanged);
     super.dispose();
   }
   

Answer 3

我也遇到这个问题了。经过几个小时的研究，我找到了解决方案。您必须向

QuillController

添加一个侦听器，该侦听器将在每个编辑器事件（例如按键或工具栏操作）上调用。 使用 State 类中的

initState()

方法添加侦听器。

class _TextEditorState extends State<TextEditor> {

  final QuillController _controller = QuillController.basic();

  @override
  void initState() {
      _controller.addListener(() {
      print('Here I am, rock me like a hurricane!!!');
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // Build your Widget with QuillToolbar and QuillEditor here...
  }
});

Answer 4

这是如何完成的：

await for (final change in _quillEditorController.changes) {
  final oldDelta = change.toList()[0];
  final changeDelta = change.toList()[1];
  final changeSource = change.toList()[2];

  if (changeSource == ChangeSource.REMOTE) {
    console.log("An API call triggered this change.");
  } else if (changeSource == ChangeSource.LOCAL) {
    console.log("A user action triggered this change.");
  }
}

请注意，flutter-quill 的 api 与 quill.js 并不完全匹配。由于缺乏文档，您了解可用内容的最大希望是使用编辑器深入研究代码库（例如使用“转到定义”）。