jq富文本_所见即所得的jQuery富文本编辑器插件-wysiwyg.js

wysiwyg.js是一款所见即所得的轻量级 jQuery 富文本编辑器插件。wysiwyg.js没有任何依赖，大小只有12k。该富文本编辑器的特点还有：

可以将任何HTML元素设置为contenteditable(可编辑)模式。

支持选择事件：例如工具条。

支持键盘事件：例如处理热键。

支持占位符：可以显示和隐藏占位文字。

提供众多的方法：.bold(), .forecolor(), .inserthtml()...。

浏览器兼容

Internet Explorer 6+

Firefox 3.5+

Chrome 4+

Safari 3.1+

如果一个已经被作为“元素”使用，该富文本编辑器插件将：

将保持为同步状态。

如果浏览器不支持 contenteditable 则将回退。

旧的 iOS 和 Android 2.3-也将回退为。

该富文本编辑器还有一个大小10k(minified)的jQuery插件-$.wysiwyg()，在加上一个配套的2k CSS文件可以创建全部功能的wysiwyg富文本编辑器。它依赖于：

wysiwyg.js

jQuery

FontAwesome (或 JPG/PNG/GIF/SVG 图片)

wysiwyg.js-API

// create wysiwyg:

var wysiwygeditor = wysiwyg({

element: document.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

// selection and popup:

wysiwygeditor.collapseSelection();

wysiwygeditor.openPopup(); -> popup-handle

wysiwygeditor.closePopup();

// exec commands:

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 );

$.wysiwyg()-API

var $editor = $('#editor').wysiwyg({

classes: 'some-more-classes',

toolbar: 'selection'|'top'|'top-selection'|'bottom'|'bottom-selection',

buttons = { ... },

submit = { ... },

placeholder: 'Type your text here...',

dropfileclick: 'Click or drop image',

placeholderUrl: 'www.example.com',

maxImageSize: [width,height],

onImageUpload: function( insert_image ){},

onKeyEnter: function(){}

})

Properties:

$editor.wysiwyg('container'); -> $(container-div)

$editor.wysiwyg('shell'); -> wysiwyg.js API

Events:

.focus(function(){})

.blur(function(){})

.change(function(){});