@ упомяните скрипт, сделайте так, чтобы контент Div редактировался
Это мой скрипт, который отлично работает с текстовой областью. Однако теперь я хочу использовать 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();
});
});
Здесь идентификатор редактируемого контента — #sparktext. Спасибо
Решение
Ну, я наконец исправил это, для тех, кто хочет использовать это, не стесняйтесь делать это
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+" ");
$("#display").hide();
var curcont=parseInt(content.length);
setCaretPos(document.getElementById("sparktext"),curcont);
$("#msgbox").hide();
});
});
Другие решения
Других решений пока нет …