layedit实现图片上传后在光标最后位置插入
时间: 2023-12-10 07:39:59 浏览: 70
layedit是一款基于layui的富文本编辑器,可以通过layedit的uploadImage配置项来实现图片上传功能,但是默认情况下,上传的图片会插入到光标所在位置,而不是在光标最后位置插入。如果要实现在光标最后位置插入图片,可以通过以下步骤实现:
1. 在layedit的上传图片回调函数中,获取当前编辑器的内容和光标位置。
2. 将上传的图片插入到内容的末尾。
3. 将编辑器的内容重新赋值为新的内容。
4. 将光标位置设置为新内容的末尾。
以下是示例代码:
```javascript
// layedit配置项
var layeditConfig = {
// ...
uploadImage: {
url: 'your_upload_url',
type: 'post',
dataType: 'json',
done: function(res, index, upload){
if(res.code == 0){
// 获取编辑器对象
var editIndex = layedit.build('your_edit_id');
var $iframe = $('#LAY_layedit_'+editIndex).find('iframe').contents();
// 获取当前光标位置
var range = $iframe.getSelection().getRangeAt(0);
var position = range.endOffset;
// 获取当前内容
var content = $iframe.find('body').html();
// 插入图片到内容末尾
content += '<img src="'+res.data.src+'">';
// 重新设置内容
$iframe.find('body').html(content);
// 设置光标位置
var newRange = $iframe.getSelection().getRangeAt(0);
newRange.setStart($iframe.find('body')[0], position);
newRange.setEnd($iframe.find('body')[0], position);
$iframe.getSelection().removeAllRanges();
$iframe.getSelection().addRange(newRange);
// 更新编辑器对象
layedit.sync(editIndex);
} else {
layer.msg(res.msg, {icon: 2});
}
}
}
};
```
需要注意的是,以上代码中`$iframe`变量是获取富文本编辑器的iframe对象,因为layedit实际上是通过iframe来实现富文本编辑功能的。在设置光标位置时,需要使用`Range`对象来操作,具体可以查看相关文档。