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 GetoffsetLeft = function (element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
//编辑器方法
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();
};
},
InserPhize: function (e) {
var phizeHtml = e.innerHTML;
T.InsertHTML(phizeHtml);
DO('phize').style.display = "none";
DO('img_0').style.border = "";
},
PhizHTML: function (e) {
phize = DO('phize');
var emtop = e.offsetTop;
var emleft = e.offsetLeft;
phize.style.top = parseInt(emtop) + 28 + "px";
phize.style.left = parseInt(emleft) + 100 + "px";
if (phize.style.display == "block") {
phize.style.display = "none";
e.lastChild.lastChild.style.border = '';
}
else {
e.lastChild.lastChild.style.border = 'solid 1px blue';
phize.style.display = "block";
}
},
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"); }
}, phizeMouseOver: function (e) {
e.setAttribute("style", "border:solid 1px blue");
}, phizeMouseOut: function (e) {
e.setAttribute("style", "border:solid 1px #D3E4F0");
}
};
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", "phiz", "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('phiz|<a href="javascript:void(0)" onclick="T.PhizHTML(this)"> <div class="fontbold" title="表情"><img id="img_0" src="emoticons/images/0.gif" width="20" height="20" /></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);
}
this.BindPhize();
},
BindPhize: function () {
var phdiv = document.createElement("div");
phdiv.setAttribute("id", 'phize');
phdiv.setAttribute("style", "display:none;position:absolute;background-color:white");
var phul = document.createElement("ul");
phul.className = 'phul';
phdiv.appendChild(phul);
for (var i = 0; i < 49; i++) {
phul.innerHTML += '<li class="phli" onclick="T.InserPhize(this)" onmouseover="T.phizeMouseOver(this)" onmouseout="T.phizeMouseOut(this)"><img src="emoticons/images/' + i + '.gif" width="24" height="24" /></li>';
}
phdiv.appendChild(phul);
document.body.appendChild(phdiv);
},
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 "";
}
}
