quill_html_editor

Quill Html Editor 是一个适用于 Android、iOS 和 Web 的 HTML 富文本编辑器，它基于强大的 QuillJs 库构建，QuillJs 是一个用于现代 Web 的开源 WYSIWYG 编辑器。

功能

  • 高度可定制的编辑器和工具栏小部件
  • 支持 Delta 格式，可以使用 setDelta 方法传递 delta，并使用 getDelta 方法获取 delta。
  • 支持从其他文件或网页复制粘贴富文本
  • 由于工具栏完全独立于编辑器，因此可以根据需求将其放置在页面上的任何位置
  • 我们也可以在工具栏中添加自定义按钮
  • 支持嵌入图片、视频、插入表格
  • 以 html/delta 格式设置或获取文本
  • 支持Google 字体

Quill Html Editor 演示

请访问 演示页面 在 Web 上试用 Quill Editor

屏幕截图

1

1

文档

有关以下主题的详细信息，请参阅 API 文档

用法

定义一个 QuillEditorController 来访问编辑器方法，并将控制器传递给 QuillHtmlEditor 小部件

  final QuillEditorController controller = QuillEditorController();

     QuillHtmlEditor(
        text: "<h1>Hello</h1>This is a quill html editor example ?",
        hintText: 'Hint text goes here',
        controller: controller,
        isEnabled: true,
        minHeight: 300,
        textStyle: _editorTextStyle,
        hintTextStyle: _hintTextStyle,
        hintTextAlign: TextAlign.start,
        padding: const EdgeInsets.only(left: 10, top: 5),
        hintTextPadding: EdgeInsets.zero,
        backgroundColor: _backgroundColor,
        onFocusChanged: (hasFocus) => debugPrint('has focus $hasFocus'),
        onTextChanged: (text) => debugPrint('widget text change $text'),
        onEditorCreated: () => debugPrint('Editor has been loaded'),
        onEditorResized: (height) =>
        debugPrint('Editor resized $height'),
        onSelectionChanged: (sel) =>
        debugPrint('${sel.index},${sel.length}')
      ),

定义 ToolBar 小部件，并传递给 QuillHtmlEditor 创建的相同 controller

   ToolBar(
        toolBarColor: Colors.cyan.shade50,
        activeIconColor: Colors.green,
        padding: const EdgeInsets.all(8),
        iconSize: 20,
        controller: controller,
        customButtons: [
        InkWell(onTap: () {}, child: const Icon(Icons.favorite)),
        InkWell(onTap: () {}, child: const Icon(Icons.add_circle)),
  ],
)

ToolBar.scroll 根据 direction 将小部件显示为单行/单列。默认值为 [Axis.horizontal]

   ToolBar.scroll(
	toolBarColor: _toolbarColor,
	controller: controller,
	direction: Axis.vertical,
   ),

注意：如果未将 toolBarConfig 传递给 ToolBar，它将显示所有工具栏按钮。要仅显示必需的按钮，请按照如下所示在列表中指定类型。

    final customToolBarList = [
  ToolBarStyle.bold,
  ToolBarStyle.italic,
  ToolBarStyle.align,
  ToolBarStyle.color,
];

ToolBar(
controller: controller,
toolBarConfig: customToolBarList
),

我们也可以像下面这样在我们的 ToolBar 中添加自定义按钮

    final customButtons =  [
  InkWell(onTap: () {}, child: const Icon(Icons.favorite)),
  InkWell(onTap: () {}, child: const Icon(Icons.add_circle)),
];

ToolBar(
controller: controller,
customButtons:customButtons
),
从编辑器获取 html 字符串
  String? htmlText = await controller.getText();
将 html 字符串设置为编辑器
 await controller.setText(text);
以 delta 格式获取文本
 await controller.getDelta();
以 delta 格式设置文本
 controller.setDelta(deltaMap);
将 html 字符串插入编辑器

/// index is optional
/// If the index is not passed, the text will be inserted at the cursor position
await controller.insertText(text, index: 10);
清除编辑器
  controller.clear();
启用编辑器
  controller.enableEditor(true);
禁用编辑器
  controller.enableEditor(false);

待办事项

  • CustomStyleButton – 允许用户为工具栏样式添加自己的图标
  • Custom Color – 允许用户为颜色选择器添加更多颜色
  • Custom FontSize – 允许用户添加自定义字体大小，而不仅仅是小型、正常、大型和超大
  • AsyncImagePickerButton – 用于将选取的图片分享给用户，异步上传并将其返回的链接插入编辑器
  • Custom FontStyles – 允许用户选择编辑器的支持的字体样式
  • 每个可用 API 的更多示例

MIT 许可

版权 (c) 2022 Pavan Kumar Nagulavancha

兹授予任何获得本软件及相关文档文件（“软件”）副本的个人免费使用许可，不受限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许接收本软件的人员这样做，但须遵守以下条件：

以上版权声明和本许可声明应包含在软件的所有副本或实质性部分中。

本软件按“原样”提供，不附带任何形式的保证，无论是明示的还是暗示的，包括但不限于适销性、特定用途的适用性和非侵权性的保证。在任何情况下，作者或版权所有者均不对任何索赔、损害或其他责任负责，无论是合同、侵权或其他形式的诉讼，无论是由软件的使用或交易引起的，或与之相关的。

GitHub

查看 Github