Can't load images or any files when using a Web-based text editor like summernote loaded inside a WebView #javafx.
I noticed that loading images/files works fine when I open summernote.html file on my browser, but when I try it inside a WebView {embedded in my project}, images/files fails to load in the editor.
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>
Controller file
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 file
<!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>
I found out the error after hours of testing .
Code 4 FileReader : The file or directory cannot be read, typically due to permission problems that occur after a reference to a file has been acquired (for example, the file or directory is concurrently locked by another application).
so I used java to access files from the local filesystem. having the file then passing it to the summernote through the (javascript-java) bridge offered by the WebView ,I managed to insert images .