A highly customizable rich-text editor for Flutter
- Build rich, intuitive editors
- Design and modify an ever expanding list of customizable features including
- components (such as form input controls, numbered lists, and rich text widgets)
- shortcut events
- menu options (coming soon!)
- Test-coverage and ongoing maintenance by AppFlowy’s core team and community of more than 1,000 builders
Add the AppFlowy editor Flutter package to your environment.
flutter pub add appflowy_editor flutter pub get
Creating Your First Editor
Start by creating a new empty AppFlowyEditor object.
final editorState = EditorState.empty(); // an empty state final editor = AppFlowyEditor( editorState: editorState, );
You can also create an editor from a JSON object in order to configure your initial state. Or you can create an editor from Markdown or Quill Delta.
final json = ...; final editorState = EditorState(Document.fromJson(data)); final editor = AppFlowyEditor( editorState: editorState, );
Note: The parameters
localizationsDelegatesneed to be assigned in MaterialApp widget
MaterialApp( localizationsDelegates: const [ AppFlowyEditorLocalizations.delegate, ]， );
To get a sense of how the AppFlowy Editor works, run our example:
git clone https://github.com/AppFlowy-IO/appflowy-editor.git flutter pub get flutter run
Customizing Your Editor
Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing components.
Below are some examples of component customizations:
- Checkbox Text demonstrates how to extend new styles based on existing rich text components
- Image demonstrates how to extend a new node and render it
- See further examples of rich-text plugins
Customizing Shortcut Events
Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing shortcut events.
Below are some examples of shortcut event customizations:
- BIUS demonstrates how to make text bold/italic/underline/strikethrough through shortcut keys
- Paste HTML gives you an idea on how to handle pasted styles through shortcut keys
- Need more examples? Check out Internal key event handlers
Please refer to the API documentation.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
Please look at CONTRIBUTING.md for details.
Distributed under the AGPLv3 License. See LICENSE for more information.