singerdmx / flutter-quill

Rich text editor for Flutter
https://pub.dev/packages/flutter_quill
MIT License
2.6k stars 840 forks source link

How to make a menu pop up when a specific characters is entered #2336

Open zhujiaming opened 1 month ago

zhujiaming commented 1 month ago

Is there an existing issue for this?

The question

How to monitor the input of a specific character,I want to do some actions after inputting the specified characters.

CatHood0 commented 4 weeks ago

You can use CharacterShortcutEvent which are events that are captured once the specified character is detected. You can see this also in Customizing shortcuts

In this case I give you an example of this:

CharacterShortcutEvent aCharCallEvent = CharacterShortcutEvent(
  key: 'When "a" is pressed then this will be called',
  character: 'a',
  handler: (QuillController controller) {
     //whatever what you want to call 
  },
);

Then, apply this new event to the editor:

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

class QuillEditorExample extends StatelessWidget {
  const QuillEditorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return QuillEditor(
      scrollController: <your_scrollController>,
      focusNode: <your_focusNode>,
      controller: <your_controller>,
      configurations: QuillEditorConfigurations(
        characterShortcutEvents: [
           aCharCallEvent,
        ],
      ),
    );
  }
}