先打造好毛坯，添加上各位按钮与下拉选择框，如字体、字号、对齐、斜体、加粗、编号、缩进、背景色、前景色……为了方便我们按制样式，按钮是用span模拟的。
&!doctype html&
&html dir="ltr" lang="zh-CN"&
&meta charset="utf-8"/&
&meta http-equiv="X-UA-Compatible" content="IE=Edge"&
&style type="text/css"&
float: width:380background:#D5F3F4;padding-left:10
#editor span.button{
display:float:border: 1px solid
#CCC;margin:1px 5px 1px 0color: #000;
background: #D0E8FC;width:40height:20text-align:
#editor select{ display: float:height:20width:60margin-right:5}
textarea {width:382height:100}
&title&富文本编辑器&/title&
&div id="editor"&
&span class="button"&加粗&/span&
&span class="button"&斜体&/span&
&span class="button"&下划&/span&
&span class="button"&居中&/span&
&span class="button"&居左&/span&
&span class="button"&居右&/span&
&span class="button"&悬挂&/span&
&span class="button"&缩进&/span&
&span class="button"&无序&/span&
&span class="button"&有序&/span&
&option value="SimSun"&宋体&/option&
&option value="LiSu"&隶书&/option&
&option value="KaiTi_GB2312"&楷体&/option&
&option value="YouYuan"&幼圆&/option&
&option value="SimHei"&黑体&/option&
&option value="Microsoft YaHei"&雅黑&/option&
&option value="Comic Sans MS"&Comic Sans MS&/option&
&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 style="color:#000000" value="#000000"&■■&/option&
&option style="color:#FF8080" value="#FF8080"&■■&/option&
&option style="color:#FFFF00" value="#FFFF00"&■■&/option&
&option style="color:#80FF00" value="#80FF00"&■■&/option&
&option style="color:#00FFFF" value="#00FFFF"&■■&/option&
&option style="color:#0000FF" value="#0000FF"&■■&/option&
&option style="color:#FF00FF" value="#FF00FF"&■■&/option&
&option style="color:#000000" value="#000000"&■■&/option&
&option style="color:#FF8080" value="#FF8080"&■■&/option&
&option style="color:#FFFF00" value="#FFFF00"&■■&/option&
&option style="color:#80FF00" value="#80FF00"&■■&/option&
&option style="color:#00FFFF" value="#00FFFF"&■■&/option&
&option style="color:#0000FF" value="#0000FF"&■■&/option&
&option style="color:#FF00FF" value="#FF00FF"&■■&/option&
&br style="clear:both"/&
&textarea&&/textarea&
&select title="fontsize">
&!-- 省略 -->
&select title="forecolor">
&!-- 省略 -->
&select title="backcolor">
&!-- 省略 -->
window.onload = function(){
var editor = document.getElementById("editor");
var buttons = editor.getElementsByTagName("span");
var selects = editor.getElementsByTagName("select");
for(var i = 0,l= buttons.i&l;i++){
buttons[i].onclick = new function(){
var button=buttons[i];
return function(){
document.getElementById("exe").innerHTML =
"调用了"+button.getAttribute("title")+"命令";
for(i=0,l=selects.i&l;i++){
selects[i].onchange = new function(){
var select = selects[i];
return function(){
document.getElementById("exe").innerHTML =
"调用了"+select.getAttribute("title")+"命令,并传入了"+
select.options[select.selectedIndex].value+"参数！";
富文本编辑器
博客园竟然和谐了alert!!!!
Comic Sans MS
&textarea>&/textarea>
好了，那么怎么样编辑文本区(textarea)的文字呢？错，文本区的文字本身就可以编辑，就是怎么也不可能显示其编辑后的效果。我们通常是在div与iframe中编辑。要想在DIV中编辑，设置其contentEditable = "true"，若iframe，还可以用designMode="on"。通常人们都是用ifame，这样做当然有它的道理，但一开始，照顾初心者，我们用div实现一下吧。
&div id="workaround"&
#workaround {width:382height:100border:1px solid #0065FD;}
那么怎么获得我们选中的文字？不，这个提法也不对，我们不是对文字直接进行操作，而对能对这些文字进行操作的对象进行操作……实在太拗口了！这就是传说中的Range对象了！
var getRangeObject = function(){
if(document.implementation.hasFeature("Range", "2.0")){
document.createRange();//W3C
document.selection.createRange();//IE
但上面这个函数离我们的目标有些差距，无错，document.selection.createRange.execCommand('bold')就可以把我们选出中的文字加粗了，但火狐那边就不是这回事！这与它们的执行模式有关，当我们选中一段文字时，IE会立即把它们放进Range对象中，但符合W3C标准的游览器不会，它是空的，虽然我们手动加入……手动加入就手动加入吧，自己动手，丰衣足食！
var getRangeObject = function() {
if (window.getSelection){//W3C
var range = document.createRange(),
selection = window.getSelection();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
return document.selection.createRange();
但是还是失败了，究其原因，标准的Range对象()是没有execCommand()方法。而IE的Range对象，说到底是TextRange对象，两者有很大差别。那怎么办？先放一放它，先实现了IE的再说，以后我们用iframe的document来执行execCommand()便是！
window.onload = function(){
var editor = document.getElementById("editor");
var buttons = editor.getElementsByTagName("span");
var selects = editor.getElementsByTagName("select");
var workaround = document.getElementById("workaround");
workaround.contentEditable = "true";
for(var i = 0,l= buttons.i&l;i++){
buttons[i].onclick = new function(){
var command=buttons[i].getAttribute("title");
return function(){
document.selection.createRange().execCommand(command);//IE only
for(i=0,l=selects.i&l;i++){
selects[i].onchange = new function(){
var select = selects[i];
return function(){
var command = select.getAttribute("title"),
value = select.options[select.selectedIndex].
document.selection.createRange().execCommand(command,false,value);//IE only
富文本编辑器
Comic Sans MS
注意，我们在按扭上面绑定了一个IE私有属性unselectable，并设置为on，这是防止当我们点击按钮时，TextRange对象因为选择对象转移，把原来选择的文本丢失了。其他游览器也有相似的功能，如safari，chrome为onselectstart="" ，火狐为
style="-moz-user-select:"。
虽然兼容火狐失败，但作为副产品，搞了这个
&!doctype html&
&html dir="ltr" lang="zh-CN"&
&meta charset="utf-8"/&
&meta http-equiv="X-UA-Compatible" content="IE=Edge"&
&style type="text/css"&
list-style:
#help{background:#9}
&script type="text/javascript"&
var getSelectedText = function(text_id){
var t = document.getElementById(text_id);
if(window.getSelection) {
if(t.selectionStart != undefined && t.selectionEnd != undefined){
return t.value.substring(t.selectionStart,t.selectionEnd);
return "";
return document.selection.createRange().
var execute = function(id){
document.getElementById("help").innerHTML = getSelectedText(id);
&title&兼容firefox选取textarea文本的方法&/title&
&li&兼容firefox选取textarea文本的方法&/li&
&textarea id="textarea" rows="10" cols="70"&
最近看到astroturf 介绍 http://en.wikipedia.org/wiki/Astroturfing,
联想到blog 泛滥的草根话语.
口口声声喊草根的, 大多是草皮.
就像 北京申请奥运时, 远看路边都是绿茵一片的,大多是
假的草皮, 甚至是临时的绿漆.
真正的草根,是沉默的,无声的.
一旦发出声音, 你已经离开了草根,属于另外的集团.
话一出口, 草根已离.
( 其中包括我自己.)
&/textarea&
&li&&button onclick="execute('textarea');"&获取选中的文字段&/button&&/li&
&p id="help"&&/p&
,我们将改用iframe实现富本编辑器，处理众多的兼容问题！人人网 - 抱歉
哦，抱歉，好像看不到了
现在你可以:
看看其它好友写了什么
北京千橡网景科技发展有限公司：
文网文[号??京公网安备号?甲测资字
文化部监督电子邮箱：wlwh@??
文明办网文明上网举报***： 举报邮箱：&&&&&&&&&&&&