search

tneotia / html-editor-enhanced

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.
https://pub.dev/packages/html_editor_enhanced
MIT License
274 stars 331 forks source link

Using the widget in readonly mode #449

Open sundar-rajavelu opened 1 year ago

sundar-rajavelu commented 1 year ago

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 commented 1 year ago

I also need these things.

oleksii-pimenov commented 4 months ago

Yea, will be a great option to have this

oleksii-pimenov commented 4 months ago

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 commented 4 months ago

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