Search code examples
htmlflutterdartrich-text-editorflutter-packages

How to create a rich text editor that returns html results in Flutter?


My goal is to create a rich text editor that returns html results. I am using the package flutter_quill. It can only return plain text using _controller.document.toPlainText() and json using _controller.document.toDelta().toJson(). I also tried html_editor_enhanced before. It has some problems. When I click the text color button and the dialog is shown, I can't press one of the colors in the horizontal color list. The mouse is always a text mouse and I can enter text despite the dialog being displayed in front of the text field. Although the dialog is blocked, I can still write behind the text field. Also, I am using web (Chrome) to run the app. Are there any other rich text editors that can return html results or any way to return html results in flutter_quill? Appreciate if someone can advise. Thank you in advance!


Solution

  • I finally found a solution!

    I am using the following code to return html results:

    final convertedValue = jsonEncode(delta.toJson());
    final markdown = deltaToMarkdown(convertedValue);
    final html = markdownToHtml(markdown);