查找用于插入图像的 HTMLEditor 光标指针答案

【问题标题】：find HTMLEditor cursor pointer for inserting image查找用于插入图像的 HTMLEditor 光标指针
【发布时间】：2013-05-12 10:41:23
【问题描述】：

如主题所述：JavaFX HTMLEditor - Insert image function 如果要插入图像应在 htmlEditor 的 htmlText 中添加以下标记

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

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

【问题讨论】：

标签： html javafx html-editor

【解决方案1】：

让我们试试这段代码

@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 代码

【讨论】：

【解决方案2】：

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

使用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
}

【讨论】：

【解决方案3】：

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

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

尝试插入一个虚拟文本作为 ###inserImage#### 之类的占位符，然后将其替换为实际图像标签 ..

【讨论】：