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:
  • For ease of use I have made a wrapper for it and some extra options
  • A basic example is as follows:


  • 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:
      toolbar: {
            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:
         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:
     toolbar_place: function(toolbar) {
        //for example put the toolbar inside '.widget-header'
        return $(this).closest('.widget-box')
    It should return the new toolbar
  • Add .wysiwyg-style1 and .wysiwyg-style2 to toolbar for alternative styles:


  • 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" />')
      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:
    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.