Flutter富文本HTML编辑器插件yjy_quill_html_editor的使用

Flutter富文本HTML编辑器插件yjy_quill_html_editor的使用

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

功能

  • 高度可定制化的编辑器和工具栏小部件。
  • 支持Delta格式，可以通过setDelta方法传递Delta，并用getDelta方法获取。
  • 支持从其他文件或网页复制粘贴富文本。
  • 因为工具栏完全独立于编辑器，所以可以放置在页面的任何位置。
  • 可以向工具栏添加自定义按钮。
  • 支持嵌入图片、视频、插入表格。
  • 可以设置或获取文本的HTML/Delta格式。

Quill Html Editor Demo

请访问演示页面来体验Web上的Quill编辑器。

截图

文档

详情请参阅以下文档：

使用

首先，定义一个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组件，并将相同的controller传递给QuillHtmlEditor。

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)),
  ],
)

注意: 如果不传递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字符串

await controller.insertText(text, index: 10);  // index是可选参数
// 如果未传递索引，则文本将在光标位置插入

清除编辑器

controller.clear();

启用编辑器

controller.enableEditor(true);

禁用编辑器

controller.enableEditor(false);

更多关于Flutter富文本HTML编辑器插件yjy_quill_html_editor的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter富文本HTML编辑器插件yjy_quill_html_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


yjy_quill_html_editor 是一个基于 Flutter 的富文本编辑器插件，它允许你在 Flutter 应用中使用 HTML 格式的富文本编辑功能。以下是使用 yjy_quill_html_editor 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 yjy_quill_html_editor 依赖。

dependencies:
  flutter:
    sdk: flutter
  yjy_quill_html_editor: ^1.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 yjy_quill_html_editor 包。

import 'package:yjy_quill_html_editor/yjy_quill_html_editor.dart';

3. 使用 YjyQuillHtmlEditor

你可以在你的 Flutter 应用中使用 YjyQuillHtmlEditor 组件来创建一个富文本编辑器。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final YjyQuillHtmlController _controller = YjyQuillHtmlController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML Editor'),
      ),
      body: Column(
        children: [
          Expanded(
            child: YjyQuillHtmlEditor(
              controller: _controller,
              hintText: 'Type something...',
            ),
          ),
          ElevatedButton(
            onPressed: () async {
              String htmlContent = await _controller.getHtml();
              print(htmlContent);
            },
            child: Text('Get HTML'),
          ),
        ],
      ),
    );
  }
}

4. 控制器的使用

YjyQuillHtmlController 提供了多种方法来控制编辑器内容，例如获取 HTML 内容、设置 HTML 内容等。

  • 获取 HTML 内容：

    String htmlContent = await _controller.getHtml();

  • 设置 HTML 内容：

    _controller.setHtml('<p>Hello, World!</p>');

  • 清除编辑器内容：

    _controller.clear();

5. 自定义样式

你可以通过 YjyQuillHtmlEditor 的 customStyles 参数来自定义编辑器的样式。

YjyQuillHtmlEditor(
  controller: _controller,
  hintText: 'Type something...',
  customStyles: {
    'h1': 'color: red; font-size: 24px;',
    'p': 'color: blue; font-size: 16px;',
  },
);

6. 处理编辑器事件

你可以通过 onTextChanged 回调来处理文本变化事件。

YjyQuillHtmlEditor(
  controller: _controller,
  hintText: 'Type something...',
  onTextChanged: (String text) {
    print('Text changed: $text');
  },
);
回到顶部