var ToolObj;
var ContentObj;
var RangArr = {}; //定义一个数组变量：用于存储选择范围：rang
var Extend = function (destination, source) {
for (var item in source) {
destination[item] = source[item];
}
return destination;
}
var EventUtil = function (element, type, hander) {
if (element.addEventListener) {
element.addEventListener(type, hander, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, hander);
} else {
element["on" + type] = null;
}
}
var DO = function (id) {
return typeof id == "string" ? document.getElementById(id) : undefined;
}
Object.prototype._addClass = function (_className) {
this.className = this.className + " " + _className;
}
Object.prototype._removeClass = function (_className) {
this.className = this.className.toString().replace(_className, "");
};
//编辑器方法
var T = {
B: function () { T.Excmd("bold"); },
U: function () { T.Excmd("underline"); },
I: function () { T.Excmd("Italic"); },
FS: function () {
var cmdValue = DO("selFontSize").value;
T.ExcmdFont("FontSize", cmdValue);
},
Excmd: function (cmdName) {
ContentObj.focus();
if (rangy.getSelection().toString() == "") { T.GetRange(); }
document.execCommand(cmdName);
T.SetStyle();
},
ExcmdFont: function (cmdName, cmdValue) {
ContentObj.focus();
if (rangy.getSelection().toString() == "") { T.GetRange(); }
document.execCommand(cmdName, false, cmdValue);
T.SetStyle();
},
InsertHTML: function (_html) {
ContentObj.focus();
T.GetRange();
var sel = rangy.getSelection();
if (sel && sel.getRangeAt && sel.rangeCount) {
var range = sel.getRangeAt(0);
var node = range.createContextualFragment(_html);
var lastNode = node.lastChild;
range.insertNode(node);
range.setEndAfter(lastNode);
range.collapse(false); //折叠：true光标到开始，false：光标到结束
sel.removeAllRanges();
sel.addRange(range);
sel.collapseToEnd();
};
},
SaveRange: function () {
var sel = rangy.getSelection();
if (sel && sel.getRangeAt && sel.rangeCount) {
RangArr["r_1"] = sel.getRangeAt(0);
}
else {
RangArr["r_1"] = null;
}
},
GetRange: function () {
var sel = rangy.getSelection();
if (sel && sel.getRangeAt && sel.rangeCount) {
var range = RangArr["r_1"];
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
}
},
SetStyle: function () {
$(".editTool div").removeClass("curr");
if (document.queryCommandState("Bold")) { $("#bold").addClass("curr"); }
if (document.queryCommandState("Underline")) { $("#underline").addClass("curr"); }
if (document.queryCommandState("Italic")) { $("#italic").addClass("curr"); }
}
};
var ToolOne = function (options) {
this.SetOptions(options);
ToolObj = DO(this.options.toolId); //工具条对象
ContentObj = DO(this.options.cotentId); //编辑框对象
this.init();
this.BindToolHTML();
}
ToolOne.prototype = {
init: function () {
EventUtil(ContentObj, "click", function () { T.SaveRange(); T.SetStyle(); });
EventUtil(ContentObj, "keyup", function () { T.SaveRange(); T.SetStyle(); });
ToolObj._addClass("editTool");
ContentObj._addClass("bc editContent");
ContentObj.setAttribute("contenteditable", "true");
},
SetOptions: function (_options) {
this.options = {
toolId: "",
cotentId: "",
item: ["bold", "underline", "italic", "inserHTML", "fontsize"]
};
Extend(this.options, _options || {});
},
BindToolHTML: function () {
var _tooHtml = new Array();
_tooHtml.push('bold|<a href="javascript:void(0)" onclick="T.B()"><div id="bold" class="fontbold" title="(Ctrl+B粗体)">B</div></a>');
_tooHtml.push('underline|<a href="javascript:void(0)" onclick="T.U()"> <div id="underline" class="fontbold" title="下划线(Ctrl+U)"><u>U</u></div></a>');
_tooHtml.push('italic|<a href="javascript:void(0)" onclick="T.I()"> <div id="italic" class="fontbold" title="斜体(Ctrl+I)"><i>I</i></div></a>');
_tooHtml.push('inserhtml|<a href="javascript:void(0)" onclick="T.InsertHTML(\'插入值\')"> <div class="fontbold" title="插入值">+</div></a>');
_tooHtml.push('fontsize|<div><select id="selFontSize" onchange="T.FS()">'
+ '<option value="1">1</option>'
+ '<option value="2">2</option>'
+ '<option value="3">3</option>'
+ '<option value="4">4</option>'
+ '<option value="5">5</option>'
+ '<option value="6">6</option>'
+ '<option value="7">7</option>'
+ '</select></div>'
+ '<div>');
for (var i = 0; i < this.options.item.length; i++) {
ToolObj.innerHTML += this.GetTooName(this.options.item[i], _tooHtml);
}
},
GetTooName: function (funName, _tooHtml) {
for (var i = 0; i < _tooHtml.length; i++) {
var val = _tooHtml[i].split('|')[0];
funName = funName.toLowerCase();
val = val.toLowerCase();
if (val == funName) {
return _tooHtml[i].split('|')[1];
}
}
return "";
}
}
