Editing text in CKEditor

Use CKEditor to edit rich text when working with objects in Commerce Lab 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 Commerce Lab, 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
      PastePaste Paste content that is on your clipboard.
      Paste as plain textPaste 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

      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 format

      Remove formatting.
      Templates

      Templates

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

      Images

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

      Flash

      Insert a flash movie by specifying a URL to the flash movie file.
    Note: CKEditor uses the Commerce Lab 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.
  3. Save and close CKEditor.