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 acces 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
      Paste Paste content that is on your clipboard.
      Paste as plain text Paste content that is on your clipboard as plain text.
      Paste special Paste content that contains special formatting and style. For example, you can directly paste content that you copy from Microsoft Word.
      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.
      Templates Add content to a template. Use this feature to maintain format consistency for content across the store.
      Images Insert an image by specifying a URL to the image.
      Flash 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.