wysiwyg.js

Example:

http://wysiwygjs.github.io/

Recent changes:

• Flicker-free markup

API changed:

• Nov 3, 2015: classes->class + buttons take any propery
• Mar 30, 2015: camelcase wysiwyg.js: onkeypress->onKeyDown, onselection->onSelection, onplaceholder->onPlaceholder, hijackcontextmenu->hijackContextmenu'
• Mar 11, 2015: dropfileClick->selectImage

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
• onkeypress-event: 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. It is used on a website with 300M page impressions a month.

$.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>' );

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