Simple WYSIWYG Rich Content Editor with no dependencies (WYSIWYG.JS)

WYSIWYG.js is a (minified) 12k contenteditable-editor with no dependencies.

It does only:
* Transforms any HTML-element into contenteditable
* onselection-event: e.g. to open a toolbar
* onkeypress-event: e.g. to handle hotkeys
* onplaceholder-event: show/hide a placeholder
* .bold(), .forecolor(), .inserthtml(), … functions

It works with:
* Internet Explorer 6+
* Firefox 3.5+
* Chrome 4+
* Safari 3.1+

If a <textarea> was used as ‘element’, the library:
* keeps the <textarea> in sync
* falls back to the <textarea> if the browser does not support ‘contenteditable’
* Old iOS and Android 2.3- also degrade to <textarea>

There is also a (minified) 10k jQuery-plugin ‘$.wysiwyg()’ – plus (minified) 2k CSS –
to create a full-featured editor which depends on:
* wysiwyg.js
* jQuery
* FontAwesome (or JPG/PNG/GIF/SVG images)
The toolbar is easy to extend – e.g. smiley, fontname and fontsize buttons below.
It is used on a website with 300M page impressions a month.

API:
// create wysiwyg:
var wysiwygeditor = wysiwyg({
element: document.getElmentById(‘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.indent( outdent );
wysiwygeditor.insertLink( url );
wysiwygeditor.insertImage( url );
wysiwygeditor.insertHTML( html );
wysiwygeditor.insertList( ordered );

 

 

Website: http://wysiwygjs.github.io/

Thanks,
NabeelShahid.com