富文本编辑器 - 简单版本

by redky

HTML

<body>
<div class="head clearfix">
  <h1>
    <a href="http://www.cnblogs.com/twobin/">twobin’ 
      <span id="blog">blog</span>
    </a>
  </h1>
  <span id="subtitle">　|　富文本编辑器...</span>
</div> 
    
<div id="editor">
	<div id="editor-toolbar">
    	<div class="editor-toolbar-item" id="editor-toolbar-bold" title="加粗"  ec="bold" unselectable="on">
            <b>粗</b>
    	</div>
        <div class="editor-toolbar-item" id="editor-toolbar-italic" title="斜体" ec="italic" unselectable="on">
            <b>斜</b>
    	</div>
        <div class="editor-toolbar-item" id="editor-toolbar-underline" title="下划线" ec="underline" unselectable="on">
            <b>划</b>
    	</div>
        <div class="editor-toolbar-item" id="editor-toolbar-linethrough" title="删除线" ec="StrikeThrough" unselectable="on">
            <b>删</b>
    	</div>
        <div class="editor-toolbar-blank" >
        	|
    	</div>
        <div class="editor-toolbar-item editor-toolbar-align" id="editor-toolbar-justifyleft" title="左对齐" ec="justifyleft" unselectable="on">
            <b>左</b>
    	</div>
        <div class="editor-toolbar-item editor-toolbar-align" id="editor-toolbar-justifycenter" title="居中对齐" ec="justifycenter" unselectable="on">
            <b>中</b>
    	</div>
        <div class="editor-toolbar-item editor-toolbar-align" id="editor-toolbar-justifyright" title="右对齐" ec="justifyright" unselectable="on">
            <b>右</b>
    	</div>
        <div class="editor-toolbar-blank" >
        	|
    	</div>
        <div class="editor-toolbar-item editor-toolbar-list" id="editor-toolbar-ol" title="有序列表" ec="insertorderedlist" unselectable="on">
            <b>有序</b>
    	</div>
        <div class="editor-toolbar-item editor-toolbar-list" id="editor-toolbar-ul" title="无序列表" ec="insertunorderedlist" unselectable="on">
            <b>无序</b>
    	</div>
        <div style="display:none;" class="editor-toolbar-item" id="editor-toolbar-quoteright" title="引用" ec="blockquote" 
unselectable="on">
         ...

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
	padding:0;
	margin:0;
}
body{
	font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
	font-size:12px;
	background:#f8f8f8;
}
a{
	outline:none;
	-moz-outline:none;
	text-decoration:none;
}
.clearfix{
	zoom:1;
	_height:1px;
}
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.head{
	height:50px;
	line-height:50px;
	padding-left:200px;
	border-bottom:1px solid #eee;
	box-shadow: 1px 1px 5px #ccc;
    background:#fff;
}
.head h1{
	float:left;
	width:200px;
	height: 51px;
	font-weight:bold;
	font-size:24px;
	background-color: rgb(31, 123, 155);
	text-align: center;
}
.head h1 a{
	color: #fff;
}
#blog{
	font-weight:normal;
	font-size:16px;
	color: #fff;
}
#subtitle{
	display:block;
	float:right;
	font-size:16px;
	color:#999;
	line-height:16px;
	margin:20px 200px 0 0;
}
#editor{
	width:600px;
	margin:100px auto 0;
	border: 1px solid #dddddd;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #b7b7b7;
	background-color: white;
	position: relative;
	overflow: visible;
	border-radius: 4px;
	box-shadow: 0 1px 1px #d3d1d1;
}
#editor-toolbar{
	height:25px;
	padding:10px 10px;
	border-bottom:1px solid #eee;
	-webkit-user-select: none;
}
.editor-toolbar-item{
	float:left;
	height:25px;
	line-height:25px;
	padding:0 10px;
	margin:0px auto;
	text-align: center;
	cursor:default;
	font-size:14px;
	color:rgb(20,68,101);
	-moz-user-select: none; /*火狐*/
    -webkit-user-select: none;  /*webkit浏览器*/
    -ms-user-select: none;   /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}
.editor-toolbar-item i{
	-moz-user-select: none; /*火狐*/
	-webkit-user-select: none;  /*webkit浏览器*/
	-ms-user-select: none;   /*IE10*/
	-khtml-user-select: none; /*早期浏览器*/
	user-select:...

JavaScript

/*
为什么要用iframe来开发富文本编辑器是基于多方面考虑的。以下是我个人的看法：

1.用iframe可以解决浏览器的兼容性问题。在iframe下可以很方便的获取选中的文字等。

2.在iframe下编辑可以实现所见即所得的效果。相当于是iframe下显示的是浏览器解析源码后的内容。

3.在iframe下是直接在iframe下的document中进行操作并不会影响到当前文档的document。

因此，iframe就是一种所见即所得的编辑器。
*/
window.onload = function(){
	new R_editor({
		editor: "editor",
		editorCon: "editor-con"
	})
}

//通过元素ID取得该元素
var GE = function(id){ 
	return typeof id === "string" ? document.getElementById(id) : id;
}
//添加事件监听
var EventUtil = {};
EventUtil.addHandler = function (ele, type, handler) {
    if (ele.addEventListener) {
        ele.addEventListener(type, handler, false);
    } else if (ele.attachEvent) {
        ele.attachEvent("on" + type, handler);
    } else {
        ele["on" + type] = handler;
    }
};
//移除事件监听        
EventUtil.removeHandler = function (ele, type, handler) {
    if (ele.removeEventListener) {
        ele.removeEventListener(type, handler, false);
    } else if (ele.detachEvent) {
        ele.detachEvent("on" + type, handler);
    } else { 
        ele["on" + type] = null;
    }
};
//通过className取得元素
var getClass = function(cls,pat,tag) {
    pat = pat || document;
    tag = tag || "*";
    if("getElementsByClassName" in pat) {
        return pat.getElementsByClassName(cls)
    }else {
        var _all = pat.getElementsByTagName(tag),
            reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
            _arr = [],
            i = 0,
            len = _all.length;
        for(; i<len; i++) {
            if(reg.test(_all[i].className)) 
            	_arr.push(_all[i]);
        }
        return _arr;
    }
}
//是否存在该类名
var hasClass = function(ele, cls) {
    return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}
//如果不存在该类名，则添加该类名
var addClass = function(ele, cls) {
    if (!this.hasClass(ele, cls)) 
    	ele.className += " " + cls;
}
//移除该类名
var removeClass = function(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '');
        ele.className =...