Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jideguru/rich_editor
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)
https://github.com/jideguru/rich_editor
editor flutter flutter-html-editor html-editor text-editor
Last synced: 7 days ago
JSON representation
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)
- Host: GitHub
- URL: https://github.com/jideguru/rich_editor
- Owner: JideGuru
- License: apache-2.0
- Created: 2021-05-26T22:42:13.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-21T12:23:04.000Z (12 months ago)
- Last Synced: 2024-10-19T03:04:03.914Z (20 days ago)
- Topics: editor, flutter, flutter-html-editor, html-editor, text-editor
- Language: Dart
- Homepage: https://pub.dev/packages/rich_editor
- Size: 2.86 MB
- Stars: 123
- Watchers: 5
- Forks: 37
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ✨ rich_editor
[](https://pub.dartlang.org/packages/rich_editor)
[](https://pub.dev/packages/rich_editor/score)
WYSIWYG editor for Flutter with a rich set of supported formatting options.
Based on https://github.com/dankito/RichTextEditor, but for Flutter.
## ✨ Features
- [x] Bold, Italic, Underline, Strike through, Subscript, Superscript
- [x] Heading 1 - 6, Text body, Preformatted, Block quote
- [x] Font (reads all system fonts) (Android only)
- [x] Font Size
- [x] Text Color
- [x] Text Background Color
- [x] Highlight text
- [x] Justify Left, Center, Right, Blockquote
- [x] Indent, Outdent
- [x] Undo, Redo
- [x] Unordered List (Bullets)
- [x] Ordered List (Numbers)
- [x] Insert local or remote Image
- [x] Insert Link
- [x] Insert Checkbox
- [ ] Search
- [ ] Icon indicators
## 📸 Screenshots
## Usage
```dart
// Insert widget into tree
RichEditor(
key: keyEditor,
value: 'initial html here',
editorOptions: RichEditorOptions(
placeholder: 'Start typing',
// backgroundColor: Colors.blueGrey, // Editor's bg color
// baseTextColor: Colors.white,
// editor padding
padding: EdgeInsets.symmetric(horizontal: 5.0),
// font name
baseFontFamily: 'sans-serif',
// Position of the editing bar (BarPosition.TOP or BarPosition.BOTTOM)
barPosition: BarPosition.TOP,
),
// You can return a Link (maybe you need to upload the image to your
// storage before displaying in the editor or you can also use base64
getImageUrl: (image) {
String link = 'https://avatars.githubusercontent.com/u/24323581?v=4';
String base64 = base64Encode(image.readAsBytesSync());
String base64String = 'data:image/png;base64, $base64';
return base64String;
},
)
```
Get current HTML from editor
```dart
String? html = await keyEditor.currentState?.getHtml();
print(html);
```
Set Focus and Unfocus
```dart
await keyEditor.currentState?.focus();
await keyEditor.currentState?.unFocus();
```
Clear Editor content
```dart
await keyEditor.currentState?.clear();
```
### Custom Toolbar
If you're interested in creating your own toolbar check the
custom_toolbar_demo.dart in the example
## License
Copyright 2021 JideGuru
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.