学习js在线html(富文本,所见即所得)编辑器_基础知识

你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤：

1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。
你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。

这样你就可以在这个iframe区域里写字了。

2，选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时，一般是先打字，再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的text属性得到被选中的文本。

3，改变被选中文本的样式。selection.createRange()选中文本，返回一个对象，该对象有一个方法execCommand()，可以用来改变被选中文本的样式。

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()用法说明

一个简单的开源编辑器
": "";
this.ed.write("" + div + "");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on"; //设置编辑区为可编辑
for (var i = 0, l = data.length; 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 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 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 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 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 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 = " "
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 = "