If the Quill editor has only image tags or iframe tags, getText() method returns an empty string.
I'd like the get ALL the HTML contents in the QuillEditorController at once.
import 'package:flutter/material.dart';
import 'package:quill_html_editor/quill_html_editor.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}
const Color quillWidgetsBackColor = Color.fromARGB(255, 122, 160, 194);
const Color buttonColors = Color.fromARGB(255, 40, 98, 150);
const Color backgroundColor = Color.fromARGB(255, 38, 65, 88);
const double buttonHeights = 50;
const Color iconColors = Colors.white;
const TextStyle textStyle = TextStyle(color: Colors.white, fontSize: 18);
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final QuillEditorController controller = QuillEditorController();
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: true,
bottomNavigationBar: AdvancedQuillToolbar(quillEditorController: controller),
body: Container(
padding: const EdgeInsets.all(20),
color: backgroundColor,
height: MediaQuery.of(context).size.height,
child: ListView(
children: [
AdvancedQuillEditor(quillEditorController: controller),
const SizedBox(height: 16),
_insertImageButton(),
const SizedBox(height: 16),
_insertVideoLinkButton(),
const SizedBox(height: 16),
_printHtmlEditorTextInConsole(),
],
),
),
),
);
}
Widget _insertImageButton() {
return Container(
height: buttonHeights,
color: buttonColors,
child: TextButton(
child: const Text('insert img', style: textStyle),
onPressed: () async => await controller.insertText(
'<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">',
),
),
);
}
Widget _insertVideoLinkButton() {
return Container(
height: buttonHeights,
color: buttonColors,
child: TextButton(
child: const Text('insert iframe', style: textStyle),
onPressed: () async => await controller.insertText(
'<iframe src="https://www.youtube.com/embed/JCDfh5bs1xc" width="100%" height="315"</iframe>',
),
),
);
}
Widget _printHtmlEditorTextInConsole() {
return Container(
height: buttonHeights,
color: buttonColors,
child: TextButton(
child: const Text('print html text value on console', style: textStyle),
onPressed: () async => debugPrint(await controller.getText()),
),
);
}
}
@immutable
class AdvancedQuillToolbar extends StatelessWidget {
const AdvancedQuillToolbar({
super.key,
required this.quillEditorController,
});
final QuillEditorController quillEditorController;
@override
Widget build(BuildContext context) {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: ToolBar(
controller: quillEditorController,
padding: const EdgeInsets.all(5),
toolBarColor: quillWidgetsBackColor,
activeIconColor: iconColors,
iconColor: iconColors,
),
);
}
}
@immutable
class AdvancedQuillEditor extends StatelessWidget {
const AdvancedQuillEditor({
super.key,
required this.quillEditorController,
});
final QuillEditorController quillEditorController;
@override
Widget build(BuildContext context) {
return QuillHtmlEditor(
controller: quillEditorController,
backgroundColor: quillWidgetsBackColor,
minHeight: 1,
hintTextAlign: TextAlign.start,
hintText: 'This is the hint text of the quill editor',
textStyle: textStyle,
hintTextStyle: textStyle,
padding: const EdgeInsets.all(5),
);
}
}