Editable Template Block Widget - Custom Tag
<template-editableBlock attributes> ... </template-editableBlock>
The (editable) sample content for the editable block goes between the opening and closing tags.
Note, that this widget is only allowed while editing the code of a standard template. It is not allowed in a click-and-fill template and it is also not allowed when editing the code of a mail job.
Allowed attributes:
-
class: Sets one or more style class attributes for the editable block, similar to the standard HTML
class
attribute.Possible values: List of class names.
-
cloneable: Defines if this editable block shall be cloneable or not.
Possible values:
true
orfalse
-
condition: Sets the widget condition for the editable template block. The widget will only be shown if this condition is true (or if there is no condition at all). See here about special issues when specifying a condition formula in code mode.
Possible values: Any valid calculation formula that does not have a number set or text set as its result.
-
conditioneditable: Defines if this widget shall allow the template end user to edit the widget condition (or define one, if the widget currently does not have one) or not.
Possible values:
true
orfalse
-
deletable: Defines if this editable block shall be deletable or not.
Possible values:
true
orfalse
-
name: Defines the optional widget name. You can specify any name you like to label the widget. This name is shown in the widget hierarchy panel (in design mode) and makes it easier to identify the widget in the hierarchy. It also makes it easier it identify the widget here in code mode. However, the name is entirely optional and does not have any additional functional purpose.
Possible values: Any text
-
style: Defines the styling of the editable block.
Possible values: A list of styles, separated by semicolons, similar to the standard HTML
style="..."
attribute. The following styles are allowed:-
background-color
: Defines the background color of the editable block. -
border
: Defines the border around the editable block. -
color
: Defines the text color of the editable block. -
font-name
: Defines the font of the editable block by specifying its name. The name must be one of the standard fonts that is also available from the font drop-down in design mode (i.e. one of the fonts that has been defined on the Editor Fonts page; see menu item "Preferences" -> "Editor Fonts"). If any other font name is specified, it is ignored and the editable block uses the default font instead (as specified in the "Fluid Design Widget Default Font" panel on the right). If this style is not present, the editable block also uses the default font.
Note: Although similar, this style is not the same as the standardfont-family
style. Most importantly, you cannot specify a comma separated list of fonts. Instead, only a single font name must be specified. -
font-size-rel
: Defines the size of the editable block font, relative to the default font size, in percent. The size is always interpreted with the unit "%", even if no unit is specified. If a different unit is specified, it is ignored and "%" is used instead. If an invalid size or unit value is specified, it is ignored and the widget uses the default font size instead (as specified in the "Fluid Design Widget Default Font" panel on the right). If this style is not present, the widget also uses the default font size. Also, the specified size must be one of the standard sizes that is also available in the widgets properties dialog in design mode. If a different size is specified, the default font size is used instead.
Note: Although similar, this style is not the same as the standardfont-size
style. Most importantly, you can only use the "%" unit and can only specify one of the standard sizes. -
font-style
: Defines if the font of the editable block shall use the "italic" style or not. The only allowed value for this style isitalic
. If any other value is specified, it is ignored and the normal non-italic font is used. The normal font is also used if this style is not present at all. -
font-weight
: Defines if the font of the editable block shall use the "bold" weight or not. The only allowed value for this style isbold
. If any other value is specified, it is ignored and the normal non-bold font is used. The normal font is also used if this style is not present at all. nested-paragraph-margin
: Defines if the first/last paragraphs in this editable block shall have a margin before and/or after. This style affects only the top margin of the very first paragraph and the bottom margin of the very last paragraph. The other margins, especially those of paragraphs that are not the first or last paragraph, are not affected. The following values are allowed for this style:none
: No top margin for the first paragraph and no bottom margin for the last paragraph.before
: A top margin for the first paragraph but no bottom margin for the last paragraph.after
: A bottom margin for the last paragraph but no top margin for the first paragraph.
If any other value is specified, it is ignored and the editable block uses the standard margins even for the first and last paragraphs.
-
text-align
: Defines the alignment of the text in the editable block. Only the valuesleft
,center
,right
andjustify
are allowed. If any other value is specified, it is ignored and the editable block uses the inherited alignment. The inherited alignment is also used if this style is not present at all. -
text-decoration
: Defines if the font of the editable block shall use the "underline" style or not. The only allowed value for this style isunderline
. If any other value is specified, it is ignored and the normal non-underlined font is used. The normal font is also used if this style is not present at all. -
padding
: Defines the padding inside of the editable block (between the block and its content).
-
Examples:
<template-editableBlock cloneable="false" deletable="false"> Editable sample content goes here... </template-editableBlock> <template-editableBlock class="myclass" cloneable="true" deletable="true" style="color:#7b4269; background-color:#fff4aa; border:5px solid #00ff69; padding:3px 2px 4px 1px;"> Editable sample content goes here... </template-editableBlock>