WYSIHTML5 Enhanced is a rich-text editor, based on the wonderful wysihtml5 editor, with a bit of help from Twitter Bootstrap, Font-Awesome, Jcrop and HTML5's Drag & Drop and File API.
Yes, Really! I based WYSIHTML5 Enhanced on the amazing bootstrap-wysihtml5 editor by James Hollingworth, but instead of extending his editor, I decided to take a different path, since James' version showed some variations in comparison to the original wysihtml5 editor.
WYSIHTML5 Enhanced doesn't try to change the original wysihtml5 editor but to simply wrap the UI with Twitter Bootstrap and Font Awesome goodness, and replace the URL-based image editor with a Drag & Drop image editor.
- Clone or download the reop to your machine
- Copy the contents of dist into your project
- Include the CSS and Javascripts in your page (CSS at the top, JS at the bottom. You do remember, right?)
- Somewhere in your code, run the following:
$('#my-textarea').wysiHTML5N();You can configure the editor by passing an options object to the initializer. Here are the available options with their default values.
var options = {
// configure which elements to show in the toolbar
toolbar: ['h1', 'h2', 'h3', 'p', 'bold', 'italic', 'unordered', 'ordered', 'insertLink', 'insertImage', 'changeView'],
// additional stylesheets used by the editor to display edited content
stylesheets: ['css/editor.css'],
// configure the underlying wysihtml5 HTML parser.
// By default, the advanced wysihtml5 parser is used.
// See the http://xing.github.com/wysihtml5/ for more details
parserRules: {...},
// configure image editor options
imageEditor: {
// image croping aspect ratio (defaults to null)
aspectRatio: 16/9,
// drop area width. Defaults to 530px
width: 530,
// drop area height. Defaults to 300px
height: 300
}
}
$('#my-textarea').wysiHTML5N(options);Your project's directory structure might be different than mine. In case it is, please make sure that:
- font-awesome.css knows where to find the fonts directory
- wysihtml5.css knows where to find Jcrop.gif (see line 47)
You may have noticed the assets are not minified or concatenated. This is on purpose. As an adult Web developer I assume you have your own way of minifying and concatenating your assets, so there's no reason for me to worry about that.
If you're already using Twitter Bootstrap, there's no need to include the bootstrap.css file from dist/css although you might want to remove the "icons.less" part from your build, since it doesn't play nicely with Font Awesome
You'll need an ES5 compliant browser to run WYSIHTML5 Enhanced. To use the Drag & Drop feature, you'll need a browser with Drag & Drop and FileReader support. That means that if your browser has either "Internet" or "Explorer" in its name, all hell will break loose.
Found a bug? Need extra features? Feel free to open an issue. Or, even better, fork, fix and send me a pull request.
The MIT License (MIT) Copyright (c) 2012 Zohar Arad
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.