There are different ways to convert HTML into Delta in Flutter Quill. Here are two options:
Option 1: Use flutterhtml package The flutterhtml package can be used to parse HTML code into a widget tree. Once the HTML is parsed into widgets, the widget tree can be converted into Delta by iterating through the widgets and extracting the text and formatting information. Here is an example code snippet:
import 'dart:convert';
import 'package:flutter_quill/models/quill_delta.dart';
import 'package:flutter_html/flutter_html.dart';
// HTML string
final html = '<p>Hello <b>world</b>!</p>';
// Parse HTML to widget tree and extract Delta
final widget = Html(data: html);
final delta = widgetToDelta(widget);
QuillDelta widgetToDelta(Widget widget) {
final delta = QuillDelta();
_parseWidget(widget, delta);
return delta;
}
void _parseWidget(Widget widget, QuillDelta delta) {
if (widget is Text) {
final text = widget.data;
if (text.isNotEmpty) {
final attrs = Map<String, dynamic>(); // add formatting attributes here
delta.insert(text, attrs);
}
} else if (widget is RichText) {
final text = widget.text.data;
if (text.isNotEmpty) {
final attrs = Map<String, dynamic>(); // add formatting attributes here
delta.insert(text, attrs);
}
} else if (widget is Container) {
widget.child?.accept(_ParseWidgetVisitor(delta));
} else {
for (final child in (widget as MultiChildRenderObjectWidget).children) {
_parseWidget(child, delta);
}
}
}
class _ParseWidgetVisitor extends ChildVisitor {
final QuillDelta delta;
_ParseWidgetVisitor(this.delta);
@override
void visit(Widget widget) {
_parseWidget(widget, delta);
}
}
Option 2: Use html/parser package The html/parser package can be used to parse HTML code into a DOM tree. Once the HTML is parsed into the DOM tree, the tree can be traversed to extract the text and formatting information, and convert it into Delta. Here is an example code snippet:
import 'dart:convert';
import 'package:flutter_quill/models/quill_delta.dart';
import 'package:html/parser.dart' as html;
// HTML string
final htmlString = '<p>Hello <b>world</b>!</p>';
// Parse HTML to DOM tree and extract Delta
final document = html.parse(htmlString);
final delta = domToDelta(document);
QuillDelta domToDelta(html.Document document) {
final delta = QuillDelta();
_parseElement(document.body, delta);
return delta;
}
void _parseElement(html.Element element, QuillDelta delta) {
for (final node in element.nodes) {
if (node.nodeType == html.Node.ELEMENT_NODE) {
final childElement = node as html.Element;
final attrs = Map<String, dynamic>(); // add formatting attributes here
if (childElement.localName == 'b') {
attrs['bold'] = true;
} else if (childElement.localName == 'i') {
attrs['italic'] = true;
}
_parseElement(childElement, delta);
attrs.forEach((key, value) => delta.format(key, value));
} else if (node.nodeType == html.Node.TEXT_NODE) {
final text = node.text.trim();
if (text.isNotEmpty) {
delta.insert(text);
}
}
}
}
Either option can be used to convert HTML into Delta in Flutter Quill.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-01-19 11:00:00 +0000
Seen: 9 times
Last updated: Jul 26 '22
How can zooming similar to desktop be achieved in HTML webview browser using Flutter?
In what way can the appleID signin be utilized in flutter?
How to maintain state across different pages using flutter?
How can I change a CameraImage Stream into bytes or a file in Flutter?
How can the current page context be obtained by a Flutter GetX controller?