如何离线使用Summernote？离线部署后编辑器显示异常排查

在线使用正常情况 #

Summernote官网提供的在线示例代码：

<!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>

将该代码保存为HTML文件，通过JavaFX Webview打开后，编辑器可正常显示：编辑器带有完整的工具栏，内容区域可正常编辑格式化文本。

离线使用异常情况 #

操作步骤：

• 下载Summernote 0.8.18发布包文件夹
• 下载Bootstrap 3.4.1发布包文件夹
• 下载jquery_3_5_1.min.js文件
• 使用以下离线路径的HTML文件，通过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>

此时编辑器无法正常显示：仅展示纯文本内容，无编辑器工具栏，无法进行格式化操作。

请问哪里操作出错了？该如何解决？

问题排查与解决方法 #

1. 核心问题：JavaFX WebView的file://协议安全限制 #

JavaFX WebView默认对本地文件的跨路径加载有安全拦截，直接使用file://绝对路径引用资源时，CSS、JS文件可能无法被正确加载，导致Summernote初始化失败。

2. 优先解决方案：使用相对路径替代绝对路径 #

将HTML文件与所有资源文件夹放在同一目录下，用相对路径引用资源，避免file://协议的限制。

示例目录结构

project/
├── index.html
├── bootstrap_3_4_1/
│   ├── css/
│   │   └── bootstrap.min.css
│   └── js/
│       └── bootstrap.min.js
├── summernote_0_8_18/
│   ├── summernote.min.css
│   ├── summernote.min.js
│   └── font/  <!-- 注意：Summernote依赖该目录下的字体文件，需确保完整 -->
└── jquery_3_5_1.min.js

修改后的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="./bootstrap_3_4_1/css/bootstrap.min.css" rel="stylesheet">
  <script src="./jquery_3_5_1.min.js"></script>
  <script src="./bootstrap_3_4_1/js/bootstrap.min.js"></script>
  <link href="./summernote_0_8_18/summernote.min.css" rel="stylesheet">
  <script src="./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>

3. 备选方案：配置JavaFX WebView允许本地资源加载 #

如果必须使用绝对路径，需在Java代码中调整WebView的安全策略：

import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import netscape.javascript.JSObject;

public class WebViewLoader {
    public static void main(String[] args) {
        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();
        
        // 启用JavaScript
        engine.setJavaScriptEnabled(true);
        
        // 允许加载本地资源
        engine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
            if (newState == javafx.concurrent.Worker.State.SUCCEEDED) {
                JSObject window = (JSObject) engine.executeScript("window");
                // 注入Java对象，避免安全拦截
                window.setMember("app", new Object());
            }
        });
        
        // 加载本地HTML文件
        engine.load("file:///absolute/path/to/your/index.html");
    }
}

同时，启动Java程序时需添加VM参数，解除模块访问限制：

--add-opens javafx.web/javafx.scene.web=ALL-UNNAMED

4. 额外检查项 #

• 确认所有资源路径无拼写错误（JavaFX对文件名、文件夹名大小写敏感）
• 检查Summernote发布包完整性：必须包含font/目录，缺失会导致样式异常
• 验证jQuery、Bootstrap版本与Summernote 0.8.18的兼容性（已确认3.5.1/3.4.1版本兼容）

内容的提问来源于stack exchange，提问作者user3286500