编辑器demo

编辑器按钮操作

<button onclick="insertAtCursor('editcode','!=');" type="button" class="btn btn-info">!=</button>
<button onclick="backspaceAtCursor('editcode');" type="button" class="btn btn-danger">del</button>

编辑器js代码插入删除操作

/**
* 在光标处插入文字
* @param {[DOM对象或者其ID]} field [可输入的域对象或者ID]
* @param {[type]} myValue [待出入的文字]
* @return {[type]} [description]
*/
function insertAtCursor(field, myValue) {
var myField ;
if("string" === typeof field) {
myField = document.getElementById(field);
} else if('HTMLTextAreaElement' === field.constructor.name) {
myField = field;
} else {
return;
}

//IE 浏览器
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//FireFox、Chrome等
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart,
endPos = myField.selectionEnd,

// 保存滚动条
restoreTop = myField.scrollTop,
fieldVal = myField.value;

myField.value = fieldVal.substring(0, startPos) + myValue + fieldVal.substring(endPos, fieldVal.length);

if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}

myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}

/**
* 在光标处开始退格
* @param {[DOM对象或者其ID]} field [可输入的域对象或者ID]
* @return {[type]} [description]
*/
function backspaceAtCursor(field) {
var myField ;
if("string" === typeof field) {
myField = document.getElementById(field);
} else if('HTMLTextAreaElement' === field.constructor.name) {
myField = field;
} else {
return;
}

//IE 浏览器
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = '';
/*var _text = sel.text;
sel.text = _text && _text.substr(0, _text.length - 1); */
sel.select();
}
//FireFox、Chrome等
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart,
endPos = myField.selectionEnd,

// 保存滚动条
restoreTop = myField.scrollTop,
fieldVal = myField.value;

if(startPos === endPos) {
var newStart = (startPos === 0 ? 0 : startPos - 1);
myField.value = fieldVal.substring(0, newStart)
+ fieldVal.substring(endPos, fieldVal.length);

myField.selectionStart = newStart;
myField.selectionEnd = newStart;
} else {
myField.value = fieldVal.substring(0, startPos) + fieldVal.substring(endPos, fieldVal.length);
myField.selectionEnd = startPos;
}

if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}

myField.focus();

} else {
myField.value += myValue;
myField.focus();
}
}