Ckeditor

Johannes Geppert edited this page Dec 6, 2016 · 2 revisions

Introduction

This richtext editor is based on CKEditor.

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:ckeditor
					id="richtextEditor"
					name="echo"
					rows="10"
					cols="80"
					width="730"
					height="250"
					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 custome config file to define a custome toolbar and french local

<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>
<s:url var="remoteurl" action="ajax1"/>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')"/>
<s:form id="formRichtextCustom" action="simpleecho" theme="xhtml">
	<s:hidden name="escape" value="false"/>
	<sjr:ckeditor
			label="Your Text"
			href="%{remoteurl}"
			id="richtextCustomEditor"
			name="echo"
			rows="10"
			cols="80"
			loadingText="Loading content of textarea ..."
			width="600"
			toolbar="MyToolbar"
			skin="kama"
			editorLocal="fr"
			customConfig="%{contextPath}/js/ckeditor.config.js"
			/>
	<sj:submit
			targets="result"
			value="AJAX Submit"
			indicator="indicator"
			button="true"
			/>
	<img id="indicator"
	     src="images/indicator.gif"
	     alt="Loading..."
	     style="display:none"/>
</s:form>

Custom config file

The custom config file defines the toolbar MyToolbar

CKEDITOR.editorConfig = function (config) {

    config.plugins = 'dialogui,dialog,about,a11yhelp,basicstyles,blockquote,clipboard,panel,floatpanel,menu,contextmenu,resize,button,toolbar,elementspath,list,indent,enterkey,entities,popup,filebrowser,floatingspace,listblock,richcombo,format,htmlwriter,horizontalrule,wysiwygarea,image,fakeobjects,link,magicline,maximize,pastetext,pastefromword,removeformat,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,undo,wsc';
    config.extraPlugins = 'onchange';

    config.toolbar = 'MyToolbar';

    config.toolbar_MyToolbar =
        [
            ['NewPage', 'Preview'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
            '/',
            ['Styles', 'Format'],
            ['Bold', 'Italic', 'Strike'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
            ['Link', 'Unlink', 'Anchor']
        ];

};

Enable File Upload Support

Set upload="true" in your ckEditor instance:

<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>
	<sjr:ckeditor 
		id="richtextEditor" 
		name="echo" 
		rows="10" 
		cols="80" 
		width="800"
		uploads="true"
		value="My Text!"
	/>

Configure Uploads in your struts.xml :

	<constant name="struts.ckeditor.allowUploads" value="true" /> <!-- default is false -->
	<constant name="struts.ckeditor.allowedFileExtensions" value="jpg,jpeg,png" />
	<constant name="sstruts.ckeditor.uploadFolder" value="/imageUploads" />

Customize Error Messages :

struts.ckeditor.error.notallowed=Uploads are not allowed!
struts.ckeditor.error.invalid.extension=Invalid File Extension!
struts.ckeditor.error.general=Error occurred!

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
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
customConfig false false String path to custom config file
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
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
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
onEditorReadyTopics false false String Topics that are published when editor instance is ready
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
onFocusTopics false false String A comma delimited list of topics that published when the element is focused
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
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
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 of the ckeditor instance.
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'
skin false false String the richtext skin. e.g kama, office2003, v2
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
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
toolbar false false String Toolbar Configuration. e.g. Basic or Full
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
uploadHref false false String Use a custom Upload URL
uploads false false false Boolean Enable Uploads for this Editor Instance.
value false false String Preset the value of input element.
width false false Integer width attribute
wrap false false String HTML wrap attribute
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.