[英]replaceHtmlAt using jQuery inside contentEditable div
I'm trying to achieve the following functionality: 我正在尝试实现以下功能:
<div id="editor" contenteditable="true">
I am some text.
</div>
$('#editor').replaceHtmlAt(start, end, string);
Use case: 使用案例:
User types an @
inside #editor
用户键入
@
inside #editor
keyup
event picksup the @
position keyup
事件挑选@
位置
$('#editor').replaceHtmlAt(position of @, position of @ + 1, "<div>Hello</div>");
Is this possible? 这可能吗?
EDIT 编辑
I got it to work by doing this 通过这样做,我得到了它的工作
$(this).slice(pos-1).html('<span id="mention'+pos+'">@</span>');
However I've encountered another problem. 但是我遇到了另一个问题。 In Chrome, the caret position inside #editor moves all the way to the back... how do I restore the caret's position after '@' inside the span tags?
在Chrome中,#editor内的插入符号位置一直向后移动...如何在span标记内的'@'后恢复插入符号的位置?
Dylan, although your thinking about replacing '@' is right in layman terms, we (coders) know that we can intercept and mess around with key events. Dylan,虽然你想要取代'@'的想法是外行的,但我们(编码员)知道我们可以拦截和搞乱关键事件。
So, building on what Derek used up here, I'd do: 所以,基于Derek在这里使用的东西,我会这样做:
// @see http://stackoverflow.com/a/4836809/314056
function insertNodeBeforeCaret(node) {
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0);
range.collapse(false);
range.insertNode(node);
range = range.cloneRange();
range.selectNodeContents(node);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);
}
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var html = (node.nodeType == 1) ? node.outerHTML : node.data;
var id = "marker_" + ("" + Math.random()).slice(2);
html += '<span id="' + id + '"></span>';
var textRange = document.selection.createRange();
textRange.collapse(false);
textRange.pasteHTML(html);
var markerSpan = document.getElementById(id);
textRange.moveToElementText(markerSpan);
textRange.select();
markerSpan.parentNode.removeChild(markerSpan);
}
}
$("#editor").keydown(function(event){
if(event.which == 50 && event.shiftKey){ // 50 => '2' and shift+'2' => @
event.preventDefault(); // abort inserting the '@'
var html = $('<span>hi</span>'); // create html node
insertNodeBeforeCaret(html[0]); // insert node before caret
}
});
$("#editor").keyup(function(){
$(this).html($(this).html().replace(/@/g, "<div>Hello</div>"));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.