Question

如主题所述：JavaFX HTMLEditor - Insert image function 如果要插入图像，请将以下标记添加到htmlEditor的htmlText

"<img src=\"" + getClass().getResource(PicName[i])) + "\" width=\"" + target.getImage().getWidth() + "\"height=\"" + target.getImage().getHeight()  + "\">")

但是如果想在光标位置添加图像怎么办？

Answer 1

您可以通过以下方式实现此目的

使用ScenicView探索HTMLEditor
在HTMLEditor中获取WebView
获取该WebView的WebEngine
运行JavaScript代码，使用WebEngine

如何使用JS替换HTML Link to Original Post

function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

如何执行JS代码Guide

Node webNode = htmlEditor.lookup(".web-view");
if (webNode instanceof WebView) {
     WebView webView = (WebView) webNode;
     WebEngine engine = webView.getEngine();
     engine.executeScript("alert('helo')"); // add js code here
}

Answer 2

文本文件具有线性数据结构，并且在其视图中可以具有顺序位置和对应位置。但对于html视图，屏幕上显示的对象位置到文本映射中的位置有点困难，这就是html编辑器无法确定光标位置的原因

我正在研究其他一些解决方法，以便在给定的光标位置插入图像。

尝试插入一个虚拟文本作为占位符，如### inserImage ####，然后将其替换为实际的图像标记＆lt; img src =＆＃34; file：\ c：\ testhtmleditor \ sample01.jpg＆＃ 34; /＆GT; ..

Answer 3

让我们尝试这段代码

@FXML private HTMLEditor editor; 
... 
public void insertTextToCurrentFeatureCursorPosition(String text) {
    WebView webView = (WebView) editor.lookup(".web-view");
    WebPage webPage = Accessor.getPageFor(webView.getEngine());
    webPage.executeCommand("insertHTML", text); 
}

其中text是包装图像的HTML代码

找到用于插入图像的HTMLEditor光标指针

3 个答案: