contenteditable
An HTML content command that can make the contents of its host element editable.
If the value of this command's primary attribute resolves into a Boolean value of true, the host element's contents can be freely edited by typing and deleting text, and by using the tools provided by the toolbar that appears upon clicking the element. The available tools may be defined through the secondary attribute contenteditable-editor.
Should the host element have the standard HTML id attribute defined, its contents at the time of the Screen's submit - edited or not - can be found in the variable context as a variable with the same name as the element's id. The value will be of the String type. Additionally, a variable with a similar name but with the suffix 'Modified' can be found in the context - it's a Boolean value telling if the contents of the host element were edited (this behavior can be disabled through an attribute if needed).
Note that this command's effects can be overridden by the composeContent command's editable attribute, which if false, prevents the contents from becoming editable regardless of the value of this command's primary attribute.
This command has a priority of 15.
Inserting images
Among the various tools in the editing toolbar is one allowing users to select image files on their local file systems and place them into the editable content. Activate this feature by including "image" in the list of tools defined with the contenteditable-editor attribute. Any image file inserted this way is actually uploaded into the user's Salesforce organization and a public download URL generated for it. This public download URL is then used to link the image into the edited content, allowing the image to be displayed. As the selected local image now resides in Salesforce, the user may find it in the Salesforce UI's Files view as a file owned by that user, with the file name being the same as that of the local file. Since the content into which the image was inserted links to this particular Salesforce file, deleting the file breaks the link and inserted image can no longer displayed.
Secondary attributes
contenteditable-editor | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | String | Yes |
This attribute can be used to define additional tools that will appear in the editing toolbar. The resolved String should list the names of the tools separated by semicolons. Names of the available additional tools are:
If not defined, no additional tools will appear. | ||
contenteditable-toolbarcontainer | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | String | Yes |
This attribute can be used to fix the editing toolbar into a constant position instead of it appearing dynamically near the editable content block. The resolved value should be the | ||
contenteditable-toolbarcolor | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | String | Yes |
Defines the color of the editing toolbar. The resolved value should be a hex RGB value prefixed with a hash mark, eg. "#88bbff". If not defined, the toolbar will have its default color. | ||
contenteditable-filterpaste | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | Boolean | Yes |
If this attribute's value resolves into If not defined, the value of | ||
contenteditable-nativespellcheck | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | Boolean | Yes |
If this attribute's value resolves into If not defined, the value of | ||
contenteditable-availablefonts | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | String | Yes |
This attribute can be used to define the set of font families the editor toolbar's font family tool presents. The resolved value should be a listing the family options separated by semicolons. Each family option may contain one or more similar font families separated by commas, in a way similar to how the font-family CSS property works (eg. "Times New Roman,serif;Arial,sans-serif"). Each option may also contain a label preceded by the font families, separated by a slash (eg."Times/Times New Roman,serif"). Do note that this attribute's value has no effect if the If not defined, the value "Sans-serif/sans-serif;Serif/serif" is used, giving the user a very simple font selection. | ||
contenteditable-disablemodifiedvar | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | Boolean | Yes |
This attribute can be used to disable the automatic generation of the "Modified"-suffix variable telling if the editable contents were modified or not. If the resolved value is "true", the variable will not be generated. If not defined, the value of "false" is used and the variable will be generated. | ||
contenteditable-defaults | ||
|---|---|---|
Required | Value type | EL-evaluated |
No | Map | Yes |
This attribute allows a Map to be used to define the values of most of the other secondary attributes without actually defining them on the host element. The resolved Map should map attribute names to attribute values. If the host element has a mapped secondary attribute defined, that defined value takes precedence over the mapped value. These are the keys for secondary attributes that can be defined through the Map:
| ||
Examples
This example produces a small editable block of text with the editing toolbar in bright white color.
<div id="editedContent" dyn-contenteditable="true" dyn-contenteditable-toolbarcolor="'#FFFFFF'">This text can be edited!</div>Whether the block's contents are modified or not, the contents at the time of the Screen's submit can be found in the variable context. In that example, that variable would be "editedContent" and the variable "editedContentModified" would be a Boolean telling if the content was modified or not.
In this example the id of the host element is the same as the name of the variable holding the element's content. This results in the edited content replacing the original content as the variable's value.
<div id="greeting" dyn-content="greeting" dyn-contenteditable="true"></div>If you wish to make use of the contenteditable-defaults secondary attribute, use the setMap command to create the set of attribute values:
<setMap var="editorAttrs"><addMapEntry key="contenteditable-editor" value="table;pagebreak"><addMapEntry key="contenteditable-toolbarcolor" value="#003366"><addMapEntry key="contenteditable-nativespellcheck" value="true">And then use the created Map as the attribute value:
<div id="editableArea" dyn-contenteditable="true" dyn-contenteditable-defaults="editorAttrs">Content</div>