wysiwyg.js

'wysiwyg.js' is a (uglified) 12k contenteditable-editor with no dependencies.
It does only:
    * Transforms any HTML-element into contenteditable
    * onSelection-event: e.g. to open a toolbar
    * onKeyDown/Press/Up-events: e.g. to handle hotkeys
    * onPlaceholder-event: show/hide a placeholder
    * handle popups
    * .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 (uglified) 10k jQuery-plugin '$.wysiwyg()' - plus (minified) 2k CSS -
to create a 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.
To enable autocomplete set an onAutcomplete() callback (try '@' in the examples).

Try to use the flicker-free markup.

Examples:

$.wysiwyg() API:

// create editor:
$(element).wysiwyg({
    class: 'some-more-classes',
    toolbar: 'selection'|'top'|'top-focus'|'top-selection'|'top-focus-selection'|'bottom'|'bottom-focus'|'bottom-selection'|'bottom-focus-selection',
    buttons: {
        buttonname: {
            title: 'tooltip text',
            // How should the button look like?
            image: '\u1234' | '<img src="path/to/image.jpg">',
            html: '<raw html>',
            // What should the button do?
            popup: function( $popup, $button ) { ... },
            click: function( $button ) { ... },
            // Where should the button be placed?
            showstatic: true, // on the static toolbar
            showselection: true // on selection toolbar
            // anything else passed as "prop()" ...
        },
        // build-in:
        insertimage: { ... },
        insertvideo: { ... },
        insertlink: { ... },
        bold: { ... },
        italic: { ... },
        underline: { ... },
        strikethrough: { ... },
        forecolor: { ... },
        highlight: { ... },
        alignleft: { ... },
        aligncenter: { ... },
        alignright: { ... },
        alignjustify: { ... },
        subscript: { ... },
        superscript: { ... },
        indent: { ... },
        outdent: { ... },
        orderedList: { ... },
        unorderedList: { ... },
        removeformat: { ... }
    },
    submit: { ... },
    selectImage: 'Click or drop image',
    placeholderUrl: 'www.example.com',
    placeholderEmbed: '<embed/>',
    maxImageSize: [600,200],
    filterImageType: function( file ) { ... },
    onKeyDown: function( key, character, shiftKey, altKey, ctrlKey, metaKey ) { ... },
    onKeyPress: function( key, character, shiftKey, altKey, ctrlKey, metaKey ) { ... },
    onKeyUp: function( key, character, shiftKey, altKey, ctrlKey, metaKey ) { ... },
    onAutocomplete: function( tyed, key, character, shiftKey, altKey, ctrlKey, metaKey ) { ... },
    onImageUpload: function( insert_image ) { ... },
    forceImageUpload: false,
    videoFromUrl: function( url ) { ... }
});

// surrounding div:
$(element).wysiwyg('container');

// accessing 'wysiwyg.js':
$(element).wysiwyg('shell').bold();
$(element).wysiwyg('shell').forecolor( '#ff0000' );
$(element).wysiwyg('shell').insertHTML( '<b>some text</b>' );

Raw wysiwyg.js API:

// create wysiwyg:
var wysiwygeditor = wysiwyg({
    element: 'editor-id' || document.getElementById('editor-id'),
    onKeyDown: function( key, character, shiftKey, altKey, ctrlKey, metaKey ) {
        },
    onKeyPress: function( key, character, shiftKey, altKey, ctrlKey, metaKey ) {
        },
    onKeyUp: function( key, character, shiftKey, altKey, ctrlKey, metaKey ) {
        },
    onSelection: function( collapsed, rect, nodes, rightclick ) {
        },
    onPlaceholder: function( visible ) {
        },
    onOpenpopup: function() {
        },
    onClosepopup: function() {
        },
    hijackContextmenu: false
});

// properties:
wysiwygeditor.getElement();
wysiwygeditor.getHTML(); -> 'html'
wysiwygeditor.setHTML( html );
wysiwygeditor.getSelectedHTML(); -> 'html'|false
wysiwygeditor.sync();
wysiwygeditor.readOnly(); // -> query
wysiwygeditor.readOnly( true|false );

// selection and popup:
wysiwygeditor.collapseSelection();
wysiwygeditor.expandSelection( preceding, following );
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 );