currentDiv
is the div having the caret inside
on a button click I need to add a class
problem - how to get which div is the current ?
$('button').on('click', function(){
$(currentDiv).addClass('indent');
});
.indent{margin-left:30px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<div>lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>
<button>CLICK</button>
CodePudding user response:
You can use Range and the startContainer
property to get the element pointed to by the cursor:
const contenteditable = $('[contenteditable]');
$('button').on('click', function(e) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var elem = range.startContainer.parentNode;
$(elem).addClass('indent');
});
.indent {
margin-left: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<div>lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>
<button>CLICK</button>