mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
feat: #1649 add document for importing data
This commit is contained in:
parent
2fb0e8da28
commit
50f9ac1657
@ -1,14 +1,14 @@
|
||||
<!--
|
||||
<!--
|
||||
This README describes the package. If you publish this package to pub.dev,
|
||||
this README's contents appear on the landing page for your package.
|
||||
|
||||
For information about how to write a good package README, see the guide for
|
||||
[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
|
||||
[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
|
||||
|
||||
For general information about developing packages, see the Dart guide for
|
||||
[creating packages](https://dart.dev/guides/libraries/create-library-packages)
|
||||
and the Flutter guide for
|
||||
[developing packages and plugins](https://flutter.dev/developing-packages).
|
||||
[developing packages and plugins](https://flutter.dev/developing-packages).
|
||||
-->
|
||||
|
||||
<h1 align="center"><b>AppFlowy Editor</b></h1>
|
||||
@ -51,7 +51,7 @@ flutter pub get
|
||||
|
||||
## Creating Your First Editor
|
||||
|
||||
Start by creating a new empty AppFlowyEditor object.
|
||||
Start by creating a new empty AppFlowyEditor object.
|
||||
|
||||
```dart
|
||||
final editorState = EditorState.empty(); // an empty state
|
||||
@ -60,7 +60,7 @@ final editor = AppFlowyEditor(
|
||||
);
|
||||
```
|
||||
|
||||
You can also create an editor from a JSON object in order to configure your initial state.
|
||||
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](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/importing.md).
|
||||
|
||||
```dart
|
||||
final json = ...;
|
||||
@ -79,7 +79,7 @@ MaterialApp(
|
||||
);
|
||||
```
|
||||
|
||||
To get a sense for how the AppFlowy Editor works, run our example:
|
||||
To get a sense of how the AppFlowy Editor works, run our example:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/AppFlowy-IO/AppFlowy.git
|
||||
@ -98,7 +98,7 @@ Below are some examples of component customizations:
|
||||
* [Checkbox Text](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/checkbox_text.dart) demonstrates how to extend new styles based on existing rich text components
|
||||
* [Image](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/network_image_node_widget.dart) demonstrates how to extend a new node and render it
|
||||
* See further examples of [rich-text plugins](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text)
|
||||
|
||||
|
||||
### Customizing Shortcut Events
|
||||
|
||||
Please refer to our documentation on customizing AppFlowy for a detailed discussion about [customizing shortcut events](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customize-a-shortcut-event).
|
||||
@ -113,7 +113,7 @@ Below are some examples of shortcut event customizations:
|
||||
Please refer to the API documentation.
|
||||
|
||||
## Contributing
|
||||
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
|
||||
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](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) for details.
|
||||
|
||||
|
@ -0,0 +1,36 @@
|
||||
# Importing data
|
||||
|
||||
For now, we have supported three ways to import data to initialize AppFlowy Editor.
|
||||
|
||||
1. From AppFlowy Document JSON
|
||||
|
||||
```dart
|
||||
const document = r'''{"document":{"type":"editor","children":[{"type":"text","attributes":{"subtype":"heading","heading":"h1"},"delta":[{"insert":"Hello AppFlowy!"}]}]}}''';
|
||||
final json = jsonDecode(document);
|
||||
final editorState = EditorState(
|
||||
document: Document.fromJson(
|
||||
Map<String, Object>.from(json),
|
||||
),
|
||||
);
|
||||
```
|
||||
|
||||
2. From Markdown
|
||||
|
||||
```dart
|
||||
const markdown = r'''# Hello AppFlowy!''';
|
||||
final editorState = EditorState(
|
||||
document: markdownToDocument(markdown),
|
||||
);
|
||||
```
|
||||
|
||||
3. From Quill Delta
|
||||
|
||||
```dart
|
||||
const delta = r'''[{"insert":"Hello AppFlowy!"},{"attributes":{"header":1},"insert":"\n"}]''';
|
||||
final json = jsonDecode(delta);
|
||||
final editorState = EditorState(
|
||||
document: DeltaDocumentConvert().convertFromJSON(json),
|
||||
);
|
||||
```
|
||||
|
||||
For more details, please refer to the function `_importFile` through this [link](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/home_page.dart).
|
Loading…
Reference in New Issue
Block a user