kindeditor 图片插入光标位置

weixin_40000992

于 2022-09-15 15:29:02 发布

阅读量333

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_40000992/article/details/126872531

版权

本文档记录了在使用KindEditor编辑器时遇到的一个问题，即插入图片后，图片总是出现在文本末尾而不是光标所在位置。通过深入研究KindEditor的源码，发现问题出在`appendHtml`方法上。解决方案是将`appendHtml`替换为`insertHtml`，以确保图片能正确插入到光标所在位置。修复后的代码示例已给出。

摘要由CSDN通过智能技术生成

因为老项目用到了kindeditor，遇到一个问题，插入图片的时候 kindeditor不会插入光标所在位置而是跟随在文本的末尾。

研究了一下kindeditor源码，发现了问题在插入服务器返回的图片文本使用的方法上。默认使用的方法是appendHtml 这个方法会把内容跟在末尾，直接替换成insertHtml 就好了

解决前

```javascript
K.ajaxForm(self.options.uploadJson, function(data) {
                       dialog.hideLoading();
                       //console.log(data);
                       if (data.error==0) {
                       //console.log(self.options);
                       var html = '<img src="' + data.url + '" />';
                       //console.log(html)
                       self.appendHtml(html).hideDialog().focus();

                       }
                       },'POST',formData,'json');
```

修改后

```javascript
K.ajaxForm(self.options.uploadJson, function(data) {
                       dialog.hideLoading();
                       //console.log(data);
                       if (data.error==0) {
                       //console.log(self.options);
                       var html = '<img src="' + data.url + '" />';
                       //console.log(html)
                       //self.appendHtml(html).hideDialog().focus();
                       self.insertHtml(html).hideDialog().focus();

                       }
                       },'POST',formData,'json');
```