Question

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

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

texteditor.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>

Answer 1

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

代码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')");
                        });

使用基于Web的文本编辑器（例如在WebView内加载的summernote）时无法加载图像

1 个答案: