The WYSIWYG Field - Documentation topics on: cdn,links,permanent link,wysiwyg editor,wysiwyg field,.

The WYSIWYG Field

The WYSWYG (What You See Is What You Get) editor allows you to create content with word processor-like formatting. You can type in text and apply styles to it (make it bold, italic or change the text color for example), insert links and images, and add other content and formatting, with all changes visible in the editor similar to how they will be shown on the front-end site.

The body section of the Content Type displayed in the image below is a WYSIWYG field.

WYSIWYG Field

Editor Buttons

The following list shows the icons for the formatting buttons in the WYSIWYG editor, and a brief description of their functions:

ButtonDescriptionButtonDescription
Bold Text ButtonToggle bold textForeground Color ButtonSelect font color
Italic Text ButtonToggle italic textBackground Color ButtonSelect background color
Italic Text ButtonToggle underline textHorizontal Rule ButtonInsert a horizontal line
Justify Left ButtonAlign leftLink ButtonInsert link
Justify Center ButtonAlign centerImage ButtonInsert image
Justify Right ButtonAlign rightTable ButtonInsert table
Numbered List ButtonCreate a numbered listCode ButtonView and edit HTML source
Bulleted List ButtonCreate a bulleted listFull Screen ButtonFull screen edit mode
Indent ButtonIncrease indentingOutdent ButtonDecrease indenting

Inserting Paragraphs and Single Line Breaks

As you enter text, pressing starts a new paragraph (which leaves spacing between the previous paragraph and the new paragraph). To insert a single line breaks (without starting a new paragraph, and thus without added space between lines), press + .

You can add either web page links or email links within your content using the Link button. Here are the options available:

Link URL: For a web link, enter the full web address starting with http:// and for a email link enter mailto: followed by the email address.
Target: By default links will open in the same browser window. To have links open in a new browser window, select "Open link in new window" from the dropdown list.
Title: Enter the text your want to have appear when a user mouses over the link (ex. Click here for more information)

Image URL Format

When you insert an image into the WYSIWYG editor, dotCMS automatically inserts the image link using a specific format. You may manually edit the link to change the format (for example, to specifically add a reference to the dotCMS Site rather than using a relative link), and you may change the format used to insert new links.

Image URL Format Pattern

You may change the format that the WYSWIWYG editor uses to insert links by specifying the WYSIWYG_IMAGE_URL_PATTERN property in the dotmarketing-config.properties file.

Note: It is strongly recommended that all changes to the dotmarketing-config.properties file be made through a properties extension file.

The value of the WYSIWYG_IMAGE_URL_PATTERN property can include the following variables, which will be replaced by the appropriate values when a new link is inserted:

VariableReplaced with
{name}The name of the page or file
{path}The path to the page or file
{languageId}The language ID of the page or file
{hostname}The hostname of the Site the page or file is located on
{extension}The extension of the page or file referenced
{inode}The inode of a file or page in your dotCMS instance
{identifier}The identifier of a file or page in your dotCMS instance
{shortyInode}The 10 digit inode (shorty ID) of a file or page in your dotCMS instance
{shortyIdentifier}The 10 digit identifier (shorty ID) of a file or page in your dotCMS instance

Important: Variables will be replaced with the appropriate values at the time the link is inserted into the WYSIWYG editor.

  • For example, if a page or file is moved to another folder after a link referencing the {path} is inserted, the link will no longer work because the path of the file will not longer match the path in the link.
  • If you want to ensure that a link works even though the page or file is later changed, consider referencing the {inode} or {identifier} in the link pattern (and see the other example formats, below).

Default Format

By default, links will be inserted into your content using the following format:

WYSIWYG_IMAGE_URL_PATTERN={path}{name}?language_id={languageId}

This format inserts links relative to the root of the site in which your content is located, so with this default format, the links will work normally as long as the content is referenced from within the same site (but may not work if the content item is referenced from another site within the same dotCMS instance).

Example Formats

The following are some other patterns you may wish to use to change the way links are inserted into the WYSIWYG editor:

FormatProperty ValueNote
Include the hostname//{hostName}{path}{name}?language_id={languageId}Ensures that the content can be referenced from another site within the same dotCMS instance
Force the use of a CDN//cdn.cloudfront.dotcms.com{path}{name}?language_id={languageId}Useful when you use static publishing to a CDN
Permanent link/dA/{identifier}/{name}?language_id={languageId}The link will continue working even if the file or page name (and/or path) is changed (but will always show the most recent version of the page or file, wherever it's located)
Link to specific version/dA/{inode}/{name}Always links to the specific version of the page or file at the time the link is inserted (ignoring any newer versions of the page or file)
Shorty URL/dA/{shortyId}/{name}?language_id={languageId} 

Changing the Image URL Format

Important: When you change the value of the WYSIWYG_IMAGE_URL_PATTERN property, it only changes how new links are inserted. Any links which have already been inserted will not be changed. To change the format of an existing link, edit the link using the Link button in the WYSIWYG editor.

Image Button Inserting Images

To insert online images into your content, use the Image button. The following properties may be set on an inserted image:

PropertyDescription
Image URLURL of the image file to display
Note: This may be any image accessible by a URL, including an image file on your dotCMS system, an image in a Binary field, or an image from an external site
Image DescriptionDescription to display in the alt text
AlignmentImage alignment (selected from the dropdown)
DimensionsImage width and height
Note: The width and height are automatically set from the included image, but may be manually adjusted
BorderWidth of the image border (pixels)
Vertical SpaceAmount of space above and below the image (pixels)
Horizontal SpaceAmount of space to the left and right of the image (pixels)

Copy and Paste (#CopyPaste}

Cut, copy and paste of content within the WYSIWYG editor preserves the format of all content when that content is pasted.

However although you may copy and paste content into the editor from other sources, not all formatting from external sources will display (or display properly) once that content is pasted into the WYSWIWYG editor. Therefore you may need to add or modify the styling of content pasted into the editor.

Undo and Redo

The standard keyboard shortcuts for undo and redo work for both Windows and iOS:

WindowsiOS
Undo<CTRL>+z<CMD>+z
Redo<CTRL>+y<Shift>+<CMD>+z

Resize Window Button Resizing the Editor Window

The size of the WYSIWYG editor can be increased or decreased by dragging the lower right corner handle.

Fullscreen Button Full Screen Mode

To expand the editor window to full screen mode, click the Full Screen button. To return the WYSIWYG editor to the original size, click the Full Screen button again.

Code Button Viewing and Editing HTML Source

To view or edit the HTML code of the content in the editor, select the Edit HTML Source button. In edit source mode, you may make changes to the HTML code directly; after making changes, you may press the Update button to apply any changes made, or click the Cancel button to close the HTML code window.