简单的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"});})

效果是这样