[QUESTION] Is there a way to give background color to editor box

[Chanondler]

I want to add background color to the editor area which is grey color now. Is there any way to do so?
Thanks in advance.

[tneotia]

Hi, yes you can do this. The easiest way would be to disable darkMode, use the onInit callback, and run JS like so:

HtmlEditor(
   controller: controller,
      htmlEditorOptions: HtmlEditorOptions(
      darkMode: false,
   ),
   callbacks: Callbacks(onInit: () {
      controller.editorController!.evaluateJavascript(source: "document.getElementsByClassName('note-editable')[0].style.backgroundColor='blue';");
   }),
),

You can use any hex code or named color in place of blue (make sure they are in quotes though).

Result:

Please note this only works on mobile. If you use Web let me know and I'll provide a solution for that.

Reference:

summernote/summernote#2390

https://stackoverflow.com/questions/1874560/how-to-use-javascript-to-change-div-backgroundcolor

PS that editor design looks really, really good! 😀

[Chanondler]

@tneotia Thanks Mate!
One more issue though, editor is not working on ios. Whatever I type does not reflect in the editor. Shall I open a new issue?

Thanks for the compliment for the design. Implementing neumorphic ui in my app. All credits to you for providing customisations.

[tneotia]

If you are using the simulator there is an odd issue where typing with the hardware keyboard does not work in the webview (not just this package, but any webview).

Refer to #7 (comment)

If you have a physical device and it doesn't work, please open a new issue. Thanks!

[mathsilva-dev]

If you are using the simulator there is an odd issue where typing with the hardware keyboard does not work in the webview (not just this package, but any webview).

Refer to #7 (comment)

If you have a physical device and it doesn't work, please open a new issue. Thanks!

Hello @tneotia
I use this package for web, but i need change the background color the editor, and i see this solution that you presented is only for mobile.
You have a solution for in web usage?