Go to file
2021-06-04 17:26:21 +01:00
assets/editor feat: added editor specific features 2021-05-29 22:36:44 +01:00
example refactor: used flutter_inappwebview instead of webview_flutter 2021-06-04 13:58:03 +01:00
lib Restyled by whitespace 2021-06-04 12:58:17 +00:00
res chore: prepare release 2021-05-31 16:52:29 +01:00
test feat: added more editor settings 2021-06-03 00:37:45 +01:00
.gitignore first commit 2021-05-26 23:42:34 +01:00
.metadata first commit 2021-05-26 23:42:34 +01:00
CHANGELOG.md chore: prepare release 2021-05-31 16:52:29 +01:00
LICENSE feat: added editor settings 2021-05-31 22:19:49 +01:00
pubspec.lock refactor: used flutter_inappwebview instead of webview_flutter 2021-06-04 13:58:03 +01:00
pubspec.yaml Restyled by prettier-yaml 2021-06-04 12:58:17 +00:00
README.md Restyled by prettier-markdown 2021-06-04 12:58:16 +00:00

rich_editor

pub package pub points

WYSIWYG editor for Flutter with a rich set of supported formatting options.

Based on https://github.com/dankito/RichTextEditor, but for Flutter.

Features

  • Bold, Italic, Underline, Strike through, Subscript, Superscript
  • Heading 1 - 6, Text body, Preformatted, Block quote
  • Font (reads all system fonts) (Android only)
  • Font Size
  • Text Color
  • Text Background Color
  • Highlight text
  • Justify Left, Center, Right, Blockquote
  • Indent, Outdent
  • Undo, Redo
  • Unordered List (Bullets)
  • Ordered List (Numbers)
  • Insert local or remote Image
  • Insert Link
  • Insert Checkbox
  • Search
  • Icon indicators

📸 Screenshots

Usage

      // 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

String? html = await keyEditor.currentState?.getHtml();
print(html);

Set Focus and Unfocus

await keyEditor.currentState?.focus();
await keyEditor.currentState?.unFocus();

Clear Editor content

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.