简单的web编辑器

首先是简单web编辑器的css

@CHARSET "UTF-8";


.RichTextArea .toolbar .bold {
	background-position: -48px 0px;

}

.RichTextArea .toolbar .italic {
	background-position: -144px 0px;
}

.RichTextArea .toolbar .underline {
	background-position: -430px 0px;
}

.RichTextArea .toolbar .JustifyLeft {
	background-position: -192px 0px;
}

.RichTextArea .toolbar .JustifyCenter {
	background-position: -72px 0px;
}

.RichTextArea .toolbar .JustifyRight {
	background-position: -286px 0px;
}

.RichTextArea .toolbar .insertOrderedList {
	background-position: -215px 0px;
}

.RichTextArea .toolbar .insertUnorderedList {
	background-position: -408px 0px;
}

.RichTextArea .toolbar .indent {
	background-position: -120px 0px;
}

.RichTextArea .toolbar .outdent {
	background-position: -238px 0px;
}

.RichTextArea {
	width: 100%;
	height: 100%;
	text-align: left;
}

.RichTextArea .RichTextContent {
	border: 1px solid black ;
	height: 90%;
	width: 100%;
	font-size: 22px;
	overflow: auto;
	background:white;
	word-wrap: break-word;
	word-break: break-all;
	white-space:normal;
	text-overflow: clip;
}


.RichTextArea .toolbar {
	border: 1px solid black ;
	width: 100%;
	background: lightgray;
	font-size: 0;
	word-spacing: 0px;
	display: block;
}

.RichTextArea .toolbar select {
	padding: 0px;
	font-size: 18px;
	height: 32px;
	vertical-align:middle;
	width: auto;
}


.RichTextArea .toolbar input {
	background-image: url('../images/EditorIcons.png');
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	padding: 0px;
	display: inline-block;
	margin-top: 2px;
	vertical-align:middle; 
}

然后是编辑器实现

	jQuery.widget("xway.RichTextArea", {
		
		_RichEditor : null,
		_ctx : null,

		options: {
			hidden : null
		},
		
		_create: function() {
    		if (this.element[0].contentDocument) {
    			this._ctx = this.element[0].contentDocument;
    		}
    		else {
    			this._ctx =  this.element[0].ownerDocument;
    		}
			this._RichEditor = this.MakeRichEditor();
			this.element.append(this._RichEditor);
			
		},
		
		_init: function() {
		},
		
		_destroy: function() {
			this._super();
			this._RichEditor = null;
		},	
	
		_setOption: function( key, value ) {
			this._superApply( arguments );
	     },
	    	     
	     onblur : function(widget) {
	    	 if (widget.options.hidden != null) {
	    		 var h = document.getElementById(widget.options.hidden);
	    		 h.value = widget.getHtml();
	    	 }
	     },
	     
	     getHtml : function() {
	    	 var edit = $(".RichTextContent")[0];
	    	 return $(edit).html();
	     },
	     
	     getText : function() {
	    	 var edit = $(".RichTextContent")[0];
	    	 return $(edit).text();
	     },
	     
		doCommand : function(ctx, cmd, p) {
			if (typeof(p) == "undefinied") {
				p = null;
			}
			ctx.execCommand (cmd, false, p);
		},


	     createCommand : function(css, cmd) {
			var input = document.createElement("input");
			input.type = 'button'
			input.className = css;
			
			var f = this.doCommand;
			var c = this._ctx;
			input.onclick = function() { f(c, cmd); };
			
			return input;
	     },
	     
	     createOption : function(v, styleName, style, text) {
				var option = document.createElement("option");
				option.appendChild( document.createTextNode(text) );
				option.value = v;
				option.style[styleName] = style;
				return option;
	     },
	     
		 MakeRichEditor : function() {
			var b = this.onblur;
			var t = this;
			
			var RichTextArea = document.createElement("div");
				RichTextArea.className = 'RichTextArea';
				
			var toolbar = document.createElement("div");
				toolbar.className = 'toolbar';
			
			var RichTextContent = document.createElement("div");
				RichTextContent.className = 'RichTextContent';
				RichTextContent.contentEditable = true;
				$(RichTextContent).blur( function() { b(t); } );
				var children = this.element[0].childNodes;
				for (var i=children.length-1; i>=0; i--) {
					var child = this.element[0].childNodes[i];
					RichTextContent.appendChild(this.element[0].removeChild(child));
				}

			
			toolbar.appendChild( this.createCommand('bold', 'bold') );
			toolbar.appendChild( this.createCommand('italic', 'italic') );
			toolbar.appendChild( this.createCommand('underline', 'underline') );
			toolbar.appendChild( this.createCommand('JustifyLeft', 'JustifyLeft') );
			toolbar.appendChild( this.createCommand('JustifyCenter', 'JustifyCenter') );
			toolbar.appendChild( this.createCommand('JustifyRight', 'JustifyRight') );
			toolbar.appendChild( this.createCommand('insertOrderedList', 'insertOrderedList') );
			toolbar.appendChild( this.createCommand('insertUnorderedList', 'insertUnorderedList') );
			toolbar.appendChild( this.createCommand('indent', 'indent') );
			toolbar.appendChild( this.createCommand('outdent', 'outdent') );
			
			
			var c = this._ctx;
			var f = this.doCommand;
			var formatblock = document.createElement("select");
				formatblock.className = 'formatblock';
				formatblock.onchange = function() {f(c, 'formatblock', formatblock.value); formatblock.selectedIndex=0; };
				
				formatblock.appendChild( this.createOption(null, 'fontSize', null, getLocaleText('FontSize')) ); 
				formatblock.appendChild( this.createOption('h6', 'fontSize', 'x-small', '6') ); 
				formatblock.appendChild( this.createOption('h5', 'fontSize', 'small', '5') ); 
				formatblock.appendChild( this.createOption('h4', 'fontSize', 'medium', '4') );
				formatblock.appendChild( this.createOption('h3', 'fontSize', 'large', '3') ); 
				formatblock.appendChild( this.createOption('h2', 'fontSize', 'x-large', '2') ); 
				formatblock.appendChild( this.createOption('h1', 'fontSize', 'xx-large', '1') ); 
			toolbar.appendChild( formatblock );
			
			var forecolor = document.createElement("select");
				forecolor.className = 'forecolor';
				forecolor.onchange = function() {f(c, 'forecolor', forecolor.value); forecolor.selectedIndex=0; };
				forecolor.appendChild( this.createOption(null, 'background-color', null, getLocaleText('Color')) );
				forecolor.appendChild( this.createOption('red', 'background-color', 'red', '  ') );
				forecolor.appendChild( this.createOption('green', 'background-color', 'green', '  ') );
				forecolor.appendChild( this.createOption('blue', 'background-color', 'blue', '  ') );
				forecolor.appendChild( this.createOption('gray', 'background-color', 'gray', '  ') );
				forecolor.appendChild( this.createOption('black', 'background-color', 'black', '  ') );
				forecolor.appendChild( this.createOption('white', 'background-color', 'white', '  ') );
			toolbar.appendChild( forecolor );

			var backcolor = document.createElement("select");
				backcolor.className = 'backcolor';
				backcolor.onchange = function() {f(c, 'backcolor', backcolor.value); backcolor.selectedIndex=0; };
				backcolor.appendChild( this.createOption(null, 'background-color', null, getLocaleText('BackColor')) );
				backcolor.appendChild( this.createOption('red', 'background-color', 'red', '  ') );
				backcolor.appendChild( this.createOption('green', 'background-color', 'green', '  ') );
				backcolor.appendChild( this.createOption('blue', 'background-color', 'blue', '  ') );
				backcolor.appendChild( this.createOption('gray', 'background-color', 'gray', '  ') );
				backcolor.appendChild( this.createOption('black', 'background-color', 'black', '  ') );
				backcolor.appendChild( this.createOption('white', 'background-color', 'white', '  ') );
			toolbar.appendChild( backcolor );

			var fontname = document.createElement("select");
				fontname.className = 'fontname';
				fontname.onchange = function() {f(c, 'fontname', fontname.value); fontname.selectedIndex=0; };
				fontname.appendChild( this.createOption(null, 'font-family', null, getLocaleText('FontFamily')) );
				fontname.appendChild( this.createOption('Arial', 'font-family', 'Arial', 'Arial') );
				fontname.appendChild( this.createOption('Arial Black', 'font-family', 'Arial Black', 'Arial Black') );
				fontname.appendChild( this.createOption('Comic Sans', 'font-family', 'Comic Sans', 'Comic Sans') );
				fontname.appendChild( this.createOption('Helvetica', 'font-family', 'Helvetica', 'Helvetica') );
				fontname.appendChild( this.createOption('Times', 'font-family', 'Times', 'Times') );
				fontname.appendChild( this.createOption('Verdana', 'font-family', 'Verdana', 'Verdana') );
			toolbar.appendChild( fontname );

			RichTextArea.appendChild(toolbar);
			RichTextArea.appendChild(RichTextContent);
			
			return RichTextArea;
		 }
	});

如何使用编辑器

<div id="richeditor" style="height:500px;" >${content }</div>

 <input type="hidden" name="content" id="content" />

$(function() {
	$("#richeditor").RichTextArea({hidden: "content"});
})

效果是这样