Editing text in CKEditor

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

About this task

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

Editing modes in CKEditor

Editor mode CKEditor 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 that you edit in CKEditor might display differently in the store. CKEditor uses a base style (a CSS file) for all device platforms to render your content in editor mode. The store style, which is controlled by different CSS files, might override the formatting that you apply in CKEditor. For example, when you apply bold formatting to text in CKEditor, the editor adds a <strong></strong> tag around the text. If a store CSS file contains a rule that applies the color 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 CKEditor. For this reason, you should always use store preview to view the most accurate representation of the content that you create in CKEditor.
Source mode To add or edit HTML code, click Source. In source mode, the options in the toolbar become unavailable. If you switch back to editor mode, be aware that editor mode might correct or remove code that cannot be interpreted. To preview content, it is recommended that you stay in source mode, close CKEditor, and use store preview.
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.

Procedure

  1. In a rich text field in Management Center, such as a Long Description field, click Pencil. CKEditor launches in a new window.
  2. Do one of the following things:
    • If you want to paste HTML code, click Source, and then paste the code. Click Source again to see the rendered HTML.
    • If you want to format and style your content in CKEditor, type your content and use the options in the toolbar for formatting. In addition to the standard icons available in most editors, CKEditor provides extra functions for editing content. The following table describes some of the extra functions.
      Icons
      Icon Feature description
      PasteHCL Commerce Version 9.1.6.0 or laterPaste Paste content that is on your clipboard.
      Paste as plain textHCL Commerce Version 9.1.6.0 or laterPaste as plain text Paste content that is on your clipboard as plain text.
      Paste specialPaste from Word Paste content that contains special formatting and style. For example, you can directly paste content that you copy from Microsoft Word.
      Special characters

      HCL Commerce Version 9.1.6.0 or laterSpecial 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

      HCL Commerce Version 9.1.6.0 or laterRemove format

      Remove formatting.
      Templates

      HCL Commerce Version 9.1.6.0 or laterTemplates

      Add content to a template. Use this feature to maintain format consistency for content across the store.
      Images

      HCL Commerce Version 9.1.6.0 or laterImages

      Insert an image by specifying a URL to the image.
      Flash

      HCL Commerce Version 9.1.6.0 or laterFlash

      Insert a flash movie by specifying a URL to the flash movie file.
    Note: CKEditor uses the Management Center dictionaries when spell checking content. If you run a spell check while working in a language for which there is no dictionary, such as Japanese, CKEditor displays a Spell Check Complete message even though the spell checker did not run. To see which languages are not supported for spell checking, see Using the Management Center.
  3. Save and close CKEditor.