Question

这是我提到的脚本，它可以与textarea一起使用。但是现在我想使用div contenteditable而不是在里面输出Rich HTML。但我无法弄清楚我需要实施哪些更改才能使内容完美地与内容编辑完成。

请帮助我。

(function ($, undefined) {
    $.fn.getCursorPosition = function () {
        var el = $(this).get(0);
        var pos = 0;
        if ('selectionStart' in el) {
            pos = el.selectionStart;
        } else if ('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }
})(jQuery);
$.fn.setCursorPosition = function (pos) {
    this.each(function (index, elem) {
        if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    });
    return this;
};
$(document).ready(function (e) {
    var selword;
    var pcw;
    var pcdw;
    var start = /@/ig;
    var word = /@(\w+)/ig;
    var tagid = new Array();
    $("#sparktext").click(function () {
        var content = $(this).val();
        var ty = $("#sparktext").getCursorPosition();
        var firsts = content.substring(0, ty);
        var lasts = content.substring(ty);
        var faryw = firsts.split(" ");
        var falw = faryw.length;
        var lastw = faryw[falw - 1];
        var laryw = lasts.split(" ");
        var firstw = laryw[0];
        selword = lastw + firstw;
        var lenlastw = lastw.length;
        var lenfirstw = firstw.length;
        lenlastw = lenlastw - 1;
        pcw = ty - lenlastw;
        pcdw = ty + lenfirstw;
        var fpcw = pcw - 1;
        var fstr = content.substring(0, fpcw);
        var lstr = content.substring(pcdw);
        var go = selword.match(start);
        var name = selword.match(word);
        if (go == null) {
            $("#display").hide();
            $("#msgbox").hide();
        }

    });
    $("#sparktext").keyup(function () {
        var content = $(this).val();
        var ty = $("#sparktext").getCursorPosition();
        var firsts = content.substring(0, ty);
        var lasts = content.substring(ty);
        var faryw = firsts.split(" ");
        var falw = faryw.length;
        var lastw = faryw[falw - 1];
        var laryw = lasts.split(" ");
        var firstw = laryw[0];
        selword = lastw + firstw;
        var lenlastw = lastw.length;
        var lenfirstw = firstw.length;
        lenlastw = lenlastw - 1;
        pcw = ty - lenlastw;
        pcdw = ty + lenfirstw;
        var go = selword.match(start);
        var name = selword.match(word);

        var dataString = 'searchword=' + name;
        if (go == null) {
            $("#display").hide();
            $("#msgbox").hide();
        }
        if (go.length > 0) {


            $.ajax({
                type: "POST",
                url: "http://localhost/PHP/Konnect/atmention.php",
                data: dataString,
                cache: false,
                success: function (html) {
                    $("#display").html(html).show();
                }
            });
        }

        return false;
    });

    $(document).on("click", ".addname", function () {
        var username = $(this).attr('title');
        var old = $("#sparktext").val();
        var musername = "@" + username;
        var fpcw = pcw - 1;
        var fstr = old.substring(0, fpcw);
        var lstr = old.substring(pcdw);
        if (lstr == "") {
            var content = fstr + musername + " " + lstr;
        } else {
            var content = fstr + musername + lstr;
        }
        $("#sparktext").val(content);
        $("#display").hide();
        var curcont = content.length;
        $("#sparktext").focus().setCursorPosition(curcont);
        $("#msgbox").hide();
    });
});

此处可编辑内容的ID为#sparktext。谢谢你

Answer 1

嗯，我终于修复了它，对于任何想要使用它的人都可以随意使用

 function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}


function setCaretPos(el, sPos)
{
/*range = document.createRange(); 
range.setStart(el.firstChild, sPos);
range.setEnd (el.firstChild, sPos);*/
var charIndex = 0, range = document.createRange();
range.setStart(el, 0);
range.collapse(true);
var nodeStack = [el], node, foundStart = false, stop = false;

while (!stop && (node = nodeStack.pop())) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && sPos >= charIndex && sPos <= nextCharIndex) {
range.setStart(node, sPos - charIndex);
foundStart = true;
}
if (foundStart && sPos >= charIndex && sPos <= nextCharIndex) {
range.setEnd(node, sPos - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
selection = window.getSelection(); 
selection.removeAllRanges(); 
selection.addRange(range);
}

$(document).ready(function(e){
var selword;
var pcw;
var pcdw;
var start=/@/ig;
var word=/@(\w+)/ig;
var tagid = new Array();
$("#sparktext").click(function(){
var content=$(this).text();
var ty = getCaretPosition(this);
var firsts=content.substring(0,ty);
var lasts=content.substring(ty);
var faryw=firsts.split(" ");
var falw=faryw.length;
var lastw=faryw[falw-1];
var laryw=lasts.split(" ");
var firstw=laryw[0];
selword=lastw+firstw;
var lenlastw=lastw.length;
var lenfirstw=firstw.length;
lenlastw=lenlastw-1;
pcw=ty-lenlastw;
pcdw=ty+lenfirstw;
var fpcw=pcw-1;
var fstr=content.substring(0,fpcw);
var lstr=content.substring(pcdw);
var go = selword.match(start);
var name= selword.match(word);
if(go==null)
{
$("#display").hide();
$("#msgbox").hide();
}

});
$("#sparktext").keyup(function() 
{
var content=$(this).text();
var ty = getCaretPosition(this);
var firsts=content.substring(0,ty);
var lasts=content.substring(ty);
var faryw=firsts.split(" ");
var falw=faryw.length;
var lastw=faryw[falw-1];
var laryw=lasts.split(" ");
var firstw=laryw[0];
selword=lastw+firstw;
var lenlastw=lastw.length;
var lenfirstw=firstw.length;
lenlastw=lenlastw-1;
pcw=ty-lenlastw;
pcdw=ty+lenfirstw;
var go = selword.match(start);
var name= selword.match(word);

var dataString = 'searchword='+ name;
if(go==null)
{
$("#display").hide();
$("#msgbox").hide();
}
if(go.length>0)
{


$.ajax({
type: "POST",
url: "AJAX FILE GOES HERE",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}

return false;
});

$(document).on("click",".addname",function(){
var username=$(this).attr('title');
var old=$("#sparktext").text();
var musername="@"+username+" ";
var fpcw=pcw-1;
var fstr=old.substring(0,fpcw);
var lstr=old.substring(pcdw);
if(lstr=="")
{
var content = fstr+musername+""+lstr;
}
else
{
var content = fstr+musername+"---"+lstr+"---";
}
$("#sparktext").html(content+"&nbsp;");
$("#display").hide();

var curcont=parseInt(content.length);
setCaretPos(document.getElementById("sparktext"),curcont);
$("#msgbox").hide();
});
});

@提及脚本，使其与div内容可编辑

1 个答案: