Skip to content
Johannes Geppert edited this page Jun 26, 2015 · 1 revision

Introduction

The richtext editor is based on Tinymce.

To use this feature you need to copy the struts2-jquery-richtext-plugin.jar into your WEB-INF/lib path or add it to your maven dependencies.

<dependencies>
	...
	<dependency>
		<groupId>com.jgeppert.struts2.jquery</groupId>
		<artifactId>struts2-jquery-plugin</artifactId>
		<version>X.X.X</version>
	</dependency>
	<dependency>
		<groupId>com.jgeppert.struts2.jquery</groupId>
		<artifactId>struts2-jquery-richtext-plugin</artifactId>
		<version>X.X.X</version>
	</dependency>
	...
</dependencies>

Samples

A simple Richtext Editor with default values

<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>
<sjr:tinymce
	id="richtextTinymceEditor"
	name="echo"
	rows="10"
	cols="80"
	width="800"
	editorTheme="simple"
	value="Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."
/>

Richtext editor with AJAX content, custome toolbar, skin, plugins, buttons and german local

<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>
<s:url var="remoteurl" action="ajax1"/>
<sjr:tinymce
	id="richtextTinymceAdvancedEditor"
	name="echo"
	rows="10"
	cols="80"
	width="800"
	href="%{remoteurl}"
	editorLocal="de"
	editorTheme="advanced"
	editorSkin="o2k7"
	toolbarAlign="left"
	toolbarLocation="top"
	plugins="safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template"
	toolbarButtonsRow1="save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect"
	toolbarButtonsRow2="cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor"
	toolbarButtonsRow3="tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen"
	toolbarButtonsRow4="insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage"
	onSaveTopics="submitRichtextForm"
/>

Attributes

Name

Required

Default

Evaluated

Type

Description

accesskey false false String Set the html accesskey attribute on rendered html element
bindOn false false String Bind the start of load or effect on element. e.g. button or link
cols false false Integer HTML cols attribute
contentCss false false String This option enables you to specify a custom CSS file that extends the theme content CSS. This CSS file is the one used within the editor (the editable area). This option can also be a comma separated list of URLs. e.g. css/custom_content.css
cssClass false false String The css class to use for element
cssErrorClass false false String The css error class to use for element
cssErrorStyle false false String The css error style definitions for element to use
cssStyle false false String The css style definitions for element to use
dataType false false String Type of the result. e.g. html, xml, text, json, ...
deferredLoading false false false Boolean Defers the initial loading of this element. The element will not be loaded until one of the reloadTopics is published.
disabled false false String Set the html disabled attribute on rendered html element
draggable false false String Enable draggable functionality to the DIV element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
draggableAddClasses false false Boolean If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling draggable init on many hundreds of elements. Default: true
draggableAppendTo false false String The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable. Default: parent
draggableAxis false false String Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: x or y.
draggableCancel false false String Prevents dragging from starting on specified elements.
draggableContainment false false String Constrains dragging to within the bounds of the specified element or region. Possible string values: parent, document, window, [x1, y1, x2, y2].
draggableCursor false false String The css cursor during the drag operation.
draggableDelay false false String Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
draggableDistance false false String Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
draggableHandle false false String If specified, restricts drag start click to the specified element(s). e.g. h2
draggableHelper false false String Allows for a helper element to be used for dragging display. Possible values: original, clone. Default is original
draggableIframeFix false false Boolean Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them. Default: false
draggableOnDragTopics false false String This event javascript function is triggered when the mouse is moved during the dragging.
draggableOnStartTopics false false String This event javascript function is triggered when dragging starts.
draggableOnStopTopics false false String This event javascript function is triggered when dragging stops.
draggableOpacity false false String Opacity for the helper while being dragged. e.g. 0.75
draggableRefreshPositions false false Boolean If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance. Default: false
draggableRevert false false String If set to true, the element will return to its start position when dragging stops. e.g. true, valid, invalid Default: false
draggableRevertDuration false false String The duration of the revert animation, in milliseconds. Ignored if revert is false.
draggableScope false false String Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.
draggableScroll false false Boolean If set to true, container auto-scrolls while dragging.
draggableScrollSensitivity false false String Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable. Default: 20
draggableScrollSpeed false false String The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance. Default: 20
draggableSnap false false Boolean If set to true, the draggable will snap to the edges of the selected elements when near an edge of the element. Default: false
draggableSnapMode false false String Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: inner, outer, both. Default: both
draggableSnapTolerance false false String The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false. Default: 20
draggableZindex false false String z-index for the helper while being dragged.
droppable false false String Enable any DIV element to be droppable, a target for draggable elements.
droppableAccept false false String All draggables that match the jQuery selector will be accepted. e.g. #myid or .myclass
droppableActiveClass false false String If specified, the class will be added to the droppable while an acceptable draggable is being dragged.
droppableAddClasses false true false String If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling droppable init on many hundreds of elements. Default: true
droppableGreedy false false false String If true, will prevent event propagation on nested droppables. Default: false
droppableHoverClass false false String If specified, the class will be added to the droppable while an acceptable draggable is being hovered.
droppableOnActivateTopics false false String This event javascript function is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.
droppableOnDeactivateTopics false false String This event javascript function is triggered any time an accepted draggable stops dragging.
droppableOnDropTopics false false String This event javascript function is triggered when an accepted draggable is dropped 'over' this droppable.
droppableOnOutTopics false false String This event javascript function is triggered when an accepted draggable is dragged 'out' this droppable.
droppableOnOverTopics false false String This event javascript function is triggered as an accepted draggable is dragged 'over' this droppable.
droppableScope false false String Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.
droppableTolerance false false String Specifies which mode to use for testing whether a draggable is over a droppable. Possible values: fit, intersect, pointer, touch.
editorLocal false en false String the editor local
editorSkin false default false String This option enables you to specify what skin you want to use with your theme. A skin is basically a CSS file that gets loaded from the skins directory inside the theme. The advanced theme that TinyMCE comes with has two skins these are called default and o2k7.
editorSkinVariant false false String This option enables you to specify what skin variant you want to use with your theme. e.g. you can use editorSkin=o2k7 and editorSkinVariant=silver or editorSkinVariant=black
editorTheme false advanced false String This option enables you to specify what theme to use when rendering the TinyMCE WYSIWYG editor instances. e.g simple or advanced
effect false none false String Perform a effect on the elements specified in the 'targets' attribute. e.g. bounce, highlight, pulsate, shake, size or transfer. See more details at http://docs.jquery.com/UI/Effects
effectDuration false 2000 false String Duration of effect in milliseconds. Only valid if 'effect' attribute is set
effectMode false none false String The Effect Mode. show, hide, toggle, none
effectOptions false false String jQuery options for effect, eg 'color : #aaaaaa' for the highlight effect or 'times : 3' for the bounce effect. Only valid if 'effect' attribute is set. See more details at http://docs.jquery.com/UI/Effects
entityEncoding false false String This option controls how entities/characters get processed by TinyMCE. http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/entity_encoding e.g. named or numeric or raw
errorElementId false false false String This should provide the id of the element into which the error text will be placed when an error ocurrs loading the container. If 'errorTest' is provided, that wil be used, otherwise the ajax error message text wil be used.
errorPosition false false String Define error position of form element (top|bottom)
errorText false false false String The text to be displayed on load error. If 'errorElement' is provided, this will display the error in the elemtn (if existing), if not, it will display the error as the contents of this container
events false click false String Start load or effect on specified event. Possible values are click, dblclick, mouseover, mouseenter, mouseleave. Default: click
formIds false false String Comma delimited list of form ids for which to serialize all fields during submission when this element is clicked (if multiple forms have overlapping element names, it is indeterminate which will be used)
height false false Integer height attribute
href false false String The url to be use when this element is clicked
id false false String HTML id attribute
indicator false false String If loading content into a target, Id of element that will be displayed during loading and hidden afterwards (will override settings for the target container)
javascriptTooltip false false false Boolean Use JavaScript to generate tooltips
key false false String Set the key (name, value, label) for this particular component
label false false String Label expression used for rendering an element specific label
labelSeparator false : false String String that will be appended to the label
labelposition false false String Define label position of form element (top/left)
listenTopics false false String The comma separated list 'listenTopics' is the list of topic names that is used to trigger a request.
loadingText false false String If loading content into a target, The text to be displayed during load (will be shown if any provided, will override settings for the target container)
name false false String The name to set for element
onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics false false String A comma delimited list of topics that published always
onBeforeTopics false false String Topics that are published before a load
onBlurTopics false false String A comma delimited list of topics that published when the element is blured
onChangeTopics false false String A comma delimited list of topics that published when the element changed
onCompleteTopics false false String Topics that are published before after load is completed
onDisableTopics false false String A comma delimited list of topics that published when the element disabled
onEffectCompleteTopics false false String A comma delimited list of topics that published when an effect is completed
onEnableTopics false false String A comma delimited list of topics that published when the element is enabled
onErrorTopics false false String Topics that are published on a load error
onEventTopics false false String Topics that are published on event such as keydown, mousedown and so forth
onFocusTopics false false String A comma delimited list of topics that published when the element is focused
onSaveTopics false false String Topics that are published when user press the save button
onSuccessTopics false false String Topics that are published after a succesful load
onblur false false String Set the html onblur attribute on rendered html element
onchange false false String Set the html onchange attribute on rendered html element
onclick false false String Set the html onclick attribute on rendered html element
ondblclick false false String Set the html ondblclick attribute on rendered html element
onfocus false false String Set the html onfocus attribute on rendered html element
onkeydown false false String Set the html onkeydown attribute on rendered html element
onkeypress false false String Set the html onkeypress attribute on rendered html element
onkeyup false false String Set the html onkeyup attribute on rendered html element
onmousedown false false String Set the html onmousedown attribute on rendered html element
onmousemove false false String Set the html onmousemove attribute on rendered html element
onmouseout false false String Set the html onmouseout attribute on rendered html element
onmouseover false false String Set the html onmouseover attribute on rendered html element
onmouseup false false String Set the html onmouseup attribute on rendered html element
onselect false false String Set the html onselect attribute on rendered html element
openTemplate false false String Set template to use for opening the rendered html.
parentTheme false false String The parent theme. Default: value of parent form tag or simple if no parent form tag is available
pastePlainText false false false Boolean Always paste as plaintext.‎
plugins false false String This option should contain a comma separated list of plugins. TinyMCE is shipped with some core plugins; these are described in greater detail in the Plugins reference. http://wiki.moxiecode.com/index.php/TinyMCE:Plugins e.g. table,contextmenu,paste
readonly false false false Boolean Whether the textarea is readonly
reloadTopics false false String A comma delimited list of topics that will cause this element to reload
removeLinebreaks false true false Boolean This option controls whether line break characters should be removed from output HTML.‎
removeRedundantBrs false true false Boolean This option is enabled by default and will control the output of trailing BR elements at the end of block elements.‎
requestType false POST false String Type of the AJAX Request. POST, GET, PUT
requiredLabel false false false Boolean If set to true, the rendered element will indicate that input is required
requiredPosition false false String Define required position of required form element (left|right)
resizable false false false Boolean This option gives you the ability to enable/disable the resizing button.
resizableAnimate false false Boolean Animates to the final size after resizing. Default: false
resizableAnimateDuration false false String Duration time for animating, in milliseconds.
resizableAnimateEasing false false String Easing effect for animating. Default: swing
resizableAspectRatio false false Boolean If set to true, resizing is constrained by the original aspect ratio. Default: false
resizableAutoHide false false Boolean If set to true, automatically hides the handles except when the mouse hovers over the element. Default: false
resizableContainment false false String Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document' or an id
resizableDelay false false String Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.
resizableDistance false false String Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.
resizableGhost false false Boolean If set to true, a semi-transparent helper element is shown for resizing. Default: false
resizableHandles false false String If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. Default: e, s, se
resizableHelper false false String This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized. e.g. ui-state-highlight
resizableMaxHeight false false String This is the maximum height the resizable should be allowed to resize to.
resizableMaxWidth false false String This is the maximum width the resizable should be allowed to resize to.
resizableMinHeight false false String This is the minimum height the resizable should be allowed to resize to.
resizableMinWidth false false String This is the minimum width the resizable should be allowed to resize to.
resizableOnResizeTopics false false String This event javascript function is triggered during the resize, on the drag of the resize handler.
resizableOnStartTopics false false String This event javascript function is triggered at the start of a resize operation.
resizableOnStopTopics false false String This event javascript function is triggered at the end of a resize operation.
rows false false Integer HTML rows attribute
selectable false false Boolean Enable a element to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.
selectableAutoRefresh false false String This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually. Default: true
selectableCancel false false String Prevents selecting if you start on elements matching the selector. Default: ':input,option'
selectableDelay false false String Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.
selectableDistance false false String Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.
selectableFilter false false String The matching child elements will be made selectees (able to be selected). Default: '*'
selectableOnSelectedTopics false false String This event is triggered at the end of the select operation, on each element added to the selection.
selectableOnSelectingTopics false false String This event is triggered during the select operation, on each element added to the selection.
selectableOnStartTopics false false String This event is triggered at the beginning of the select operation.
selectableOnStopTopics false false String This event is triggered at the end of the select operation.
selectableOnUnselectedTopics false false String This event is triggered at the end of the select operation, on each element removed from the selection.
selectableOnUnselectingTopics false false String This event is triggered during the select operation, on each element removed from the selection.
selectableTolerance false false String Possible values: 'touch', 'fit'. Default: 'touch'
sortable false false Boolean Enable a elements to be sortable
sortableAppendTo false false String Defines where the helper that moves with the mouse is being appended to during the drag. Default: 'parent'
sortableAxis false false String If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.
sortableCancel false false String Prevents sorting if you start on elements matching the selector. Default: ':input,button'
sortableConnectWith false false String Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other. e.g. #myothersortable or .myothersortables
sortableContainment false false String Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.
sortableCursor false false String Defines the cursor that is being shown while sorting.
sortableCursorAt false false String Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: top, left, right, bottom.
sortableDelay false false String Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.
sortableDistance false false String Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.
sortableDropOnEmpty false false Boolean If empty allows for an item to be dropped from a linked selectable. Default: true
sortableForceHelperSize false false Boolean If true, forces the helper to have a size. Default: false
sortableForcePlaceholderSize false false Boolean If true, forces the placeholder to have a size. Default: false
sortableGrid false false String Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]
sortableHandle false false String Restricts sort start click to the specified element.
sortableHelper false false String Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'. Default: 'original'
sortableItems false false String Specifies which items inside the element should be sortable. Default: '> *'
sortableOnActivateTopics false false String This event is triggered when using connected lists, every connected list on drag start receives it.
sortableOnBeforeStopTopics false false String This event is triggered when sorting stops, but when the placeholder/helper is still available.
sortableOnChangeTopics false false String This event is triggered during sorting, but only when the DOM position has changed.
sortableOnDeactivateTopics false false String This event is triggered when sorting was stopped, is propagated to all possible connected lists.
sortableOnOutTopics false false String This event is triggered when a sortable item is moved away from a connected list.
sortableOnOverTopics false false String This event is triggered when a sortable item is moved into a connected list.
sortableOnReceiveTopics false false String This event is triggered when a connected sortable list has received an item from another list.
sortableOnRemoveTopics false false String This event is triggered when a sortable item has been dragged out from the list and into another.
sortableOnSortTopics false false String This event is triggered during sorting.
sortableOnStartTopics false false String This event is triggered when sorting starts.
sortableOnStopTopics false false String This event is triggered when sorting has stopped.
sortableOnUpdateTopics false false String This event is triggered when the user stopped sorting and the DOM position has changed.
sortableOpacity false false String Defines the opacity of the helper while sorting. From 0.01 to 1
sortablePlaceholder false false String Class that gets applied to the otherwise white space.
sortableRevert false false Boolean If set to true, the item will be reverted to its new DOM position with a smooth animation. Default: false
sortableScroll false false Boolean If set to true, the page scrolls when coming to an edge. Default: true
sortableScrollSensitivity false false String Defines how near the mouse must be to an edge to start scrolling. Default: 20
sortableScrollSpeed false false String The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance. Default: 20
sortableTolerance false false String This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural. Default: 'intersect'
sortableZindex false false String Z-index for element/helper while being sorted. Default: 1000
statusbarLocation false bottom false String This option enables you to specify where the element statusbar with the path and resize tool should be located. This option can be set to top, bottom or none. The default value is set to bottom.
tabindex false false String Set the html tabindex attribute on rendered html element
targets false false String A comma separated list of ids of container elements to load with the contents from the result of this request
template false false String The template (other than default) to use for rendering the element
templateDir false false String The template directory.
timeout false 3000 false Integer jQuery options for timeout. Default is 3000
title false false String Set the html title attribute on rendered html element
toolbarAlign false center false String This option enables you to specify the alignment of the toolbar, this value can be left, right or center. This option can only be used when theme is set to advanced and when the theme_advanced_layout_manager option is set to the default value of SimpleLayout.
toolbarButtonsRow1 false false String This option should contain a comma separated list of button/control names to insert into the toolbar. his option can only be used when theme is set to advanced. Since these rows have items in them by default you need to set them to SPACE ' ' if you want to completely remove rows. A complete reference of all built in buttons and controls can be found in the button/control reference page. http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference e.g. separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor
toolbarButtonsRow2 false false String This option should contain a comma separated list of button/control names to insert into the toolbar. his option can only be used when theme is set to advanced. Since these rows have items in them by default you need to set them to SPACE ' ' if you want to completely remove rows. A complete reference of all built in buttons and controls can be found in the button/control reference page. http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference e.g. bullist,numlist,separator,outdent,indent,separator,undo,redo,separator
toolbarButtonsRow3 false false String This option should contain a comma separated list of button/control names to insert into the toolbar. his option can only be used when theme is set to advanced. Since these rows have items in them by default you need to set them to SPACE ' ' if you want to completely remove rows. A complete reference of all built in buttons and controls can be found in the button/control reference page. http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference e.g. hr,removeformat,visualaid,separator,sub,sup,separator,charmap
toolbarButtonsRow4 false false String This option should contain a comma separated list of button/control names to insert into the toolbar. his option can only be used when theme is set to advanced. Since these rows have items in them by default you need to set them to SPACE ' ' if you want to completely remove rows. A complete reference of all built in buttons and controls can be found in the button/control reference page. http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference e.g. emotions,fullpage,fullscreen
toolbarLocation false bottom false String This option enables you to specify where the toolbar should be located. This option can be set to top or bottom or external. This option can only be used when theme is set to advanced and when the theme_advanced_layout_manager option is set to the default value of SimpleLayout. Choosing the external location adds the toolbar to a DIV element and sets the class of this DIV to mceExternalToolbar. This enables you to freely specify the location of the toolbar.
tooltip false false String Set the tooltip of this particular component
tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips
tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath false false String Icon path used for image that will have the tooltip
value false false String Preset the value of input element.
width false false Integer width attribute
wrap false false String HTML wrap attribute