monster.ui.wysiwyg()

The monster.ui.wysiwyg() function generates a WYSIWYG from a set of customizable options and insert it inside a jQuery object.

WYSIWYG

Syntax

monster.ui.wysiwyg(target[, options]);

Parameters

target: [jQuery Object][jquery] (mandatory)

A jQuery object inside which the WYSIWYG will be inserted using the prepend() method.

options: [Object][object_literal] | [Boolean][boolean_literal] (optional)

If this parameter is set to false, no toolbar will be added to the WYSIWYG. If it is a JavaScript object, it can be used to add new options or override existing options available by default listed below:

  • fontSize
    • small
    • normal
    • huge
  • fontEffect
    • bold
    • italic
    • underline
    • strikethrough
  • fontColor
  • textAlign
    • left
    • center
    • right
    • justify
  • list
    • unordered
    • ordered
  • indentation
    • indent
    • outdent
  • link
    • add
    • remove
  • image
    • upload
    • link
  • editing
    • undo
    • redo
  • horizontalRule
  • toggleView
  • macro disabled by default

Return

A jQuery object representing the WYSIWYG widget.

Description

The monster.ui.wysiwyg() method adds a configurable WYSIWYG inside a container specified by the target parameter. The options in the toolbar can be removed and new ones can be added easily.

For the default CSS styles to apply, the wysiwyg container specified as the target parameter needs to have the CSS class wysiwyg-container as follow:

<div class="wysiwyg-container"></div>

If the CSS class transparent is added to the container, the toolbar will have a transparent background.

To initialize the wysiwyg with the default toolbar, the only parameter needed is target:

var target = $(document.getElementsByClassName('wysiwyg-container'));

monster.ui.wysiwyg(target);

Customization

Here is the structure of the different types of options, how they will be rendered and the description of each field:

Dropdown button

  • dropdown list
fontSize: {
    weight: 0,
    title: '',
    icon: '',
    command: '',
    options: {
        small: {
            weight: 0,
            text: '',
            args: '',
        },
        { ... }
    }
}
  • dropdown buttons
textAlign: {
    weight: 0,
    title: '',
    icon: '',
    options: {
        left: {
            weight: 0,
            title: '',
            icon: '',
            command: ''
        },
        { ... }
    }
}
  • grouped buttons
image: {
    weight: 0,
    options: {
        bold: {
            weight: 0,
            title: '',
            icon: '',
            command: '',
            inputType: ''
        },
        { ... }
    }
}
  • single button
horizontalRule: {
    weight: 0,
    title: '',
    icon: '',
    command: ''
}
weight

The value of the weight key is used to sort the options in the toolbar. By default, the value of weight is a multiple of 10.

title

The value of the title key is the text that will be displayed when hovering the corresponding button/label in the toolbar.

icon

The value of the icon key is the CSS class(es) that will added to a <i></i> element in the corresponding option. By default, Font Awesome icons (v3.2.1) are used but this can be changed easily by overriding the value of the key.

text

When defining a dropdown of text, you do not need to specify an icon since it is not a button. Instead, the value of the text key is used as the label of the option.

command

The value of the command key is an execCommand. To add a new option in the toolbar, add it to the options parameter using one of the three different structure depending if the new option should be a dropdown, a group of buttons or a single button.

args

The value of the args key will be used as an extra parameter of the execCommand. In the default options, it is used to specify the size of the text in the fontSize option and to define the macro string.

options

The options object is used to list the different options inside a dropdown or group.

ante, post

When defining an option containing the args key, you can specify parameters before and after it. See the “Change color model to RGB” and “Add macro” examples.

inputType

The inputType key is specifically used in grouped buttons that need an input to render an HTML tag (<a> and <img>). The two values handled are text and file, and they will set the input type in the DOM. If text is used, clicking on the button will prompt a dropdown with an input, if file is used, the browser will prompt the user to upload an image from their computer.

Examples

Remove some elements from the toolbar

var target = $(document.getElementsByClassName('wysiwyg-container'));
var overrideOptions = {
  fontSize: {
    options: {
      small: false
    }
  },
  fontEffect: {
    options: {
      strikethrough: false,
        underline: false
    }
  },
  fontColor: false,
  list: false,
  horizontalRule: false
};

monster.ui.wysiwyg(target, overrideOptions);

Add macro

var target = $(document.getElementsByClassName('wysiwyg-container'));
var options = {
  macro: {
    options: [{
      weight: 1,
      text: "Title",
      args: "title"
    }, {
      weight: 2,
      text: "Last name",
      args: "last_name"
    }, {
      weight: 3,
      text: "Conference's date",
      args: "conference_date"
    }, {
      weight: 4,
      text: "Conference's time",
      args: "conference_start_time"
    }]
  }
};

monster.ui.wysiwyg(target, options);

By default, macros will be bold and inserted between a couple of pair of curly braces as shown in the following screenshot:

Macro

If you want to change the surrounding elements of the macro, you need to use the ante and post keys and specify it as their value like shown below:

var target = $(document.getElementsByClassName('wysiwyg-container'));
var options = {
  macro: {
    options: [ ... ],
    ante: "[",
    post: "]"
  }
};

monster.ui.wysiwyg(target, options);

Now the macro will only be surrounded by a single pair of square brackets.

Add new option to remove all formating from the current selection

var target = $(document.getElementsByClassName('wysiwyg-container'));
var newOption = {
  removeFormat: {
    weight: 25,
    title: 'Remove format',
    icon: 'icon-eraser',
    command: 'removeFormat'
  }
};

monster.ui.wysiwyg(target, newOptions);

Change color model to RGB

var target = $(document.getElementByClassName('wysiwyg-container'));
var overrideColorOption = {
  fontColor: {
    options: [
      '255,255,255',
      '0,0,0',
      '238,236,225',
      '...'
    ],
    ante: 'rgb(',
    post: ')'
  }
}

By default, the colors are defined using the hexadecimal color model and the ante key has the value of #.

On this page