Accessibility links

Breaking News
Create content

Introducing CKEditor

update

What's inside this article:


Basic information

CKEditor is a WYSIWYG rich text editor, which is available for adding and formatting text in Pangea CMS. CKEditor also lets you insert embedded content (such as images, videos, audio clips, rich links, and more). This article describes the available options in CKEditor for adding and formatting text.

Full CKEditor functionality is available for adding the main text on the following text content items:

  • Article | Backgrounder | Blog | FactCheck | Feature | Feature story | Live blog | News | Transcript

To learn how to create these content items from the beginning, see the following articles:

Full CKEditor functionality is also available for adding content to an HTML widget. To learn how to build an HTML widget, see the following article:

Partial CKEditor functionality is available for adding text on some multimedia and interactive content pages (such as Videos and Photo galleries).



Paste options

The following options are available for pasting text into CKEditor:


Standard paste

When you use standard paste, all supported formatting in the pasted text is kept. This option is useful for pasting text from third-party word processors (such as Microsoft Word).

To use standard paste:

  1. Copy the text to your clipboard.
  2. Position the cursor where you want to insert the text.
  3. Paste the text using the keyboard shortcut.

The following formatting is supported and is kept when you use standard paste:

  • Links to other webpages
  • Ordered and unordered lists
  • Basic inline styles (Bold, Underline, Italic, Strikethrough)
  • Text alignment (left-align, right-align, center-align, Justify)
  • Basic tables
NOTE: The pasted text is automatically converted to the default font, color, and size for your site.


Paste as plain text

When you paste as plain text, all formatting in the pasted text is removed. This option is useful for pasting text that includes unwanted formatting (such as text from websites).

To paste as plain text:

  1. Copy the text to your clipboard.
  2. Position the cursor where you want to insert the text.
  3. In the CKEditor bar, hit the Paste as plain text button.



Source Code View

Source Code View lets you add and format text using HTML code.

Hit the Source Code View button in the CKEditor bar to open Source Code View.

For information about supported tags, see the following article:



Embedded content

CKEditor lets you insert the following embedded content items:

  • Internal images: Images that have been manually uploaded to Pangea CMS by you or another CMS user.
  • External images: Images from the following external agencies:
    • AFP (Agence France-Presse)
    • AP (Associated Press)
    • Reuters
  • External media: Approved external media items (such as Facebook and Telegram posts).
  • Content items: Content items published by your site (such as Videos and Audio clips).
  • See Also links: See also links to other content pages published by your site.

To insert en embedded item:

  1. Position the cursor where you want to insert the embedded item.
  2. In the CKEditor bar, hit the Insert embedded content button.

For detailed instructions, see the following articles:



Styles

CKEditor offers the following options for text styling:


Inline styles

Inline styles let you style individual words / phrases within a block of text. The following inline styles are available:

Bold

Italic

Underline

Strikethrough

Subscript (such as the number 2 in H2O)

Superscript (such as the number 2 in E=MC2)

To apply an inline style:

  1. Highlight the text you want to style.
  2. In the CKEditor bar, select the style you want to apply.

Additional inline text styles are available via Styles > Inline styles.

To remove an inline style:

  1. Highlight the styled text.
  2. In the CKEditor bar, hit the Remove format button.


Block styles

Block styles let you style a block of text (a paragraph or a heading). The following block styles are available:

Italic title

Subtitle

Special container

Access block styles via Styles > Block styles.

To apply a block style:

  1. Highlight the text you want to style.
  2. In the CKEditor bar, select the style you want to apply.



Formats

Formats let you format a block of text (a paragraph or a heading). The following formats are available:

Normal

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Access formats via Format.

To apply a format:

  1. Highlight the text you want to format.
  2. In the CKEditor bar, select the format you want to apply.



Quotes

CKEditor lets you insert a stylized quote.

To insert a quote:

  1. Position the cursor where you want to insert the quote.
  2. In the CKEditor bar, hit the Insert quote button.



Lists

CKEditor lets you insert the following lists:

  • Unordered (bulleted) lists
  • Ordered (numbered) lists

To insert a list:

  1. Enter the list items. After every item, press the enter key on your keyboard.
  2. Highlight all the list items.
  3. In the CKEditor bar, hit the relevant button:
    • Insert / remove bulleted list
    • Insert / remove numbered list

To remove a list:

  1. Highlight the list.
  2. In the CKEditor bar, hit the relevant button:
    • Insert / remove bulleted list
    • Insert / remove numbered list



Indent text

CKEditor lets you increase or decrease the indent for a block of text (a paragraph or a heading).

When you increase the indent, the text starts further along the page.

To increase the indent:

  1. Highlight the text.
  2. In the CKEditor bar, hit the Increase indent button.

To decrease the indent:

  1. Highlight the text.
  2. In the CKEditor bar, hit the Decrease indent button.



Align text

CKEditor lets you change the text alignment for a block of text (a paragraph or a heading). The following options are available:

Align left

Center

Align right

Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text Justify text

To change the text alignment:

  1. Highlight the text.
  2. In the CKEditor bar, hit the relevant button:
    • Align left
    • Center
    • Align right
    • Justify



Links

CKEditor lets you insert a simple link to another webpage.

To insert a link:

  1. Highlight the link text.
  2. In the CKEditor bar, hit the Insert link button.

The following rules apply for defining the link:

  • Relative links to pages from the same site are not supported. For example, enter "rferl.org/Farda-English" not "Farda-English".
  • Links that include non-Latin script (such as "ru.wikipedia.org/wiki/Заглавная_страница") are fully supported.
  • You cannot add a link if the URL includes a space. If you face issues, ensure the URL does not include a trailing space at the end.

To edit a link:

  1. Right-click the link.
  2. Select Edit link.

To remove a link:

  1. Position the cursor next to the link.
  2. In the CKEditor bar, hit the Unlink button.



Special characters

CKEditor lets you insert a special character (such as $, ©, or ½).

To insert a special character:

  1. Position the cursor where you want to insert the special character.
  2. In the CKEditor bar, hit the Insert special character button.



Keyboard shortcuts

The following keyboard shortcuts are supported when you use CKEditor:

  • Bold (Ctrl + B) / (⌘ Command + B)
  • Italic (Ctrl + I) / (⌘ Command + I)
  • Underline (Ctrl + U) / (⌘ Command + U)
  • Copy (Ctrl + C) / (⌘ Command + C)
  • Paste (Ctrl + V) / (⌘ Command + V)
  • Cut (Ctrl + X) / (⌘ Command + X)
  • Undo (Ctrl + Z) / (⌘ Command + Z)
  • Redo (Ctrl + Y) / (⌘ Command + Y)


XS
SM
MD
LG