javascript - 获取多个 contenteditable div 中的最新插入符号位置,并将图像附加到光标最后出现的 div
问题描述
我需要根据最近编辑的事实在多个内容可编辑的 div 中附加一个图像。此外,contenteditable div 本身包含 HTML(不仅仅是文本),因此这些 div 中可能存在多个节点。为了更正确地理解问题,这里是jsfiddle 的链接
$('#img-div').on('click',function(){
//logic for appending according to latest caret position
//if caret wasnt in any content editable div then do this
$('#div-4').append($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col" id="img-div">
<img src="https://creww.io/assets/images/creww-coin.png">
</div>
<div class="col">
<div contenteditable="true" id="div-1">
Div 1 here
</div>
<div contenteditable="true" id="div-2">
Div 2 here
</div>
<div contenteditable="true" id="div-3">
Div 3 here
</div>
<div contenteditable="true" id="div-4">
Div 4 here
</div>
</div>
</div>
</div>
解决方案
你可以得到礼物最后mouseover
的事件。
$('#img-div').on('click',function(){
//if caret wasnt in any content editable div then do this
lastDiv.append($(this).html());
//$('#divApp').append(lastDiv.html());
});
//logic for appending according to latest caret position
var lastDiv;
$('div[id*="div-"]').mouseover(function() {
lastDiv =$( this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col" id="img-div">
<img src="https://creww.io/assets/images/creww-coin.png">
</div>
<div class="col">
<div contenteditable="true" id="div-1">
Div 1 here
</div>
<div contenteditable="true" id="div-2">
Div 2 here
</div>
<div contenteditable="true" id="div-3">
Div 3 here
</div>
<div contenteditable="true" id="div-4">
Div 4 here
</div>
</div>
<div id="divApp"></div>
</div>
</div>
推荐阅读
- swift - Core Data 抽象实体超级初始化器
- javascript - 试图从后端发送一个 zip 到前端
- c++ - cmake 类似于 qmake 字符串文字
- sql - SQL:根据时间戳和聊天伙伴分组消息
- sharepoint-online - MSAL AD 令牌对 SharePoint Online CSOM 无效
- reactjs - eslint 插件 fp、jest 和 react 测试库导致不必要的 linting 错误
- php - 验证公式未保存为函数
- node.js - 函数附加类型号
- c# - 将布局表单发送到其他页面时出现问题?
- android - Can a jar library bound via Xamarin.Bindings library project start a service in Xamarin.Android project?