wysiwyg.js是一款十分强大的、所见即所得的jQuery富文本编辑器插件。wysiwyg.js富文本编辑器体积小，支持选择、键盘、占位等众多事件。而且该富文本编辑器的兼容性十分好，甚至兼容IE6。wysiwyg.js没有任何依赖，大小只有12k。该富文本编辑器的特点还有：（1）可以将任何HTML元素设置为contenteditable（可编辑）模式。（2）支持选择事件：例如工具条。（3）支持键盘事件：例如处理热键。（4）支持占位符：可以显示和隐藏占位文字。（5）提供众多的方法：.bold(),.forecolor(),.inserthtml()...。
工具/原料
笔记本电脑或是台式机
互联网
jQuery
wysiwyg.js
方法/步骤
1、<linkrel="stylesheet"typ娣定撰钠e="text/cs霜杼厮贿s"href="css/wysiwyg-editor.css"/> <scripttype="text/javascript"src="js/jquery.min.js"></script> <scripttype="text/javascript"src="js/wysiwyg.js"></script> <scripttype="text/javascript"src="js/wysiwyg-editor.js"></script>
2、HTML结构如下图所示： <textareaid="editor1"name="editor"placeholder="Typeyourtexthere..."></textarea>
3、//createwysiwyg:varwysiwygeditor=wysiwyg({e盟敢势袂lement:docum髫潋啜缅ent.getElementById('editor-id'),onkeypress:function(code,character,shiftKey,altKey,ctrlKey,metaKey){},onselection:function(collapsed,rect,nodes,rightclick){},onplaceholder:function(visible){},hijackcontextmenu:false});//properties:wysiwygeditor.getElement();wysiwygeditor.getHTML();->'html'wysiwygeditor.setHTML(html);wysiwygeditor.getSelectedHTML();->'html'|false//selectionandpopup:wysiwygeditor.collapseSelection();wysiwygeditor.openPopup();->popup-handlewysiwygeditor.closePopup();//execcommands:wysiwygeditor.removeFormat();wysiwygeditor.bold();wysiwygeditor.italic();wysiwygeditor.underline();wysiwygeditor.strikethrough();wysiwygeditor.forecolor('#color');wysiwygeditor.highlight('#color');wysiwygeditor.fontName(fontname);wysiwygeditor.fontSize(fontsize);wysiwygeditor.subscript();wysiwygeditor.superscript();wysiwygeditor.align('left'|'center'|'right'|'justify');wysiwygeditor.format(tagname);wysiwygeditor.insertLink('http://url.com/');wysiwygeditor.insertImage('http://url.com/');wysiwygeditor.insertHTML('html');wysiwygeditor.insertList(ordered);
4、var$editor=$('#e蟠校盯昂ditor').wysiwyg({classes:媪青怍牙'some-more-classes',toolbar:'selection'|'top'|'top-selection'|'bottom'|'bottom-selection',buttons={...},submit={...},placeholder:'Typeyourtexthere...',dropfileclick:'Clickordropimage',placeholderUrl:'www.example.com',maxImageSize:[width,height],onImageUpload:function(insert_image){},onKeyEnter:function(){}})Properties:$editor.wysiwyg('container');->$(container-div)$editor.wysiwyg('shell');->wysiwyg.jsAPIEvents:.focus(function(){}).blur(function(){}).change(function(){});
5、运行效果如下图所示：
6、浏览器兼容性，如下图所示：
