0

Here is an example of how to use Summernote from it's website:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Summernote</title>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    </head>
    <body>
      <div id="summernote"><p>Hello Summernote</p></div>
      <script>
        $(document).ready(function() {
            $('#summernote').summernote();
        });
      </script>
    </body>
</html>

I created a html file with the above content, and opened the file by a JavaFX Webview, and it displayed the Summernote editor successfully, like this:

sm_ok

After that I tried to use Summernote completely offline (i.e. no https links)

Here are the steps that I followed:

  • download summernote 0.8.18 distribution folder
  • download bootstrap 3.4.1 distribution folder
  • download file jquery_3_5_1.min.js
  • create and open this html file in a JavaFX Webview:
<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Summernote</title>
      <link href="file:///absolute/path/to/bootstrap_3_4_1/css/bootstrap.min.css" rel="stylesheet">
      <script src="file:///absolute/path/to/jquery_3_5_1.min.js"></script>
      <script src="file:///absolute/path/to/bootstrap_3_4_1/js/bootstrap.min.js"></script>
      <link href="file:///absolute/path/to/summernote_0_8_18/summernote.min.css" rel="stylesheet">
      <script src="file:///absolute/path/to/summernote_0_8_18/summernote.min.js"></script>
    </head>         
    <body>  
      <div id="summernote"><p>Hello Summernote</p></div>
      <script>
        $(document).ready(function() {
            $('#summernote').summernote();
        });
      </script>
    </body>
</html>

This time the editor was not displayed properly, it was something like this:

sm_error

So, could you tell me what I did wrong? And how can I fix it? Thank you.

user3286500
  • 57
  • 1
  • 5
  • Have a look at what I did [here](https://stackoverflow.com/questions/54079253/show-html-in-webview-using-prism-js). Are you use `Maven`? – SedJ601 Apr 11 '23 at 14:57
  • @SedJ601 Thank you. I looked at your post, but I don't think I have the same problem as yours, because before using Summernote, I had displayed other html files in Webview correctly. I think my problem might be related to how to use Summernote's libraries (i.e. Bootstrap, Jquery and Summernote itself) locally. Oh, and I use Gradle in my project. – user3286500 Apr 12 '23 at 08:08
  • The part of my post that you need to look at has to do with `getClass().getResource("....")`. – SedJ601 Apr 12 '23 at 13:16

0 Answers0