tneotia/html-editor-enhanced

[QUESTION] Background color to editor box for web

mathsilva-dev opened this issue · 3 comments

mathsilva-dev commented

I use this package for web, but i need change the background color the editor, and i see this solution #27 that was presented is only for mobile.
Have a solution for in web usage?

tneotia commented

Hi, here is a solution for web. It's a little complex for various reasons but it gets the job done.

You need to make an HTML file in your assets like this:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="Flutter Summernote HTML Editor">
    <meta name="author" content="tneotia">
    <title>Summernote Text Editor HTML</title>
    <script src="jquery.min.js"></script>
    <link href="summernote-lite.min.css" rel="stylesheet">
    <script src="summernote-lite.min.js"></script>
    <!--darkCSS-->
</head>
<body>
<div id="summernote-2"></div>
<!--headString-->
<!--summernoteScripts-->
<style>
  .note-editable {
      background-color: #FF0000 !important;
  }
</style>
</body>
</html>

Then pass the file location in your HtmlEditor > HtmlEditorOptions> filePath parameter to load it.

Make sure to disable dark mode, otherwise the background will be overridden when the editor is dark. Let me know if this doesn't work or you have any other questions.

tneotia commented

Note for me:

Update internal code to prevent .replaceAll("jquery.min.js", "...") from overriding custom jquery in custom files. Fixed in recent commit. Marking with the bug label for reference.

tneotia commented

Update: I made this even easier to accomplish by adding support for JavaScript in Web. See here, you just need the "editorBG" WebScript, and you can run the controller.evaluateJavascriptWeb("editorBG"); line in the onInit callback. Hope it helps!

  • ❤️1