Example:
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:; // surrounding div:; // accessing 'wysiwyg.js':;;;
wysiwyg.js-API:
// create wysiwyg:var wysiwygeditor = ; // properties:wysiwygeditor;wysiwygeditor; -> 'html'wysiwygeditor;wysiwygeditor; -> 'html'|falsewysiwygeditor;wysiwygeditorreadOnly; // -> querywysiwygeditorreadOnly true|false ; // selection and popup:wysiwygeditor;wysiwygeditor;wysiwygeditor; -> popup-handlewysiwygeditor; // exec commands:wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditorfontSize fontsize ;wysiwygeditor;wysiwygeditor;wysiwygeditoralign 'left'|'center'|'right'|'justify' ;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;wysiwygeditor;