Flutter HTML转Quill Delta格式插件flutter_quill_delta_from_html的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter HTML转Quill Delta格式插件flutter_quill_delta_from_html的使用

flutter_quill_delta_from_html 是一个 Dart 包，用于将 HTML 输入转换为 Quill Delta 格式。这种格式被广泛应用于 Quill Js 编辑器中。

支持的HTML标签

文本格式化

  • <b>, <strong>: 加粗文本
  • <i>, <em>: 斜体文本
  • <u>, <ins>: 下划线文本
  • <s>, <del>: 删除线文本
  • <sup>: 上标文本
  • <sub>: 下标文本

标题

  • <h1> 到 <h6>: 各种级别的标题

列表和嵌套列表

  • <ul>: 无序列表
  • <ol>: 有序列表
  • <li>: 列表项
  • <li data-checked="true">: 带有复选框的列表项
  • <input type="checkbox">: 另一种创建带复选框列表项的方法

链接

  • <a>: 超链接（支持 href 属性）

图片

  • <img>: 图片（支持 src, align 和样式属性）

视频

  • <video>: 视频（支持 src 属性）

引用块

  • <blockquote>: 引用段落

代码块

  • <pre>, <code>: 代码块

文本对齐

  • <p style="text-align:left|center|right|justify">: 段落样式对齐
  • <p align="left|center|right|justify">: 段落对齐方式
  • <p dir="rtl">: 段落方向

自定义块

  • <pullquote data-author="john">: 自定义 HTML

快速开始

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_quill_delta_from_html: <latest_version>

然后在你的 Flutter 应用程序中导入并使用它：

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

void main() {
  String htmlContent = "<p>Hello, <b>world</b>!</p>";
  var delta = HtmlToDelta().convert(htmlContent);
/*
   { "insert": "hello, " },
   { "insert": "world", "attributes": {"bold": true} },
   { "insert": "!" },
   { "insert": "\n" }
*/
}

创建自定义 CustomHtmlPart

如果你需要处理自定义 HTML 标签，比如 <pullquote>，你可以定义自己的 CustomHtmlPart 类：

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
import 'package:html/dom.dart' as dom;

/// Custom block handler for <pullquote> elements.
class PullquoteBlock extends CustomHtmlPart {
  [@override](/user/override)
  bool matches(dom.Element element) {
    return element.localName == 'pullquote';
  }

  [@override](/user/override)
  List<Operation> convert(dom.Element element, {Map<String, dynamic>? currentAttributes}) {
    final Delta delta = Delta();
    final Map<String, dynamic> attributes = currentAttributes != null ? Map.from(currentAttributes) : {};

    final author = element.attributes['data-author'];
    final style = element.attributes['data-style'];

    if (author != null) {
      delta.insert('Pullquote: "${element.text}" by $author', attributes);
    } else {
      delta.insert('Pullquote: "${element.text}"', attributes);
    }

    if (style != null && style.toLowerCase() == 'italic') {
      attributes['italic'] = true;
    }

    delta.insert('\n', attributes);

    return delta.toList();
  }
}

接着，将你的 PullquoteBlock 添加到 HtmlToDelta 中：

import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

void main() {
  final htmlText = '''
    <html>
      <body>
        <p>Regular paragraph before the custom block</p>
        <pullquote data-author="John Doe" data-style="italic">This is a custom pullquote</pullquote>
        <p>Regular paragraph after the custom block</p>
      </body>
    </html>
  ''';

  final customBlocks = [PullquoteBlock()];
  final converter = HtmlToDelta(customBlocks: customBlocks);
  final delta = converter.convert(htmlText);
/*
This should be resulting delta
  {"insert": "Regular paragraph before the custom block"},
  {"insert": "Pullquote: \"This is a custom pullquote\" by John Doe", "attributes": {"italic": true}},
  {"insert": "\n"},
  {"insert": "Regular paragraph after the custom block\n"}
*/
}

完整示例 Demo

以下是一个完整的示例，展示了如何将 HTML 转换为 Quill Delta 格式，并将其显示在 flutter_quill 编辑器中：

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Quill Delta from HTML Example')),
        body: Center(child: QuillEditorFromHtml()),
      ),
    );
  }
}

class QuillEditorFromHtml extends StatefulWidget {
  [@override](/user/override)
  _QuillEditorFromHtmlState createState() => _QuillEditorFromHtmlState();
}

class _QuillEditorFromHtmlState extends State<QuillEditorFromHtml> {
  QuillController? _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    String htmlContent = """
      <p>This is a <b>bold</b> text and this is an <i>italic</i> text.</p>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
      </ul>
      <p><a href="https://example.com">Link to example.com</a></p>
    """;

    var delta = HtmlToDelta().convert(htmlContent);
    _controller = QuillController(document: Document.fromJson(delta), selection: TextSelection.collapsed(offset: 0));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: QuillEditor.basic(controller: _controller!, readOnly: false),
    );
  }
}

更多关于Flutter HTML转Quill Delta格式插件flutter_quill_delta_from_html的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter HTML转Quill Delta格式插件flutter_quill_delta_from_html的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_quill_delta_from_html插件将HTML内容转换为Quill Delta格式的示例代码。这个插件假设你已经有一个HTML字符串，并且你想将它转换为Quill Delta格式，通常用于富文本编辑器中。

首先，确保你已经将flutter_quill_delta_from_html插件添加到你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  flutter_quill_delta_from_html: ^最新版本号  # 请替换为实际可用的最新版本号

然后，运行flutter pub get来安装该依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤进行HTML到Quill Delta的转换：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:quill_delta/quill_delta.dart';
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
  1. 创建转换函数：
Future<Delta> convertHtmlToDelta(String html) async {
  try {
    // 使用 flutter_quill_delta_from_html 插件进行转换
    final delta = await htmlToDelta(html);
    return delta;
  } catch (e) {
    // 处理可能的错误
    print("Error converting HTML to Delta: $e");
    return Delta.empty();
  }
}
  1. 在你的UI中使用转换后的Delta：

假设你有一个TextEditingController用于处理文本输入，并且你有一个富文本编辑器（这里假设你使用的是支持Quill Delta的编辑器，比如quill_delta_rich_text_editor）。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();
  Delta? _delta;

  @override
  void initState() {
    super.initState();
    // 示例HTML内容
    String htmlContent = "<h1>Hello, World!</h1><p>This is a <b>bold</b> paragraph.</p>";
    convertHtmlToDelta(htmlContent).then((delta) {
      setState(() {
        _delta = delta;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HTML to Quill Delta Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 这里假设你有一个Quill Delta编辑器
              // 例如: QuillDeltaRichTextEditor(controller: _quillController, delta: _quillDelta),
              // 但为了简单起见，这里仅显示Delta内容（转换为字符串）
              if (_delta != null)
                Text(
                  _delta!.toJson().toString(),
                  style: TextStyle(fontSize: 16),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

注意：

  • 上述示例中，QuillDeltaRichTextEditor是一个假设的组件，实际使用时你需要使用支持Quill Delta的富文本编辑器组件。
  • delta.toJson().toString()仅用于演示目的，将Delta对象转换为JSON字符串。在实际应用中，你可能需要将Delta对象传递给富文本编辑器组件。

确保你已经安装了所有必要的依赖，并且根据你所使用的富文本编辑器组件的API文档进行适当的调整。

回到顶部