A highly customizable rich-text editor for Flutter
Preview | Customize your own theme |
---|---|
Change the color of your text | Format your text |
---|---|
Add the AppFlowy editor Flutter package to your environment.
flutter pub add appflowy_editor
flutter pub get
Start by creating a new empty AppFlowyEditor object.
final editorState = EditorState.blank(withInitialText: true); // with an empty paragraph
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 = jsonDecode('YOUR INPUT JSON STRING');
final editorState = EditorState(document: Document.fromJson(json));
final editor = AppFlowyEditor(
editorState: editorState,
);
Note: The parameters
localizationsDelegates
need to be assigned in MaterialApp widgetMaterialApp( 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
Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing theme.
Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing components.
Below are some examples of component customizations:
Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing shortcut events.
Below are some examples of shortcut event customizations:
Please refer to the migration documentation.
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.
All code contributed to the AppFlowy Editor project is dual-licensed, and released under both of the following licenses:
See LICENSE for more information.