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

1
66

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,
SABIT SOLUTIONS

1 COMMENT

  1. I’ve been surfing on-line more than 3 hours lately, yet I never found any fascinating
    article like yours. It’s beautiful value sufficient for me.
    In my view, if all website owners and bloggers made just right content material
    as you did, the internet will probably be a lot
    more helpful than ever before.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twelve + 10 =