# mention script , make it work with div content editable [closed] - php

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
This is my at mention script , which works fine with a textarea . However now i want to use a div contenteditable instead for outputing Rich HTML inside . But i just cant figure out what changes do i need to implement in order to make this work perfectly with a content editable.
Please Help Me.
(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();
});
});
Here the id of the content editable is #sparktext .Thank You

Answer 1

Well i finally fixed it , for anyone who wants to use this feel free to do so
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();
});
});