# 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:
  `assets/js/jquery.hotkeys.js`
  `assets/js/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:
  1. `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!']
         }

  2. `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'}
         }

  3. `bold`:

         'bold',

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

  4. `italic`
  5. `strikethrough`
  6. `underline`
  7. `insertunorderedlist`
  8. `insertorderedlist`
  9. `outdent`
  10. `indent`
  11. `justifyleft`
  12. `justifycenter`
  13. `justifyright`
  14. `justifyfull`
  15. `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
          }

  16. `unlink`
  17. `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
          }

  18. `foreColor` and `backColor` which have a list of color values:

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

  19. `undo`
  20. `redo`
  21. `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 `assets/js/markdown/markdown.js` and `assets/js/markdown/bootstrap-markdown.js` and optionally `assets/js/bootbox.js` if you prefer bootstrap modals to default browser dialogs
- 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.