相思资源网 Design By www.200059.com
你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤：
1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。
你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。
复制代码 代码如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>
这样你就可以在这个iframe区域里写字了。
2，选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时，一般是先打字，再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的text属性得到被选中的文本。
复制代码 代码如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3，改变被选中文本的样式。selection.createRange()选中文本，返回一个对象，该对象有一个方法execCommand()，可以用来改变被选中文本的样式。
复制代码 代码如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法：
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")
把上面的每个用法用按钮来实现，你就已经完成了一个简单的可视文本编辑器。
document.execCommand()用法说明
复制代码 代码如下:
Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 打开。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 重做。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 撤消。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。
一个简单的开源编辑器
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
<style type="text/css">
body{ font-size:12px;}
#ed{ height:300px; width:800px; background-color:#fff }
.sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)}
.tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;}
.span0_hover{background-position:-0px -2px;width:22px}
.span1_hover{background-position:-30px -2px;width:22px}
.span2_hover{background-position:-58px -2px;width:22px}
.span3_hover{background-position:-86px -57px;width:73px}
.span4_hover{background-position:-86px -28px;width:73px}
.span5_hover{background-position:-164px -2px;width:22px; background-color:#000000}
.span6_hover{background-position:-194px -2px;width:22px}
.span7_hover{background-position:-45px -192px;width:22px}
.span8_hover{background-position:-76px -192px;width:22px}
.span9_hover{background-position:-58px -247px;width:22px}
.span10_hover{background-position:-86px -247px;width:22px}
.span11_hover{background-position:-113px -247px;width:22px}
.span12_hover{background-position:-476px -192px;width:22px}
.span13_hover{background-position:-505px -192px;width:22px}
.span14_hover{background-position:-333px -247px;width:22px}
.span15_hover{background-position:-532px -192px;width:22px}
.span16_hover{background-position:-560px -192px;width:22px}
.span17_hover{background-position:-455px -247px;width:22px}
.span18_hover{background-position:-222px -2px;width:73px}
.span19_hover{background-position:-380px -2px;width:74px}
.span20_hover{background-position:-460px -2px;width:71px}
.span0{background-position:-0px -57px;width:22px}
.span1{background-position:-30px -57px;width:22px}
.span2{background-position:-58px -57px;width:22px}
.span3{background-position:-86px -57px;width:73px}
.span4{background-position:-86px -28px;width:73px}
.span5{background-position:-164px -57px;width:22px;background-color:#000000}
.span6{background-position:-194px -57px;width:22px}
.span7{background-position:-45px -84px;width:22px}
.span8{background-position:-76px -84px;width:22px}
.span9{background-position:-58px -140px;width:22px}
.span10{background-position:-86px -140px;width:22px}
.span11{background-position:-113px -140px;width:22px}
.span12{background-position:-476px -84px;width:22px}
.span13{background-position:-505px -84px;width:22px}
.span14{background-position:-333px -140px;width:22px}
.span15{background-position:-532px -84px;width:22px}
.span16{background-position:-560px -84px;width:22px}
.span17{background-position:-455px -140px;width:22px}
.span18{background-position:-222px -57px;width:73px}
.span19{background-position:-380px -57px;width:74px}
.span20{background-position:-460px -57px;width:71px}
.span0_active{background-position:-0px -28px;width:22px}
.span1_active{background-position:-30px -28px;width:22px}
.span2_active{background-position:-58px -28px;width:22px}
.span3_active{background-position:-476px -299px;width:22px}
.span4_active{background-position:-505px -299px;width:22px}
.ebody{ height:auto; width:760px; border:1px solid #999999}
.ebar{ width:100%; height:36px; background-color:#F0F2F5;};
.edit{ height:550px; width:100%; border:0px;}
.popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; }
a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;}
a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; }
a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
.textarea{ border:0px;display:none;}
.toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px}
.bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;}
.checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margin-left/*\**/:16px\9;}
.pp{height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5;}
.ppt{
height:24px; width:100%; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; font-weight: bold; vertical-align:middle; line-height:24px;
}
</style>
</head>
<body>
<div id='ss'></div>
<div id='sss'></div>
<script type="text/javascript">
var Sys = (function(ua) {
var s = {};
s.IE = ua.match(/msie ([\d.]+)/) ? true: false;
s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true: false;
s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true: false;
s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true: false;
s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true: false;
s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true: false;
return s;
})(navigator.userAgent.toLowerCase());
Sys.IE6 && document.execCommand("BackgroundImageCache", false, true);
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Each(list, fun) {
for (var i = 0, len = list.length; i < len; i++) {
fun(list[i], i);
}
};
var Css = function(e, o) {
if (typeof o == "string") {
e.style.cssText = o;
return;
}
for (var i in o)
e.style[i] = o[i];
};
var Attr = function(e, o) {
for (var i in o)
e.setAttribute(i, o[i]);
};
var $$ = function(p, e) {
return p.getElementsByTagName(e);
};
function create(e, p, fn) {
var element = document.createElement(e);
p && p.appendChild(element);
fn && fn(element);
return element;
};
function getTarget(e) {
e = e || window.event;
return e.srcElement || e.target;
};
function createtab(tri, tdi, arisetab, arisetr, arisetd, p) {
var table = p ? p.createElement("table") : create("table");
arisetab && arisetab(table);
var tbody = p ? p.createElement("tbody") : create("tbody");
for (var i = 0; i < tri; i++) {
var tr = p ? p.createElement("tr") : create("tr");
arisetr && arisetr(i, tr);
for (var j = 0; j < tdi; j++) {
var td = p ? p.createElement("td") : create("td");
arisetd && arisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
var BindAsEventListener = function(object, fun, args) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
var Getpos = function(o) {
var x = 0,
y = 0;
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (( o = o . offsetParent ));
return {
'x': x,
'y': y
};
};
function addListener(element, e, fn) {
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
};
function removeListener(element, e, fn) {
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn);
};
var Class = function(properties) {
var _class = function() {
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
var Editer = new Class({
options: {
width: 890,
height: 700,
facebg: [{
bgimg: "-4px -4px",
title: "微笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
},
{
bgimg: "-31px -4px",
title: "大笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"
},
{
bgimg: "-58px -4px",
title: "窃笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
},
{
bgimg: "-85px -4px",
title: "眨眼",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-112px -4px",
title: "鬼脸",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-139px -4px",
title: "色色",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
},
{
bgimg: "-167px -4px",
title: "暴牙",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"
},
{
bgimg: "-194px -4px",
title: "讨厌",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"
}],
fontsizedata: {
fontSize: ["字号1", "字号2", "字号3", "字号4", "字号5", "字号6", "字号7"],
fontname: ["宋体", "黑体", "楷体", "隶书", "幼圆", "Arial", "Georgia", "Verdana", "Helvetica"]
},
oninit: function() {}
},
initialize: function(container, data, b, options) {
this.container = container;
this._body = create("div", container);
this.toolbar = create("div", this._body); //工具栏
this.iframe = create("iframe", this._body); //编辑区
this.textarea = create("textarea", this._body); //显示源代码的框框
this.bottom = create("div", this._body); //底部
this.lightbox = b; //lightbox
this.original = create("input"); //显示源代码的按纽
this.ed = null;
this.isfocus = false;
this.option = {};
Extend(this.option, this.options);
Extend(this.option, options);
this.rang = null; //选中区
this.Fpop = null;
this.option.oninit();
this.toolbar.className = "ebar";
this._body.className = "ebody";
this.textarea.className = "textarea";
Css(this._body, {
width: this.option.width + "px",
height: this.option.height + "px"
});
Css(this.textarea, {
width: Sys.IE ? this.option.width - 2 + "px": this.option.width + "px",
height: Sys.IE ? this.option.height - 66 + "px": this.option.height - 70 + "px"
});
Attr(this.iframe, {
src: "about:blank",
width: Sys.IE ? this.option.width: this.option.width - 4,
height: Sys.IE ? this.option.height - 66 : this.option.height - 70
});
Attr(this.original, {
type: "checkbox",
className: "checkbox",
align: "top"
});
this.bottom.className = "bottom";
this.bottom.innerHTML = "<span>显示源代码</span>";
this.bottom.insertBefore(this.original, this.bottom.childNodes[0]);
this.ed = Sys.IE ? this.iframe.contentWindow.document: this.iframe.contentDocument;
this.ed.open();
var div = Sys.IE ? "<div></div>": "";
this.ed.write("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</style></head><body id='my_body'>" + div + "</body></html>");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on"; //设置编辑区为可编辑
for (var i = 0, l = data.length; i < l; i++) {
var o = create("span", this.toolbar);
Attr(o, {
title: data[i].title,
active: false,
unselectable: "on"
});
o.className = "tag " + data[i].Class;
addListener(o, "mouseover", Bind(this, this.Changebgcolor, o, data[i].hover));
addListener(o, "mouseout", Bind(this, this.Changebgcolor, o, data[i].Class));
addListener(o, "click", Bind(this, this[data[i].action], o, data[i].args));
}
//////////////////////////生成工具栏
addListener(this.iframe.contentWindow, "focus", Bind(this,
function() {
this.isfocus = true;
}));
addListener(this.iframe.contentWindow, "blur", Bind(this,
function() {
this.isfocus = false;
}));
addListener(this.ed, 'mousedown', Bind(this, this.Show));
addListener(this.ed, 'mouseup', Bind(this, this.Show));
//////////////////////////这2个事件是来判断光标所在位置是否别编辑
addListener(this.original, 'click', Bind(this, this.Showoriginal, this.original)); //显示源代码
},
Changebgcolor: function(o, name, p) {
if (o.active) return;
o.className = "tag " + name;
},
Show: function() {
var spans = $$(this.toolbar, "span"),
Is;
var elm = [[spans[0], "Bold", "tag span0_active", "tag span0"], [spans[1], "Italic", "tag span1_active", "tag span1"], [spans[2], "Underline", "tag span2_active", "tag span2"], [spans[12], "InsertUnorderedList", "tag span3_active", "tag span12"], [spans[13], "InsertOrderedList", "tag span4_active", "tag span13"]];
for (var i = 0, l = elm.length; i < l; i++) {
Is = this.ed.queryCommandState(elm[i][1]);
elm[i][0].className = Is ? elm[i][2] : elm[i][3];
elm[i][0].active = Is;
}
},
Showoriginal: function(o) {
if (!this.toolbarlayer) {
this.toolbarlayer = create("div", document.body);
this.toolbarlayer.className = "toolbarlayer";
var pos = Getpos(this.toolbar);
Css(this.toolbarlayer, {
width: this.option.width + "px",
left: pos.x + "px",
top: pos.y + "px"
});
}
if (o.checked) {
this.iframe.style.display = "none";
this.textarea.style.display = "block";
this.toolbarlayer.style.display = "block";
this.textarea.value = this.ed.body.innerHTML;
}
else {
this.iframe.style.display = "block";
this.textarea.style.display = "none";
this.toolbarlayer.style.display = "none";
this.ed.body.innerHTML = this.textarea.value;
}
},
Exec: function(o, cmd, para) {
try {
this.ed.execCommand(cmd, false, para);
this.Show();
}
catch(err) {
return;
}
},
InsertImage: function(o) {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
this.makebody(this.Imagepopoup, "350px", "插入图片", "InsertImage", "Imagepopoup");
},
CreateLink: function(o) {
if (Sys.IE) this.rang = this.ed.selection.createRange();
this.lightbox.Show();
this.makebody(this.Linkpopoup, "350px", "插入连接", "CreateLink", "Linkpopoup");
},
Fontcolor: function(o) {
var self = this;
if (!this.fontcolorpopup) {
var color = new popoup({
width: "210px",
title: "颜色选择"
});
this.fontcolorpopup = color.container;
var pos = Getpos(o);
Css(color.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
var bgcolor = ["00", "33", "66", "99", "CC", "FF", "00", "33", "66", "99", "CC", "FF"];
$$(color.container, "div")[1].appendChild(createtab(12, 18,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#333333"
});
},
null,
function(i, j, td) {
var color = i < 6 ? "#" + bgcolor[Math.floor(j / 6)] + bgcolor[Math.floor(j % 6)] + bgcolor[i] : "#" + bgcolor[Math.floor(j / 6) + 3] + bgcolor[Math.floor(j % 6)] + bgcolor[i - 6];
Attr(td, {
width: 10,
height: 10,
unselectable: "on"
});
td.style.backgroundColor = color;
addListener(td, 'click', Bind(self, self.Execa, color, "fontColor"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble));
}))
}
else this.fontcolorpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Expression: function(o) {
var self = this;
if (!this.facebgpopup) {
var expr = new popoup({
width: "190px",
title: "插入表情"
});
this.facebgpopup = expr.container;
var pos = Getpos(o);
Css(expr.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
$$(expr.container, "div")[1].appendChild(createtab(1, this.option.facebg.length,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#FFFFFF"
});
},
null,
function(i, j, td) {
Css(td, {
backgroundImage: "url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",
backgroundPosition: self.option.facebg[j].bgimg
});
Attr(td, {
width: self.option.facebg[i].wl,
height: self.option.facebg[i].wl,
unselectable: "on"
});
addListener(td, 'click', Bind(self, self.Execa, self.option.facebg[j].src, "Expression"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble))
}));
}
else this.facebgpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Layout: function() {
var child = this.ed.body.childNodes;
for (var i = 0, l = child.length; i < l; i++) {
if (child[i].nodeName == "DIV" || child[i].nodeName == "P") child[i].style.textIndent = child[i].style.textIndent == "2em" ? "": "2em";
}
},
Fontsize: function(o) {
if (!this.fontsizepopup) {
var size = new popoup({
width: "210px",
title: "字号"
}),
a;
this.fontsizepopup = size.container;
var pos = Getpos(o);
Css(size.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontSize.length; i < l; i++) {
a = create("a", $$(size.container, "div")[1]);
a.className = "c" + (i + 1);
a.setAttribute("href", "javascript:void(0);")
a.innerHTML = this.option.fontsizedata.fontSize[i];
addListener(a, "click", Bind(this, this.Execa, i, "fontSize"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontsizepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
FontName: function(o) {
if (!this.fontnamepopup) {
var name = new popoup({
width: "200px",
title: "字体"
}),
a;
this.fontnamepopup = name.container;
var pos = Getpos(o);
Css(name.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontname.length; i < l; i++) {
a = create("a", $$(name.container, "div")[1]);
a.className = "n";
a.setAttribute("href", "javascript:void(0);");
a.innerHTML = this.option.fontsizedata.fontname[i];
addListener(a, "click", Bind(this, this.Execa, this.option.fontsizedata.fontname[i], "fontname"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontnamepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
makebody: function(o, w, t, f, n) {
if (!o) {
var self = this;
this[n] = new popoup({
width: w,
title: t
});
this[n].pos();
$$(this[n].container, "div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >连接地址</span> <input style='width:200px;' type='text' /></div><div style='text-align:center; padding-top:15px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
this[n].elm = [$$(this[n].container, "input")[0], $$(this[n].container, "img")[0], $$(this[n].container, "img")[1]];
this[n].elm[0].focus()
addListener(this[n].elm[1], 'click', Bind(this, this.Execa, null, f));
addListener(this[n].elm[2], 'click',
function() {
self.lightbox.Close();
self[n].Close();
});
}
else with(this[n]) {
pos();
Show();
elm[0].value = "";
elm[0].focus();
}
},
Addtable: function() {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
if (Sys.IE) this.rang = this.ed.selection.createRange();
if (!this.tablepopup) {
var self = this;
this.tablepopup = new popoup({
width: "300px",
title: "插入表格"
});
this.tablepopup.pos();
$$(this.tablepopup.container, "div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行数：<input style='width:50px; height:13px' type='text' /> 列数：<input style='width:50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的宽度：<input style='width:50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度：<input style='width:50px; height:13px' type='text' /> px<div style='text-align:center; margin-left:30px; margin-top:7px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
var o = $$(this.tablepopup.container, "input");
this.tablepopup.elm = [o[0], o[1], o[2], o[3], $$(this.tablepopup.container, "img")[0], $$(this.tablepopup.container, "img")[1]];
addListener(this.tablepopup.elm[4], 'click', Bind(this, this.Execa, null, "CreateTable"));
addListener(this.tablepopup.elm[5], 'click',
function() {
self.lightbox.Close();
self.tablepopup.Close();
});
}
else with(this.tablepopup) {
pos();
Show();
elm[0].focus();
}
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Hide: function(o) {
this.facebgpopup && (this.facebgpopup.style.display = "none");
this.fontsizepopup && (this.fontsizepopup.style.display = "none");
this.fontnamepopup && (this.fontnamepopup.style.display = "none");
this.fontcolorpopup && (this.fontcolorpopup.style.display = "none");
removeListener(this.ed, 'click', this.Fpop);
removeListener(document, 'mousedown', this.Fpop);
},
Bubble: function(e) {
if (Sys.IE) {
e.cancelBubble = true
} else {
e.stopPropagation()
}
},
Execa: function(num, stamp) {
var exec = {
fontname: function() {
this.fontnamepopup.style.display = "none";
this.ed.execCommand('FontName', false, num);
},
fontSize: function() {
this.fontsizepopup.style.display = "none";
this.ed.execCommand("FontSize", false, num + 1)
},
fontColor: function() {
this.fontcolorpopup.style.display = "none";
this.ed.execCommand("ForeColor", false, num);
},
CreateLink: function() {
this.lightbox.Close();
this.Linkpopoup.Close();
if (this.Linkpopoup.elm[0].value == "") return;
if (Sys.IE) {
this.rang.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang.parentElement().target = "_blank ";
}
else {
this.ed.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang = this.iframe.contentWindow.getSelection().getRangeAt(0);
this.rang.commonAncestorContainer.parentNode.target = "_blank ";
}
},
InsertImage: function() {
this.lightbox.Close();
this.Imagepopoup.Close();
if (this.Imagepopoup.elm[0].value == "") return;
Sys.IE ? this.rang.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value) : this.ed.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value);
},
Expression: function() {
this.facebgpopup.style.display = "none";
Sys.IE && (this.iframe.contentWindow.focus());
this.ed.execCommand("InsertImage", false, num);
},
CreateTable: function() {
this.lightbox.Close();
this.tablepopup.Close();
var o = this.tablepopup.elm,
p = null;
if (Sys.IE) {
this.rang.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.rang.parentElement();
}
else {
this.ed.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.iframe.contentWindow.getSelection().getRangeAt(0).commonAncestorContainer;
}
var tab = createtab(o[0].value, o[1].value,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#CCCCCC",
width: o[2].value
});
},
null,
function(i, j, td) {
td.height = o[3].value;
td.width = o[2].value / o[1].value;
td.style.backgroundColor = "#FFFFFF"
},
this.ed);
var imgs = p.getElementsByTagName("img");
for (var i = 0, l = p.childNodes.length; i < l; i++) {
if (imgs[i].src == "http://xxx.com/xxxxx.gif") {
p.replaceChild(tab, imgs[i])
}
}
p.insertBefore(this.ed.createElement("br"), tab.nextSibling);
}
};
Bind(this, exec[stamp])();
}
});
var popoup = new Class({
options: {
width: "200px",
title: "标题"
},
initialize: function(options) {
this.container = create("div", document.body);
Extend(this.options, options);
this.title = this.options.title;
this.container.className = "pp";
this.container.style.width = this.options.width;
this.container.innerHTML = "<div class='ppt'><span style='margin-left:8px;'></span></div><div style='height:auto; width:auto; padding:7px; background-color:#FFFFFF'></div>";
this.w = this.container.offsetWidth;
this.h = this.container.offsetHeight;
$$(this.container, "span")[0].innerHTML = this.title;
},
pos: function() {
var str = "left:" + (Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) - this.w) / 2 + "px;top:" + ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 + document.documentElement.scrollTop) + "px"
Css(this.container, str);
},
Show: function() {
this.container.style.display = "";
},
Close: function() {
this.container.style.display = "none";
}
})
var LightBox = {
obj: null,
config: {
Color: "#fff",
Opacity: 80,
zIndex: 5
},
init: function(options) {
Extend(this.config, options || {});
Extend(this, this.config);
delete this.config;
this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
var str = "display:none; z-index:" + this.zIndex + ";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:" + this.Color + (Sys.IE ? ";filter : alpha(opacity:" + this.Opacity + ")": ";opacity :" + this.Opacity / 100);
Css(this.obj, str);
if (Sys.IE6) {
this.obj.style.position = "absolute";
var _self = this;
this._resize = function() {
_self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
_self.obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
};
this.obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';
}
return this;
},
Show: function() {
if (Sys.IE6) {
this._resize();
addListener(window, "resize", this._resize);
}
this.obj.style.display = "block";
},
Close: function() {
this.obj.style.display = "none";
if (Sys.IE6) removeListener(window, "resize", LightBox._resize);
}
}
window.onload = function() {
var data = [{
Class: "span0",
hover: "span0_hover",
title: "加粗",
action: "Exec",
args: "bold"
},
{
Class: "span1",
hover: "span1_hover",
title: "斜体",
action: "Exec",
args: "Italic"
},
{
Class: "span2",
hover: "span2_hover",
title: "下划线",
action: "Exec",
args: "Underline"
},
{
Class: "span3",
hover: "span3_hover",
title: "字号",
action: "Fontsize",
args: null
},
{
Class: "span4",
hover: "span4_hover",
title: "字体",
action: "FontName",
args: null
},
{
Class: "span5",
hover: "span5_hover",
title: "文字颜色",
action: "Fontcolor",
args: null
},
{
Class: "span6",
hover: "span6_hover",
title: "插入链接",
action: "CreateLink",
args: null
},
{
Class: "span7",
hover: "span7_hover",
title: "剪贴",
action: "Exec",
args: "Cut"
},
{
Class: "span8",
hover: "span8_hover",
title: "复制",
action: "Exec",
args: "Copy"
},
{
Class: "span9",
hover: "span9_hover",
title: "左对齐",
action: "Exec",
args: "JustifyLeft"
},
{
Class: "span10",
hover: "span10_hover",
title: "居中对齐",
action: "Exec",
args: "JustifyCenter"
},
{
Class: "span11",
hover: "span11_hover",
title: "右对齐",
action: "Exec",
args: "JustifyRight"
},
{
Class: "span12",
hover: "span12_hover",
title: "项目符号",
action: "Exec",
args: "InsertUnorderedList"
},
{
Class: "span13",
hover: "span13_hover",
title: "编号",
action: "Exec",
args: "InsertOrderedList"
},
{
Class: "span14",
hover: "span14_hover",
title: "插入表格",
action: "Addtable",
args: null
},
{
Class: "span15",
hover: "span15_hover",
title: "减少缩进",
action: "Exec",
args: "Outdent"
},
{
Class: "span16",
hover: "span16_hover",
title: "增加缩进",
action: "Exec",
args: "Indent"
},
{
Class: "span17",
hover: "span17_hover",
title: "清除样式",
action: "Exec",
args: "RemoveFormat"
},
{
Class: "span18",
hover: "span18_hover",
title: "插入图片",
action: "InsertImage",
args: null
},
{
Class: "span19",
hover: "span19_hover",
title: "插入表情",
action: "Expression",
args: null
},
{
Class: "span20",
hover: "span20_hover",
title: "自动排版",
action: "Layout",
args: null
}];
new Editer($('ss'), data, LightBox.init());
}
</script>
</body
</html>
1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。
你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。
复制代码 代码如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>
这样你就可以在这个iframe区域里写字了。
2，选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时，一般是先打字，再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的text属性得到被选中的文本。
复制代码 代码如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>
3，改变被选中文本的样式。selection.createRange()选中文本，返回一个对象，该对象有一个方法execCommand()，可以用来改变被选中文本的样式。
复制代码 代码如下:
<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>
execCommand()的常用用法：
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")
把上面的每个用法用按钮来实现，你就已经完成了一个简单的可视文本编辑器。
document.execCommand()用法说明
复制代码 代码如下:
Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 打开。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 重做。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 停止。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 撤消。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。
一个简单的开源编辑器
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
<style type="text/css">
body{ font-size:12px;}
#ed{ height:300px; width:800px; background-color:#fff }
.sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)}
.tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;}
.span0_hover{background-position:-0px -2px;width:22px}
.span1_hover{background-position:-30px -2px;width:22px}
.span2_hover{background-position:-58px -2px;width:22px}
.span3_hover{background-position:-86px -57px;width:73px}
.span4_hover{background-position:-86px -28px;width:73px}
.span5_hover{background-position:-164px -2px;width:22px; background-color:#000000}
.span6_hover{background-position:-194px -2px;width:22px}
.span7_hover{background-position:-45px -192px;width:22px}
.span8_hover{background-position:-76px -192px;width:22px}
.span9_hover{background-position:-58px -247px;width:22px}
.span10_hover{background-position:-86px -247px;width:22px}
.span11_hover{background-position:-113px -247px;width:22px}
.span12_hover{background-position:-476px -192px;width:22px}
.span13_hover{background-position:-505px -192px;width:22px}
.span14_hover{background-position:-333px -247px;width:22px}
.span15_hover{background-position:-532px -192px;width:22px}
.span16_hover{background-position:-560px -192px;width:22px}
.span17_hover{background-position:-455px -247px;width:22px}
.span18_hover{background-position:-222px -2px;width:73px}
.span19_hover{background-position:-380px -2px;width:74px}
.span20_hover{background-position:-460px -2px;width:71px}
.span0{background-position:-0px -57px;width:22px}
.span1{background-position:-30px -57px;width:22px}
.span2{background-position:-58px -57px;width:22px}
.span3{background-position:-86px -57px;width:73px}
.span4{background-position:-86px -28px;width:73px}
.span5{background-position:-164px -57px;width:22px;background-color:#000000}
.span6{background-position:-194px -57px;width:22px}
.span7{background-position:-45px -84px;width:22px}
.span8{background-position:-76px -84px;width:22px}
.span9{background-position:-58px -140px;width:22px}
.span10{background-position:-86px -140px;width:22px}
.span11{background-position:-113px -140px;width:22px}
.span12{background-position:-476px -84px;width:22px}
.span13{background-position:-505px -84px;width:22px}
.span14{background-position:-333px -140px;width:22px}
.span15{background-position:-532px -84px;width:22px}
.span16{background-position:-560px -84px;width:22px}
.span17{background-position:-455px -140px;width:22px}
.span18{background-position:-222px -57px;width:73px}
.span19{background-position:-380px -57px;width:74px}
.span20{background-position:-460px -57px;width:71px}
.span0_active{background-position:-0px -28px;width:22px}
.span1_active{background-position:-30px -28px;width:22px}
.span2_active{background-position:-58px -28px;width:22px}
.span3_active{background-position:-476px -299px;width:22px}
.span4_active{background-position:-505px -299px;width:22px}
.ebody{ height:auto; width:760px; border:1px solid #999999}
.ebar{ width:100%; height:36px; background-color:#F0F2F5;};
.edit{ height:550px; width:100%; border:0px;}
.popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; }
a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;}
a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; }
a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
.textarea{ border:0px;display:none;}
.toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px}
.bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;}
.checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margin-left/*\**/:16px\9;}
.pp{height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5;}
.ppt{
height:24px; width:100%; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; font-weight: bold; vertical-align:middle; line-height:24px;
}
</style>
</head>
<body>
<div id='ss'></div>
<div id='sss'></div>
<script type="text/javascript">
var Sys = (function(ua) {
var s = {};
s.IE = ua.match(/msie ([\d.]+)/) ? true: false;
s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true: false;
s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true: false;
s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true: false;
s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true: false;
s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true: false;
return s;
})(navigator.userAgent.toLowerCase());
Sys.IE6 && document.execCommand("BackgroundImageCache", false, true);
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
function Each(list, fun) {
for (var i = 0, len = list.length; i < len; i++) {
fun(list[i], i);
}
};
var Css = function(e, o) {
if (typeof o == "string") {
e.style.cssText = o;
return;
}
for (var i in o)
e.style[i] = o[i];
};
var Attr = function(e, o) {
for (var i in o)
e.setAttribute(i, o[i]);
};
var $$ = function(p, e) {
return p.getElementsByTagName(e);
};
function create(e, p, fn) {
var element = document.createElement(e);
p && p.appendChild(element);
fn && fn(element);
return element;
};
function getTarget(e) {
e = e || window.event;
return e.srcElement || e.target;
};
function createtab(tri, tdi, arisetab, arisetr, arisetd, p) {
var table = p ? p.createElement("table") : create("table");
arisetab && arisetab(table);
var tbody = p ? p.createElement("tbody") : create("tbody");
for (var i = 0; i < tri; i++) {
var tr = p ? p.createElement("tr") : create("tr");
arisetr && arisetr(i, tr);
for (var j = 0; j < tdi; j++) {
var td = p ? p.createElement("td") : create("td");
arisetd && arisetd(i, j, td);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
return table;
};
var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
var BindAsEventListener = function(object, fun, args) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
};
var CurrentStyle = function(element) {
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
var Getpos = function(o) {
var x = 0,
y = 0;
do {
x += o.offsetLeft;
y += o.offsetTop;
} while (( o = o . offsetParent ));
return {
'x': x,
'y': y
};
};
function addListener(element, e, fn) {
element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
};
function removeListener(element, e, fn) {
element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn);
};
var Class = function(properties) {
var _class = function() {
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
};
_class.prototype = properties;
return _class;
};
var Editer = new Class({
options: {
width: 890,
height: 700,
facebg: [{
bgimg: "-4px -4px",
title: "微笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
},
{
bgimg: "-31px -4px",
title: "大笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"
},
{
bgimg: "-58px -4px",
title: "窃笑",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
},
{
bgimg: "-85px -4px",
title: "眨眼",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-112px -4px",
title: "鬼脸",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
},
{
bgimg: "-139px -4px",
title: "色色",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
},
{
bgimg: "-167px -4px",
title: "暴牙",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"
},
{
bgimg: "-194px -4px",
title: "讨厌",
wl: 22,
src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"
}],
fontsizedata: {
fontSize: ["字号1", "字号2", "字号3", "字号4", "字号5", "字号6", "字号7"],
fontname: ["宋体", "黑体", "楷体", "隶书", "幼圆", "Arial", "Georgia", "Verdana", "Helvetica"]
},
oninit: function() {}
},
initialize: function(container, data, b, options) {
this.container = container;
this._body = create("div", container);
this.toolbar = create("div", this._body); //工具栏
this.iframe = create("iframe", this._body); //编辑区
this.textarea = create("textarea", this._body); //显示源代码的框框
this.bottom = create("div", this._body); //底部
this.lightbox = b; //lightbox
this.original = create("input"); //显示源代码的按纽
this.ed = null;
this.isfocus = false;
this.option = {};
Extend(this.option, this.options);
Extend(this.option, options);
this.rang = null; //选中区
this.Fpop = null;
this.option.oninit();
this.toolbar.className = "ebar";
this._body.className = "ebody";
this.textarea.className = "textarea";
Css(this._body, {
width: this.option.width + "px",
height: this.option.height + "px"
});
Css(this.textarea, {
width: Sys.IE ? this.option.width - 2 + "px": this.option.width + "px",
height: Sys.IE ? this.option.height - 66 + "px": this.option.height - 70 + "px"
});
Attr(this.iframe, {
src: "about:blank",
width: Sys.IE ? this.option.width: this.option.width - 4,
height: Sys.IE ? this.option.height - 66 : this.option.height - 70
});
Attr(this.original, {
type: "checkbox",
className: "checkbox",
align: "top"
});
this.bottom.className = "bottom";
this.bottom.innerHTML = "<span>显示源代码</span>";
this.bottom.insertBefore(this.original, this.bottom.childNodes[0]);
this.ed = Sys.IE ? this.iframe.contentWindow.document: this.iframe.contentDocument;
this.ed.open();
var div = Sys.IE ? "<div></div>": "";
this.ed.write("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</style></head><body id='my_body'>" + div + "</body></html>");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on"; //设置编辑区为可编辑
for (var i = 0, l = data.length; i < l; i++) {
var o = create("span", this.toolbar);
Attr(o, {
title: data[i].title,
active: false,
unselectable: "on"
});
o.className = "tag " + data[i].Class;
addListener(o, "mouseover", Bind(this, this.Changebgcolor, o, data[i].hover));
addListener(o, "mouseout", Bind(this, this.Changebgcolor, o, data[i].Class));
addListener(o, "click", Bind(this, this[data[i].action], o, data[i].args));
}
//////////////////////////生成工具栏
addListener(this.iframe.contentWindow, "focus", Bind(this,
function() {
this.isfocus = true;
}));
addListener(this.iframe.contentWindow, "blur", Bind(this,
function() {
this.isfocus = false;
}));
addListener(this.ed, 'mousedown', Bind(this, this.Show));
addListener(this.ed, 'mouseup', Bind(this, this.Show));
//////////////////////////这2个事件是来判断光标所在位置是否别编辑
addListener(this.original, 'click', Bind(this, this.Showoriginal, this.original)); //显示源代码
},
Changebgcolor: function(o, name, p) {
if (o.active) return;
o.className = "tag " + name;
},
Show: function() {
var spans = $$(this.toolbar, "span"),
Is;
var elm = [[spans[0], "Bold", "tag span0_active", "tag span0"], [spans[1], "Italic", "tag span1_active", "tag span1"], [spans[2], "Underline", "tag span2_active", "tag span2"], [spans[12], "InsertUnorderedList", "tag span3_active", "tag span12"], [spans[13], "InsertOrderedList", "tag span4_active", "tag span13"]];
for (var i = 0, l = elm.length; i < l; i++) {
Is = this.ed.queryCommandState(elm[i][1]);
elm[i][0].className = Is ? elm[i][2] : elm[i][3];
elm[i][0].active = Is;
}
},
Showoriginal: function(o) {
if (!this.toolbarlayer) {
this.toolbarlayer = create("div", document.body);
this.toolbarlayer.className = "toolbarlayer";
var pos = Getpos(this.toolbar);
Css(this.toolbarlayer, {
width: this.option.width + "px",
left: pos.x + "px",
top: pos.y + "px"
});
}
if (o.checked) {
this.iframe.style.display = "none";
this.textarea.style.display = "block";
this.toolbarlayer.style.display = "block";
this.textarea.value = this.ed.body.innerHTML;
}
else {
this.iframe.style.display = "block";
this.textarea.style.display = "none";
this.toolbarlayer.style.display = "none";
this.ed.body.innerHTML = this.textarea.value;
}
},
Exec: function(o, cmd, para) {
try {
this.ed.execCommand(cmd, false, para);
this.Show();
}
catch(err) {
return;
}
},
InsertImage: function(o) {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
this.makebody(this.Imagepopoup, "350px", "插入图片", "InsertImage", "Imagepopoup");
},
CreateLink: function(o) {
if (Sys.IE) this.rang = this.ed.selection.createRange();
this.lightbox.Show();
this.makebody(this.Linkpopoup, "350px", "插入连接", "CreateLink", "Linkpopoup");
},
Fontcolor: function(o) {
var self = this;
if (!this.fontcolorpopup) {
var color = new popoup({
width: "210px",
title: "颜色选择"
});
this.fontcolorpopup = color.container;
var pos = Getpos(o);
Css(color.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
var bgcolor = ["00", "33", "66", "99", "CC", "FF", "00", "33", "66", "99", "CC", "FF"];
$$(color.container, "div")[1].appendChild(createtab(12, 18,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#333333"
});
},
null,
function(i, j, td) {
var color = i < 6 ? "#" + bgcolor[Math.floor(j / 6)] + bgcolor[Math.floor(j % 6)] + bgcolor[i] : "#" + bgcolor[Math.floor(j / 6) + 3] + bgcolor[Math.floor(j % 6)] + bgcolor[i - 6];
Attr(td, {
width: 10,
height: 10,
unselectable: "on"
});
td.style.backgroundColor = color;
addListener(td, 'click', Bind(self, self.Execa, color, "fontColor"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble));
}))
}
else this.fontcolorpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Expression: function(o) {
var self = this;
if (!this.facebgpopup) {
var expr = new popoup({
width: "190px",
title: "插入表情"
});
this.facebgpopup = expr.container;
var pos = Getpos(o);
Css(expr.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
$$(expr.container, "div")[1].appendChild(createtab(1, this.option.facebg.length,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#FFFFFF"
});
},
null,
function(i, j, td) {
Css(td, {
backgroundImage: "url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",
backgroundPosition: self.option.facebg[j].bgimg
});
Attr(td, {
width: self.option.facebg[i].wl,
height: self.option.facebg[i].wl,
unselectable: "on"
});
addListener(td, 'click', Bind(self, self.Execa, self.option.facebg[j].src, "Expression"));
addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble))
}));
}
else this.facebgpopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Layout: function() {
var child = this.ed.body.childNodes;
for (var i = 0, l = child.length; i < l; i++) {
if (child[i].nodeName == "DIV" || child[i].nodeName == "P") child[i].style.textIndent = child[i].style.textIndent == "2em" ? "": "2em";
}
},
Fontsize: function(o) {
if (!this.fontsizepopup) {
var size = new popoup({
width: "210px",
title: "字号"
}),
a;
this.fontsizepopup = size.container;
var pos = Getpos(o);
Css(size.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontSize.length; i < l; i++) {
a = create("a", $$(size.container, "div")[1]);
a.className = "c" + (i + 1);
a.setAttribute("href", "javascript:void(0);")
a.innerHTML = this.option.fontsizedata.fontSize[i];
addListener(a, "click", Bind(this, this.Execa, i, "fontSize"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontsizepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
FontName: function(o) {
if (!this.fontnamepopup) {
var name = new popoup({
width: "200px",
title: "字体"
}),
a;
this.fontnamepopup = name.container;
var pos = Getpos(o);
Css(name.container, {
left: pos.x + "px",
top: pos.y + o.offsetHeight + "px"
});
for (var i = 0, l = this.option.fontsizedata.fontname.length; i < l; i++) {
a = create("a", $$(name.container, "div")[1]);
a.className = "n";
a.setAttribute("href", "javascript:void(0);");
a.innerHTML = this.option.fontsizedata.fontname[i];
addListener(a, "click", Bind(this, this.Execa, this.option.fontsizedata.fontname[i], "fontname"));
addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
}
} else this.fontnamepopup.style.display = "block";
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
makebody: function(o, w, t, f, n) {
if (!o) {
var self = this;
this[n] = new popoup({
width: w,
title: t
});
this[n].pos();
$$(this[n].container, "div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >连接地址</span> <input style='width:200px;' type='text' /></div><div style='text-align:center; padding-top:15px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
this[n].elm = [$$(this[n].container, "input")[0], $$(this[n].container, "img")[0], $$(this[n].container, "img")[1]];
this[n].elm[0].focus()
addListener(this[n].elm[1], 'click', Bind(this, this.Execa, null, f));
addListener(this[n].elm[2], 'click',
function() {
self.lightbox.Close();
self[n].Close();
});
}
else with(this[n]) {
pos();
Show();
elm[0].value = "";
elm[0].focus();
}
},
Addtable: function() {
if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
this.rang = this.ed.selection.createRange();
}
this.lightbox.Show();
if (Sys.IE) this.rang = this.ed.selection.createRange();
if (!this.tablepopup) {
var self = this;
this.tablepopup = new popoup({
width: "300px",
title: "插入表格"
});
this.tablepopup.pos();
$$(this.tablepopup.container, "div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行数：<input style='width:50px; height:13px' type='text' /> 列数：<input style='width:50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的宽度：<input style='width:50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度：<input style='width:50px; height:13px' type='text' /> px<div style='text-align:center; margin-left:30px; margin-top:7px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
var o = $$(this.tablepopup.container, "input");
this.tablepopup.elm = [o[0], o[1], o[2], o[3], $$(this.tablepopup.container, "img")[0], $$(this.tablepopup.container, "img")[1]];
addListener(this.tablepopup.elm[4], 'click', Bind(this, this.Execa, null, "CreateTable"));
addListener(this.tablepopup.elm[5], 'click',
function() {
self.lightbox.Close();
self.tablepopup.Close();
});
}
else with(this.tablepopup) {
pos();
Show();
elm[0].focus();
}
this.Fpop = Bind(this, this.Hide);
addListener(this.ed, 'click', this.Fpop);
addListener(document, 'mousedown', this.Fpop);
},
Hide: function(o) {
this.facebgpopup && (this.facebgpopup.style.display = "none");
this.fontsizepopup && (this.fontsizepopup.style.display = "none");
this.fontnamepopup && (this.fontnamepopup.style.display = "none");
this.fontcolorpopup && (this.fontcolorpopup.style.display = "none");
removeListener(this.ed, 'click', this.Fpop);
removeListener(document, 'mousedown', this.Fpop);
},
Bubble: function(e) {
if (Sys.IE) {
e.cancelBubble = true
} else {
e.stopPropagation()
}
},
Execa: function(num, stamp) {
var exec = {
fontname: function() {
this.fontnamepopup.style.display = "none";
this.ed.execCommand('FontName', false, num);
},
fontSize: function() {
this.fontsizepopup.style.display = "none";
this.ed.execCommand("FontSize", false, num + 1)
},
fontColor: function() {
this.fontcolorpopup.style.display = "none";
this.ed.execCommand("ForeColor", false, num);
},
CreateLink: function() {
this.lightbox.Close();
this.Linkpopoup.Close();
if (this.Linkpopoup.elm[0].value == "") return;
if (Sys.IE) {
this.rang.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang.parentElement().target = "_blank ";
}
else {
this.ed.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
this.rang = this.iframe.contentWindow.getSelection().getRangeAt(0);
this.rang.commonAncestorContainer.parentNode.target = "_blank ";
}
},
InsertImage: function() {
this.lightbox.Close();
this.Imagepopoup.Close();
if (this.Imagepopoup.elm[0].value == "") return;
Sys.IE ? this.rang.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value) : this.ed.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value);
},
Expression: function() {
this.facebgpopup.style.display = "none";
Sys.IE && (this.iframe.contentWindow.focus());
this.ed.execCommand("InsertImage", false, num);
},
CreateTable: function() {
this.lightbox.Close();
this.tablepopup.Close();
var o = this.tablepopup.elm,
p = null;
if (Sys.IE) {
this.rang.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.rang.parentElement();
}
else {
this.ed.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
p = this.iframe.contentWindow.getSelection().getRangeAt(0).commonAncestorContainer;
}
var tab = createtab(o[0].value, o[1].value,
function(tab) {
Attr(tab, {
cellPadding: 0,
cellSpacing: 1,
border: 0,
bgColor: "#CCCCCC",
width: o[2].value
});
},
null,
function(i, j, td) {
td.height = o[3].value;
td.width = o[2].value / o[1].value;
td.style.backgroundColor = "#FFFFFF"
},
this.ed);
var imgs = p.getElementsByTagName("img");
for (var i = 0, l = p.childNodes.length; i < l; i++) {
if (imgs[i].src == "http://xxx.com/xxxxx.gif") {
p.replaceChild(tab, imgs[i])
}
}
p.insertBefore(this.ed.createElement("br"), tab.nextSibling);
}
};
Bind(this, exec[stamp])();
}
});
var popoup = new Class({
options: {
width: "200px",
title: "标题"
},
initialize: function(options) {
this.container = create("div", document.body);
Extend(this.options, options);
this.title = this.options.title;
this.container.className = "pp";
this.container.style.width = this.options.width;
this.container.innerHTML = "<div class='ppt'><span style='margin-left:8px;'></span></div><div style='height:auto; width:auto; padding:7px; background-color:#FFFFFF'></div>";
this.w = this.container.offsetWidth;
this.h = this.container.offsetHeight;
$$(this.container, "span")[0].innerHTML = this.title;
},
pos: function() {
var str = "left:" + (Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) - this.w) / 2 + "px;top:" + ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 + document.documentElement.scrollTop) + "px"
Css(this.container, str);
},
Show: function() {
this.container.style.display = "";
},
Close: function() {
this.container.style.display = "none";
}
})
var LightBox = {
obj: null,
config: {
Color: "#fff",
Opacity: 80,
zIndex: 5
},
init: function(options) {
Extend(this.config, options || {});
Extend(this, this.config);
delete this.config;
this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
var str = "display:none; z-index:" + this.zIndex + ";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:" + this.Color + (Sys.IE ? ";filter : alpha(opacity:" + this.Opacity + ")": ";opacity :" + this.Opacity / 100);
Css(this.obj, str);
if (Sys.IE6) {
this.obj.style.position = "absolute";
var _self = this;
this._resize = function() {
_self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
_self.obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
};
this.obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';
}
return this;
},
Show: function() {
if (Sys.IE6) {
this._resize();
addListener(window, "resize", this._resize);
}
this.obj.style.display = "block";
},
Close: function() {
this.obj.style.display = "none";
if (Sys.IE6) removeListener(window, "resize", LightBox._resize);
}
}
window.onload = function() {
var data = [{
Class: "span0",
hover: "span0_hover",
title: "加粗",
action: "Exec",
args: "bold"
},
{
Class: "span1",
hover: "span1_hover",
title: "斜体",
action: "Exec",
args: "Italic"
},
{
Class: "span2",
hover: "span2_hover",
title: "下划线",
action: "Exec",
args: "Underline"
},
{
Class: "span3",
hover: "span3_hover",
title: "字号",
action: "Fontsize",
args: null
},
{
Class: "span4",
hover: "span4_hover",
title: "字体",
action: "FontName",
args: null
},
{
Class: "span5",
hover: "span5_hover",
title: "文字颜色",
action: "Fontcolor",
args: null
},
{
Class: "span6",
hover: "span6_hover",
title: "插入链接",
action: "CreateLink",
args: null
},
{
Class: "span7",
hover: "span7_hover",
title: "剪贴",
action: "Exec",
args: "Cut"
},
{
Class: "span8",
hover: "span8_hover",
title: "复制",
action: "Exec",
args: "Copy"
},
{
Class: "span9",
hover: "span9_hover",
title: "左对齐",
action: "Exec",
args: "JustifyLeft"
},
{
Class: "span10",
hover: "span10_hover",
title: "居中对齐",
action: "Exec",
args: "JustifyCenter"
},
{
Class: "span11",
hover: "span11_hover",
title: "右对齐",
action: "Exec",
args: "JustifyRight"
},
{
Class: "span12",
hover: "span12_hover",
title: "项目符号",
action: "Exec",
args: "InsertUnorderedList"
},
{
Class: "span13",
hover: "span13_hover",
title: "编号",
action: "Exec",
args: "InsertOrderedList"
},
{
Class: "span14",
hover: "span14_hover",
title: "插入表格",
action: "Addtable",
args: null
},
{
Class: "span15",
hover: "span15_hover",
title: "减少缩进",
action: "Exec",
args: "Outdent"
},
{
Class: "span16",
hover: "span16_hover",
title: "增加缩进",
action: "Exec",
args: "Indent"
},
{
Class: "span17",
hover: "span17_hover",
title: "清除样式",
action: "Exec",
args: "RemoveFormat"
},
{
Class: "span18",
hover: "span18_hover",
title: "插入图片",
action: "InsertImage",
args: null
},
{
Class: "span19",
hover: "span19_hover",
title: "插入表情",
action: "Expression",
args: null
},
{
Class: "span20",
hover: "span20_hover",
title: "自动排版",
action: "Layout",
args: null
}];
new Editer($('ss'), data, LightBox.init());
}
</script>
</body
</html>
标签：
编辑器,在线编辑器,js编辑器
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无学习js在线html(富文本,所见即所得)编辑器的评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/19
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？