Vaadin 8中如何获取CKEditor光标位置并插入图片？

要实现用户选择图片后插入到CKEditor光标位置，核心是利用CKEditor原生JS API结合Vaadin的Java代码交互，以下是具体实现步骤：

1. 准备CKEditor组件 #

先在Vaadin中创建并配置CKEditor组件，设置唯一ID方便后续JS定位：

CKEditor ckEditor = new CKEditor();
ckEditor.setId("myCkEditor"); // 给编辑器设置ID，用于JS定位
// 可选：自定义工具栏或编辑器高度
ckEditor.setConfig("{toolbar: ['Bold', 'Italic', 'Image'], height: 300}");

2. 实现下拉菜单选择事件 #

创建下拉菜单，监听用户选择事件，生成图片HTML代码并通过JS插入到CKEditor光标位置：

NativeSelect<String> imageSelector = new NativeSelect<>("选择图片");
imageSelector.setItems("风景图", "头像图", "产品图");
imageSelector.addValueChangeListener(event -> {
    String selectedImage = event.getValue();
    if (selectedImage == null) return;

    // 构建图片HTML（替换为你的实际图片路径规则）
    String imgHtml = String.format("<img src='/images/%s.png' alt='%s' style='max-width: 200px;'>",
                                   selectedImage, selectedImage);

    // 调用CKEditor的JS API插入内容到光标位置
    String jsScript = String.format("var editor = CKEDITOR.instances.myCkEditor;" +
                                    "if (editor) {" +
                                    "   editor.focus(); // 确保编辑器获得焦点，光标位置有效" +
                                    "   editor.insertHtml('%s');" +
                                    "}", imgHtml);
    JavaScript.getCurrent().execute(jsScript);
});

3. 手动获取光标位置（如需额外操作） #

如果需要获取光标在编辑器中的具体位置（比如自定义插入逻辑），可以用CKEditor的选区API：

// 以下JS代码可嵌入Vaadin的JavaScript.execute()中
var editor = CKEDITOR.instances.myCkEditor;
var selection = editor.getSelection();
var range = selection.getRanges()[0];

// 获取光标所在的容器元素
var cursorContainer = range.startContainer;
// 获取光标在容器中的偏移量
var cursorOffset = range.startOffset;

关键说明 #

• CKEditor的insertHtml()方法默认会将内容插入到当前光标位置，若有选中内容则直接替换选中部分，无需手动计算光标位置。
• 确保CKEditor实例已初始化完成：可通过添加attachListener或监听CKEditor的instanceReady事件，避免在编辑器未加载时调用JS。
• 注意XSS防护：对用户选择的图片名称进行过滤，避免注入恶意HTML代码。

内容的提问来源于stack exchange，提问作者pYadu