monster.ui.wysiwyg()#
The monster.ui.wysiwyg()
function generates a WYSIWYG from a set of customizable options and insert it inside a jQuery object.
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>
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 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);
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);
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: ')'
}
}
ante
key has the value of #.