Using the widget in readonly mode

[sundar-rajavelu]

In my solution, I use html-editor-enhanced for users to add rich content in the admin-app and present that content to client-users in the client-app using flutter_html. I ran into issues with formatting mismatches between these two widgets. For example, image float left/right or sizing does not work the same. In essence, WYSIWYG is impacted greatly.

So, I decided to use html-editor-enhanced on both my admin and client apps. On the client-app, the html-editor-enhanced widget would be used in disabled (read-only) mode with the toolbar hidden [FYI: There is a bug in this combination ie. disabling and hiding the toolbar at the same time - I will submit an issue ticket separately].

To make this approach complete, I need to achieve the following, in the order of priority:

1. Disabling should not gray out the content, so that content looks live (as an active content would)
2. As html-editor-enhanced widget is presented in a SingleChildScrollView, I would like the widget to expand to take the required height to display all the content (avoid scrolling if possible). [recalculateHeight in onInit callback has no impact]
3. A way to hook on to link/anchor tap events, so that I can taken special action instead of the default action.

As I work towards achieving these goals, I need advice on whether I'm moving in the direction. Any suggestions on how to achieve these. Thanks.

[graemep-nz]

I also need these things.

[oleksii-pimenov]

Yea, will be a great option to have this

[oleksii-pimenov]

In my solution, I use html-editor-enhanced for users to add rich content in the admin-app and present that content to client-users in the client-app using flutter_html. I ran into issues with formatting mismatches between these two widgets. For example, image float left/right or sizing does not work the same. In essence, WYSIWYG is impacted greatly.

So, I decided to use html-editor-enhanced on both my admin and client apps. On the client-app, the html-editor-enhanced widget would be used in disabled (read-only) mode with the toolbar hidden [FYI: There is a bug in this combination ie. disabling and hiding the toolbar at the same time - I will submit an issue ticket separately].

To make this approach complete, I need to achieve the following, in the order of priority:

1. Disabling should not gray out the content, so that content looks live (as an active content would)
2. As html-editor-enhanced widget is presented in a SingleChildScrollView, I would like the widget to expand to take the required height to display all the content (avoid scrolling if possible). [recalculateHeight in onInit callback has no impact]
3. A way to hook on to link/anchor tap events, so that I can taken special action instead of the default action.

As I work towards achieving these goals, I need advice on whether I'm moving in the direction. Any suggestions on how to achieve these. Thanks.

I've tried different approaches (some block overlays, some script injections ) but end up with making a fork and just change color to transparent (directly in JS) in disabled mode.

[graemep-nz]

Do you know about html-editor-plus https://github.com/tneotia/html-editor-enhanced/issues/479 https://pub.dev/packages/html_editor_plus