Div contenteditable="true" con botones: Me gustaria introducir algunos símbolos en un div contenteditable por medio de botones. Este código funciona, pero quiero que el símbolo se introduzca en el la posición del cursor y no al final del texto.
GRACIAS
<html>
<head>
<script>
var sel="";
var insertOffset="";
var currentNode="";
window.onload=doInit;
function doInit(){
// All document elements except the content editable DIV are unselectable.
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
oDiv.unselectable = "off";
oDiv.innerHTML="";
oDiv.focus();
}
function anadir(keyCode){
oDiv.focus();
oDiv.innerHTML +=(keyCode);
oDiv.focus();
}
function colorit() {
var tags = {select: 'blue', from: 'blue', where: 'blue', sysdatabases: 'green',
round: '#ff00ff', len: '#ff00ff', count: '#ff00ff', sum: '#ff00ff', avg: '#ff00ff', "var": '#ff00ff',elsif :'blue',calcdays: 'blue',"if":'blue',"else":'blue'};
var e = window.event;
if ((e.keyCode !== 37) && (e.keyCode !== 39)){
// var beforeQuery = oDiv.innerHTML.replace(/<\/P>/gi, "\U13");
var beforeQuery = oDiv.innerHTML.replace(/(<BR>|\n<P> <\/P>)/g, "\n");
var afterQuery = beforeQuery.replace(/<[^>]+>/g, "");
var inComment = false;
var inDashComment = false;
var inQuota = false;
var newExp = "(";
for(tag in tags){
newExp += "\\b"+tag+"\\b|";
//alert(tag);
}
newExp += "\\-\\-|\\n|\\/\\*|\\*\\/*|\\')";
afterQuery = afterQuery.replace(RegExp(newExp, "gi"),
function(p1,p2,p3,p4){
if(!inDashComment && !inComment && !inQuota && tags[p2.toLowerCase()]){
return "<FONT color="+tags[p2.toLowerCase()]+">"+p2+"</FONT>";
} else {
if (!inComment && p2.substr(0,2) == "--") {
inDashComment = true;
return '<FONT color=#008080>--';
}
if (inDashComment && p2 == "\n") {
inDashComment = false;
return '</FONT>\n';
}
if (!inDashComment && p2 == "/*") {
inComment = true;
return '<FONT color=#008080>/*';
}
if (!inDashComment && p2 == "*/") {
inComment = false;
return "*/</FONT>";
}
if (!inDashComment && !inComment && p2 == "'") {
if(inQuota){
inQuota = false;
return "'</FONT>";
} else {
inQuota = true;
return '<FONT color=#ff0000>\'';
}
}
return p2;
}
});
if(beforeQuery!=afterQuery){
//alert(beforeQuery+"\n"+afterQuery)
oDiv.innerHTML = afterQuery.replace(/\n/g,"<BR>");
//setCursor(currentNode,insertOffset);
}
oDiv.style.color = "#000000";
}
}
</script>
<style>
body {
background-color:#ffffff;
font-family: Palatino Linotype;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: 15px;
font-size-adjust: none;
font-stretch: normal;
}
#botones{
width:80%;
height:300px;
font-family: Palatino Linotype;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 100%;
line-height: 4px;
font-size-adjust: none;
font-stretch: normal;
visibility: visible; align:center;
}
#oDiv {
background-color: #ffffff;
width:80%;
height:200px;
border: 1px solid #666666;
font-family: Palatino Linotype;
font-size: 100%;
text-align:left;
color: #000000;
padding-left:1%;
padding-top:1%;
border-style: double;
border-color: #666666;
overflow: scroll;
scrollbar-face-color: #c7c7c7;
scrollbar-highlight-color: #f4f4f4;
scrollbar-shadow-color: #dfdfdf;
scrollbar-3dlight-color: #dfdfdf;
scrollbar-arrow-color: #dfdfdf;
scrollbar-darkshadow-color: #dfdfdf;
border-bottom: 1px double #666666";
}
</style>
</head>
<form name="f">
<body leftmargin=0 topmargin=0 scroll=no >
<div onKeyUp="colorit();" name="barra" contenteditable ID=oDiv >
</div>
<br>
<div id="botones">
<input style="width: 6%; height: 35px; font-family: Palatino Linotype; font-size: 130%; font-weight: bold;" value="ω" onclick="anadir('ω')" type="button">
<input style="width: 6%; height: 35px; font-family: Palatino Linotype; font-size: 130%; font-weight: bold;" value="ζ" onclick="anadir('ζ')" type="button"></div>
</form>
</body>
</html>
Respuesta: Div contenteditable="true" con botones 
