custom_quill_html_editor

Description:

custom quill html editor

Quill Html Editor #
Quill Html Editor is a powerful HTML rich text editor designed for Android, iOS, and Web platforms. It leverages the capabilities of the QuillJs library, an open-source WYSIWYG editor, to provide a feature-rich editing experience for modern web applications.
Features #

Highly customizable Editor and Toolbar widgets.
Supports the Delta format, allowing you to set and retrieve content using setDelta and getDelta methods.
Enables seamless copy-pasting of rich text from other files or webpages.
The detached Toolbar can be placed anywhere on the page to suit your requirements.
Provides the flexibility to add custom buttons to the toolbar.
Supports embedding of images, videos, and insertion of tables.
Allows setting and retrieving text in both HTML and Delta formats.
Supports integration with Google Fonts for a wide range of font options.

Demo #
To experience the capabilities of the Quill Html Editor, you can visit our Demo Page. Explore the editor's functionalities and see how it can enhance your web editing experience.
Screenshots #



















Documentation #
See the API documentation for details on the following topics:

Getting started
Quill Html Editor Usage
Quill Controller Usage
ToolBar Usage

Usage #
Define a QuillEditorController to access the editor methods, pass the controller to QuillHtmlEditor Widget
final QuillEditorController controller = QuillEditorController();
copied to clipboard
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'),
onEditingComplete: (s) => debugPrint('Editing completed $s'),
onEditorResized: (height) =>
debugPrint('Editor resized $height'),
onSelectionChanged: (sel) =>
debugPrint('${sel.index},${sel.length}'),
loadingBuilder: (context) {
return const Center(
child: CircularProgressIndicator(
strokeWidth: 0.4,
));},
),
copied to clipboard
Define ToolBar widget and pass the same controller created for 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)),
],
)
copied to clipboard
ToolBar Scroll Configuration #
The ToolBar.scroll widget allows you to display the toolbar buttons in a single row or column, based on the specified direction parameter. By default, the direction is set to Axis.horizontal, which arranges the buttons in a single row.
To change the direction and display the buttons in a single column, you can provide the direction parameter as Axis.vertical. Here's an example:
ToolBar.scroll(
toolBarColor: _toolbarColor,
controller: controller,
direction: Axis.vertical,
),
copied to clipboard
In the above example, the ToolBar.scroll widget is used to display the toolbar buttons in a vertical arrangement.
Customizing Toolbar Buttons #
The ToolBar widget allows you to customize the buttons that are displayed in the toolbar. By default, if the toolBarConfig parameter is not provided, all the toolbar buttons will be shown.
If you want to show only specific buttons, you can pass a list of ToolBarStyle types to the toolBarConfig parameter. For example:
final customToolBarList = [
ToolBarStyle.bold,
ToolBarStyle.italic,
ToolBarStyle.align,
ToolBarStyle.color,
];

ToolBar(
controller: controller,
toolBarConfig: customToolBarList,
),
copied to clipboard
In the above example, only the "Bold," "Italic," "Align," and "Color" buttons will be displayed in the toolbar.
Additionally, you can add custom buttons to the toolbar by providing a list of custom widgets to the customButtons parameter. Here's an example:
final customButtons = [
InkWell(onTap: () {}, child: const Icon(Icons.favorite)),
InkWell(onTap: () {}, child: const Icon(Icons.add_circle)),
];

ToolBar(
controller: controller,
customButtons: customButtons,
),
copied to clipboard
In the above example, custom buttons with heart and add circle icons are added to the toolbar.
Feel free to customize the toolbar configuration and add custom buttons according to your requirements to enhance the editing experience with the Quill Html Editor.
Custom Fonts in Quill Html Editor #
You can pass custom fonts to the text style in the quill_html_editor package by following these steps:
Define your custom font family in your Flutter project. You can use Google Fonts. Let's assume you want to use the 'Roboto' font family.

final _editorTextStyle = const TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.normal,
fontFamily: 'Roboto',
);

copied to clipboard
By following these steps, you can pass custom font styles to the text within the QuillHtmlEditor widget. The fontFamily property of the TextStyle allows you to specify the desired font family, such as 'Roboto' in this example.
To get the html string from editor
String? htmlText = await controller.getText();
copied to clipboard
To set the html string to editor
await controller.setText(text);
copied to clipboard
To get the text in delta format
await controller.getDelta();
copied to clipboard
To set the text in delta format
controller.setDelta(deltaMap);
copied to clipboard
To insert the html string to editor
/// index is optional
/// If the index is not passed, the text will be inserted at the cursor position
await controller.insertText(text, index: 10);
copied to clipboard
To clear the editor
controller.clear();
copied to clipboard
To enable editor
controller.enableEditor(true);
copied to clipboard
To disable editor
controller.enableEditor(false);
copied to clipboard
Todo #

CustomStyleButton - Let the user add own icons to toolbar styles
Custom Color - Let the user add more Colors to the Color Picker
Custom FontSize - Let the user add custom font sizes, instead of just Small, Normal, Large & Huge
AsyncImagePickerButton - To share picked file to user, to upload it asynchronously and inserts the returned link into the editor
More examples for each available apis


MIT License #
Copyright (c) 2022 Pavan Kumar Nagulavancha
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.