HCL Commerce Version 9.1.14.0 or later

Editing text in the TinyMCE editor

Use the TinyMCE editor to edit rich text when working with objects in Management Center tools. TinyMCE is embedded in certain fields that support rich text editing in the Catalogs, Promotions, Marketing, and Commerce Composer tools.

About this task

TinyMCE Editor supports two modes for editing content: editor mode and source mode.

Editing modes in TinyMCE Editor

Editor mode TinyMCE Editor launches in editor mode by default. In this mode, you can edit content with the options in the toolbar and view the changes as you make them.
Note: The content you edit in TinyMCE Editor might display differently in the store. TinyMCE Editor uses a base style (a CSS file) for all device platforms to render your content in editor mode. The store style controlled by different CSS files, might override the formatting you apply in TinyMCE Editor. For example, when you apply bold formatting to text in TinyMCE Editor, the editor adds a <strong></strong> tag around the text. If a store CSS file contains a rule that applies red to all text in a <strong></strong> tag, then the text will be red in the store, even though the text is black in TinyMCE Editor. For this reason, you should always use store preview to view the most accurate representation of the content you create in TinyMCE Editor.
Source mode Click the source code icon or navigate to View > Source Code in the menu bar to add or edit HTML code. If you switch back to editor mode, be aware that editor mode might correct or remove code that cannot be interpreted. Click Save and Preview to preview the content.
Note: To view the accessibility instructions for navigating through the editor options with the keyboard, use the tab key to access the editor. Then, press Alt + 0 to open the Accessibility instructions window. Alternatively, click the Help option from the menu bar to get the list of shortcuts and accessibility instructions.

Procedure

  1. In a rich text field in Management Center, such as a Long Description field, click Pencil. TinyMCE Editor launches in a new window.
  2. The text can be edited using one of the following mode:
    • Source Mode: If you want to paste HTML code, click the source code icon or navigate to View > Source Code in the menu bar.
    • Editor Mode: If you want to format and style your content in the Editor mode, type your content and use the options in the toolbar for formatting. In addition to the standard icons available in most editors, TinyMCE Editor provides extra functions for editing content. The following table describes some of the additional functions.
      Icons
      Icon Feature description
      Paste Paste content that is on your clipboard.
      Paste as plain text Paste the content on your clipboard as plain text.
      Special characters Insert special characters and symbols.
      Text direction from left to right Format text direction from left to right.
      Text direction from right to left Format text direction from right to left
      Remove format Remove formatting.
      Images Insert an image by specifying a URL to the image.
      Media Insert a media file by specifying a URL to the media file.
      Note: Some actions like cut or paste do not always work using the menu bar, depending upon the browser settings. If your browser does not support direct access to the clipboard, use the shortcut keywords such as ctrl x/c/v instead.
      Note: The following shortcut keys are not supported in the TinyMCE editor:
      • (Ctrl + S) Save
        Note: Use the Save button to save the changes.
      • (Shift+Enter) Open the pop-up menu for split buttons
  3. Save and close the TinyMCE Editor.