富文本编辑器

支持多种格式选项的 Flutter WYSIWYG 编辑器。

基于 https://github.com/dankito/RichTextEditor，但适用于 Flutter。

✨ 特点

  • [x] 加粗、斜体、下划线、删除线、下标、上标
  • [x] 标题 1 - 6、正文、预格式化、引用块
  • [x] 字体（读取所有系统字体）（仅限 Android）
  • [x] 字号
  • [x] 文字颜色
  • [x] 文字背景色
  • [x] 高亮文本
  • [x] 左对齐、居中、右对齐、引用块
  • [x] 缩进、取消缩进
  • [x] 撤销、重做
  • [x] 无序列表（项目符号）
  • [x] 有序列表（编号）
  • [x] 插入本地或远程图片
  • [x] 插入链接
  • [x] 插入复选框
  • [ ] 搜索
  • [ ] 图标指示器

? 截图

用法

      // 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;
        },
      )

从编辑器获取当前 HTML

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

设置焦点和取消焦点

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

清空编辑器内容

await keyEditor.currentState?.clear();

自定义工具栏

如果您有兴趣创建自己的工具栏，请查看示例中的
custom_toolbar_demo.dart 文件

GitHub

https://github.com/JideGuru/rich_editor