时间戳

首页 > 解决方案 > 使用基于 Web 的文本编辑器（如在 WebView #javafx 中加载的summernote）时无法加载图像

java - 使用基于 Web 的文本编辑器（如在 WebView #javafx 中加载的summernote）时无法加载图像

问题描述

使用基于 Web 的文本编辑器（如在 WebView #javafx 中加载的summernote）时无法加载图像或任何文件。

我注意到当我在浏览器上打开 summernote.html 文件时加载图像/文件工作正常，但是当我在 WebView {嵌入我的项目}中尝试它时，图像/文件无法在编辑器中加载。

在此处输入图像描述

文本编辑器.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.web.WebView?>


<StackPane xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="patient.froala.TextEditorController">
   <children>
      <WebView fx:id="wv_texteditor" minHeight="300.0" minWidth="992.0" prefHeight="-1.0" prefWidth="-1.0" />
   </children>
</StackPane>

控制器文件

package patient.summernote;

import javafx.application.Platform;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import java.net.URL;
import java.util.ResourceBundle;

public class TextEditorController implements Initializable {

    @FXML private WebView wv_texteditor;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        Platform.runLater((()->{
            WebEngine webEngine=wv_texteditor.getEngine();
            webEngine.load(getClass().getResource("summernote.html").toExternalForm());

        }));
    }
}

summernote.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- include libraries(jQuery, bootstrap) -->
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

    <!-- include summernote css/js -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
<body>

<div id="summernote">Hello Summernote</div>

<script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
</script>

</body>
</html>

标签： javajavafxjavafx-webenginejavafx-webview

解决方案

经过数小时的测试，我发现了错误。

代码 4 FileReader ：无法读取文件或目录，通常是由于在获取对文件的引用后发生的权限问题（例如，文件或目录同时被另一个应用程序锁定）。

所以我使用java从本地文件系统访问文件。拥有该文件，然后通过 WebView 提供的（javascript-java）桥将其传递给summernote，我设法插入图像。在此处输入图像描述

btn_insertimg.setOnAction(event->{
                            File file=fileChooser.showOpenDialog(webview.getScene().getWindow());
                            if(file==null)
                                return;
                            System.out.println(file.getAbsolutePath());
                            String string= "file:\\" + file.getAbsolutePath();
                            //as the script eats the single backslash we should double it
                            //before doubling file:\C:\Users\Muhammad\Pictures\Army\1.jpg
                            //after doubling  file:\\C:\\Users\\Muhammad\\Pictures\\Army\\1.jpg
                            //without doubling file:C:UsersMuhammadPicturesArmy.jpg
                            string=string.replaceAll("\\\\","\\\\\\\\");
                            System.out.println(string);
                            webEngine.executeScript("insertImg('"+string+"','1.jpg')");
                        });

推荐阅读