Menu

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:
  • color
    Allows the user to change the font color and the background color of selected contents.  
  • font
    Allows the user to change the font family and font size of selected contents. Use the contenteditable-availablefonts attribute to define the font families available for selection.
  • format
    Allows the user to copy or remove formatting of selected contents.
  • image
    Allows the user to insert an image from the local file system. The file is uploaded into Salesforce and then linked into the document content - see the main command documentation for more details.
  • indent
    Allows the user to increase and decrease the indentation of selected contents.
  • justify
    Allows the user to define justification of selected contents.
  • link
    Allows the user to insert a link.
  • pagebreak
    Allows the user to insert a page break. This break won't have much visible effect on the HTML view, but will render as a proper page break if the content is exported into a PDF.
  • pastetext
    Allows the user to paste content as plain text.
  • showblocks
    Allows the user to activate a display mode visualizing the HTML block elements of the content.
  • source
    Allows the user to open up a dialog displaying the content's HTML source.
  • table
    Allows the user to insert a table.                    
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 id of an element on the Form - the toolbar will appear in that element.
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 true, any content pasted into the editable area will have its own style information removed. This is likely to help in making pasted content blend better with the editable area's existing content.

If not defined, the value of false is used, allowing pasted content to retain its styles.
contenteditable-nativespellcheck

Required
Value type
EL-evaluated
No Boolean Yes
If this attribute's value resolves into true, the native spell checking mechanism of the browser will not be disabled within the editable area.

If not defined, the value of false is used, disabling the browser's spell checking within the area.
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 contenteditable-editor attribute's resolved value does not contain the "font" tool.

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:
  • contenteditable-editor
  • contenteditable-filterpaste
  • contenteditable-toolbarcolor
  • contenteditable-toolbarcontainer
  • contenteditable-availablefonts
  • contenteditable-nativespellcheck
  • contenteditable-disablemodifiedvar           

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> 

Comments

0 comments