Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUESTION] Background color to editor box for web #57

Closed
mathsilva-dev opened this issue Jun 8, 2021 · 3 comments
Closed

[QUESTION] Background color to editor box for web #57

mathsilva-dev opened this issue Jun 8, 2021 · 3 comments
Labels
bug Something isn't working question Further information is requested

Comments

@mathsilva-dev
Copy link

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?

@mathsilva-dev mathsilva-dev added the question Further information is requested label Jun 8, 2021
@tneotia
Copy link
Owner

tneotia commented Jun 10, 2021

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
Copy link
Owner

tneotia commented Jun 10, 2021

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 tneotia added the bug Something isn't working label Jun 10, 2021
@tneotia
Copy link
Owner

tneotia commented Jun 13, 2021

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!

@tneotia tneotia closed this as completed Jun 13, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants