Editor

Wysiwyg Editor

For more info about wysiwyg plugin, please see its page at: http://mindmup.github.io/bootstrap-wysiwyg/
To use it, you should include:
components/jquery.hotkeys/index.js
components/_mod/bootstrap-wysiwyg/bootstrap-wysiwyg.js
For ease of use I have made a wrapper for it and some extra options
A basic example is as follows:
```
$('#my-editor').ace_wysiwyg();
```

Options

Current ace_wysiwyg wrapper options are:
1. wysiwyg options to send to the plugin
2. speech_button whether to add speech input button in Chrome
3. toolbar an array of toolbar buttons and options
4. toolbar_place optional toolbar placement function
For example the following creates a wyswiwyg with 3 toolbar buttons:
```
$('#my-editor').ace_wysiwyg({
  toolbar: {
    'bold',
    'italic',
    null,

    {
        name: 'font',
        title: 'Custom tooltip',
        values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
    }
  }
});
```
As you can see each toolbar button, is a string or an array of options.
All buttons have the following properties:
1. title which is button's tooltip text
2. icon which is button's icon
3. className which is button's class name
A null value puts a separator(space) between buttons.

Toolbar buttons and options are as follows:

font which takes an array as font names:

{
   name: 'font',
   title: 'optional custom tooltip',
   icon: 'fa-leaf', //some custom icon
   values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
}

fontSize which takes an array as font sizes:

{
   name: 'fontSize',
   title: 'optional custom tooltip',
   values:{1 : 'Size#1' , 2 : 'Size#2' , 3 : 'Size#3' , 4 : 'Size#4' , 5 : 'Size#5'}
}

bold:

'bold',

//or
{
   name: 'bold',
   title: 'optional custom tooltip',
   icon: 'fa-leaf' //some custom icon
}

italic
strikethrough
underline
insertunorderedlist
insertorderedlist
outdent
indent
justifyleft
justifycenter
justifyright
justifyfull

createLink which inserts a link:

{
   name: 'createLink',
   title: 'optional custom tooltip',
   placeholder: 'link input placeholder',
   button_class: 'btn-purple',//insert button's class
   button_text: 'Add Link'//insert button's text
}

unlink

insertImage which inserts an image:

{
   name: 'createLink',
   title: 'optional custom tooltip',
   placeholder: 'image url input placeholder',
   button_insert_class: 'btn-purple',//insert button's class
   button_insert: 'Add Link',//insert button's text
   
   choose_file: true,//'Whether there should be a "Choose File" button
   button_class: 'btn-success',//choose button's class
   button_text: 'Choose an Image'//choose button's text
}

foreColor and backColor which have a list of color values:

{
   name: 'foreColor',
   title: 'optional custom tooltip',
   values: ['red', 'blue', '#FF7721']
}

undo
redo
viewSource

For an example please see examples/wysiwyg.html

By default toolbar is placed before content area. Using toolbar_place you can put the toolbar somewhere else:

$('#editor2').css({'height':'200px'}).ace_wysiwyg({
 toolbar_place: function(toolbar) {
    //for example put the toolbar inside '.widget-header'
    return $(this).closest('.widget-box')
           .find('.widget-header').prepend(toolbar)
           .find('.wysiwyg-toolbar').addClass('inline');
 }
});

It should return the new toolbar

Add .wysiwyg-style1 and .wysiwyg-style2 to toolbar for alternative styles:
```
$('#editor2').ace_wysiwyg().prev().addClass('wysiwyg-style2');
```

Notes

Normally you want to send the contents of wysiwyg editor to server.
Most plugins convert a textarea element into a wysiwyg editor, by hiding the textarea and creating an editable DIV or iframe, and updating textarea's content as needed.
You can use the following method to send html content to server along with form data:
```
$('#myform').on('submit', function() {
  var hidden_input =
  $('<input type="hidden" name="my-html-content" />')
  .appendTo('#myform');

  var html_content = $('#myeditor').html();
  hidden_input.val( html_content );
  //put the editor's HTML into hidden_input and it will be sent to server
});
```
Firefox by default supports image resize inside wyswiwyg editor.
For other browsers you can use jQuery UI's resizable feature.
An example is included in wysiwyg demo page:
mustache/app/views/assets/scripts/wysiwyg.js
Search for enableImageResize function inside it

Markdown Editor

For more info about markdown editor plugin, please see its page at: http://toopay.github.io/bootstrap-markdown/
To use markdown editor you should include components/markdown/lib/markdown.js and components/bootstrap-markdown/js/bootstrap-markdown.js
For better styling you should put it inside a widget box
```
   
   
      
         
      
   
```
By specifying data-provide="markdown" attribute for the textarea element, markdown editor will automatically be initiated.