在contentEditable div中使用jQuery替换htmlHtml [英] replaceHtmlAt using jQuery inside contentEditable div

问题描述

我尝试实现以下功能：

 < div id =editorcontenteditable =true > 
我是一些文字。 
< / div> 
 
 $（'＃editor'）。replaceHtmlAt（start，end，string）; 
  

使用案例：

1. 用户在 #editor

$ b中输入 @ $ b

2. keyup 事件捡起 @ 位置



3. $（'＃editor'）。replaceHtmlAt（@的位置，@ + 1的位置，< div> Hello< / div> ;）;

这可能吗？

编辑

我这样做是为了工作

  $（this）.slice（pos-1）.html（'< span id =提及'+ pos +'> @< ; /跨度>'）; 
  

但是我遇到了另一个问题。在Chrome中，#editor中的插入符号位置一直移动到后面......如何在span标记中的'@'之后恢复插入符的位置？

Dylan，虽然你想用'@'替代'@'是非常正常的，但我们（编码人员）知道我们可以拦截并且处理关键事件。

因此，建立在Derek在这里用过的东西之后，我会这样做：

  // @see http://stackoverflow.com/a/4836809/314056 
函数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）; 
 
 
 $ b $（＃editor）。keydown（function（event）{
 if（event.which == 50&&& amp; event .shiftKey）{// 50 =>'2'和shift +'2'=> @ 
 event.preventDefault（）; //中止插入'@'
 var html = $（' < span> hi< / span>'）; //创建html节点
 insertNodeBeforeCaret（html [0]）; //在插入符号前插入节点
} 
}）; 
  

演示JSFiddle

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:

1. User types an @ inside #editor

2. keyup event picksup the @ position

3. ​

   $('#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?

解决方案

Dylan, although your thinking about replacing '@' is right in layman terms, we (coders) know that we can intercept and mess around with key events.

So, building on what Derek used up here, I'd do:

// @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
    }
});​

Demo JSFiddle

这篇关于在contentEditable div中使用jQuery替换htmlHtml的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！