首先是简单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"});
})
效果是这样