Wysiwyg and Markdown

SummerNote

To use summernote plugin, you should include a theme such as summernote/dist/summernote-lite.css before ace.css and you can modify $.summernote.options.icons for custom options.
There are also a few customizations done in scss/plugins/form.scss. Look for $plugin-summernote in it.

$.extend($.summernote.options.icons ,  {
  'align': 'fa fa-align',
  'alignCenter': 'fa fa-align-center',
  'alignJustify': 'fa fa-align-justify',
  ...
})

Bootstrap Wysiwyg

For more info please see Bootstrap Wysiwyg
It's a lightweight plugin and Ace has a wrapper for it, so that you can easily customize it.
There are also a few customizations done in scss/plugins/form.scss. Look for $plugin-wysiwyg

html

<div id="myeditor" class="bootstrap-wysiwyg-editor px-3 py-2">
</div>

//lightweight wysiwyg editor
$('#myeditor').aceWysiwyg({
  toolbarStyle: 2,
  toolbar:
  [
    'font',
    null,
    'fontSize',
    null,
    'bold',
    'italic',
    null,
    'insertunorderedlist',
    'insertorderedlist',
    null,
    'createLink',
    'unlink',
    null,
    'insertImage',
    null,
    'foreColor',
    'backColor',
    null,
    'removeFormat',
    'undo',
    'redo',
    null,
    'viewSource'
  ]
})

Options

The following options are available:

`toolbarStyle`

Can be 1 or 2 for a little customization

An array specifying what buttons you want and their config:

$('#myeditor').aceWysiwyg({
  toolbarStyle: 2,
  toolbar:
  [
    {
      name: 'font',

      title: 'Font',
      icon: 'fa fa-font text-secondary-m1',
      values: ['Arial', 'Courier', 'Comic Sans MS', 'Helvetica', 'Open Sans', 'Tahoma', 'Verdana'],
    },

    null, //add some space

    {
      name: 'fontSize',

      title: 'Font Size',
      icon: 'fa fa-text-height text-secondary-m1',
      values: { 5: 'Huge', 3: 'Normal', 1: 'Small' }
    },

    null, //add some space

    {
      name: 'createLink',

      title: 'Hyperlink',
      icon: 'fa fa-link text-secondary-m1',
      button_text: 'Add',
      placeholder: 'URL',
      button_class: 'btn-primary'
    },

    {
      name: 'insertImage',
      
      title: 'Insert picture',
      icon: 'fa fa-image text-secondary-m1',

      button_text: '<i class="fa fa-file mr-1"></i> Choose an Image …',
      placeholder: 'Remote Image URL',
      button_insert: 'Insert',

      button_class: 'btn-success',
      button_insert_class: 'btn-primary',

      choose_file: true // show the choose file button?
    },
  ]
})

If your icon is for example a Material Icon which has a different format, you should use the iconText option:

{
  name: 'font',

  title: 'Font',
  icon: 'material-icons-outlined',
  iconText: 'edit'
  ...
}

`toolbarPlacement`

An optional function specifying where to place the toolbar (the buttons):

toolbarPlacement: function(toolbarHtml) {
  return $(toolbarHtml).appendTo('.some-card-header') //or some place else
}

`colors`

An array of colors to be shown when user wants to select a text or background color. You can also specify list of colors in toolbar option:

{
  name: 'foreColor',
  title: 'Foreground Color',
  icon: 'fas fa-eye-dropper text-pink-m2',
  values: ['red', 'blue']
},
{
  name: 'backColor',
  title: 'Background Color',
  icon: 'fas fa-fill-drip text-secondary-m1',
  values: ['white', 'black']
}

`wysiwyg`

The options to be passed to the Bootstrap Wysiwyg plugin

When using this plugin in a touch device, you may see some JS errors.
You can continue using the plugin without a problem but if you want the error to go away, you should modify node_modules/bootstrap-wysiwyg/src/bootstrap-wysiwyg.js go to line 70, and modify

});

}.bind( this ) );

And minify it if needed

Markdown

Bootstrap Markdown plugin is used in this demo.

You should include bootstrap-markdown/css/bootstrap-markdown.min.css .
There are a few customizations done in scss/plugins/form.scss. Look for $plugin-markdown

You can also customize the buttons and icons like this:

$('#markdown-editor').markdown({
  iconlibrary: 'fa'
})
.each(function() {
  $(this).parent().find('.btn')
  .removeClass('btn-default')
  .addClass('btn-xs bg-white btn-outline-secondary btn-h-outline-info btn-a-outline-info')
  
  $(this).parent().find('.btn[title~="Heading"] > .fa').attr('class', 'fas fa-heading')
  $(this).parent().find('.btn[title~="Image"] > .fa').attr('class', 'far fa-image')
  
  $(this).parent().find('.md-control-fullscreen > .fa , .exit-fullscreen > .fa').addClass('text-orange-m1 text-110')
})