You are here: Home / Extras / External Tools / CKEditor

External Tools

CKEditor

The CKEditor is a free, web-based HTML editor that is integrated into onOffice and enables the creation of HTML-formatted emails (website format). The CKEditor supports common text editing functions such as the free formatting of texts and the insertion of individual tables, and also offers multiple options for inserting additional elements such as images, PDF documents or links.

The CKEditor is used in onOffice mainly in two areas of application:

E-mail dialog

CKEditor in Email Composer

Creation of email templates in HTML format

Email templates in HTML format

In the E-Mail Dialog area, the CKEditor is initially displayed minimized. Click on the Icon CK Editor icon to maximize the CKEditor to full view. Clicking the icon again closes the full view again. The email template creation area displays the maximized view by default. Clicking on the Icon CK Editor symbol opens the full page view and closes it again.

Open / use editor

Upper toolbar

Show source code The source code view allows you to view the HTML coding of your email generated in the background. The CKEditor converts each of your entries into source code.
Entering source code is only recommended for advanced users!
Cut icon for text Cuts out a selected section of text.
Copy icon for the text Copies a selected text section to the clipboard.
Insert icon for the text Pastes a copied text with all formatting
Insert icon for the text without formatting Pastes a copied text without formatting.
Icon for the insert text from Word with options for style Offers the possibility to insert a text from Word. Here you can specify whether font and style definitions from Word are to be retained or removed.
Icon for printing Prints the contents.
Icon for spell check Performs a spell check.
Icon for undo Undoes the last change.
Icon for the restore Restores the undone action.
Icon for searching Executes the search for a term.
Icon for replacing text The searched term can be replaced by another term.
Icon for Executes “Select All”.
Icon for removing text formatting Removes formatting from the selected text

Form toolbar
Use of form elements is not suitable for sending emails

Upper formatting toolbar
This bar lists some formatting options known from other text editors: bold, italic, underlined, etc:

Icon for text Fat.
Icon for italics Italic.
Icon for underlining Underlined.
Icon for subscripting text Depressed.
Icon for superscripting text Superscript.
Icon for numbered lists Insert/remove numbered list.
html list Insert/remove dotted list.
Reduce indent Reduce infeed: Sets the text block to the left.
Increase indent Increase infeed: Sets the text block to the right.
Insert quote Opens a quote block. Click again to close the quote paragraph.
Insert Div-Block Creates a DIV block: Not suitable for enamel
Left-aligned Text is displayed left justified.
Center Text Text is displayed centered.
Right-justified text Text is displayed right-aligned.
Use justification Text is displayed in justified type.

Insert link elements

A link can be inserted by marking a text and selecting a link element.

Linking in the CKEditor  Inserts a link.  3 link types can be selected:

Inserting the link elements

  1. URL – Link to another website
  2. Anchor – link within the email
  3. email – Link to an email address (Clicking opens the mail program installed on the computer)

Protocol

  1. http:// – Linked to an external website
  2. https:// – Linked to a secure external website
  3. ftp:// – Linked to an external FTP address
  4. news:// – not suitable for sending by email
  5. all other protocols, e.g. also onOffice macro possible

Upload

Determines in which window the link is opened. Recommended for sending by email: New window.

Target page

Offers the possibility of uploading documents (e.g. .PDF or .doc) and making them available to the recipient for download.

Extended (for editing a link)

(for advanced students)

Unlinking a link  Removes an already inserted link.
Drop anchor  Anchor: Marks and names text passages for references within the email.
Insert image  Inserts a picture.

Specify in the image properties which image should be inserted and how it should be formatted.

Insert and format image

Picture info

“Browse Server” inserts an image that is already uploaded to the server.

Alternative text: Text that is displayed when the recipient has disabled the display of images in emails.

Width, Height: sets the width and height of the displayed image. The lock symbol locks the aspect ratio.

Link

Occupies the image with a hyperlink.

Extended (for editing the display)

(for advanced students)

Create table  Inserts a table.

Determine the table properties, such as the number of rows and columns, table width and height, etc.

Display settings.
If a table has been created, the cell properties window can be opened by right-clicking on the existing table. In the cell properties you can set the width, height, background color, border color etc. of the selected cell.

Insert dividing line  Inserts a horizontal line.
Insert smileys  Inserts a smiley face symbol.
Insert special characters  Inserts a special character.
Create page break  Inserts a page break (only effective when printing).

Lower formatting bar
In the lower formatting bar you will find various options for formatting your text.

Set font style A predefined style can be selected.
Customize format Select a format.
Adjusting the font Specifies the font.
Set font size Defines the font size.
Adjust font color Selecting the text color
Adjust font background color Selection of the background color.
Switch on display of the blocks Blocks are displayed
Help icon Help icon.
Extend / Restrict CKEditor Opens / closes the HTML editor.

Select a specific section of text to format only that section.

Set a formatting beforehand if you want to write the following paragraph block of the email in a certain formatting.

By pressing the Enter key, the editor opens a new paragraph block. Each paragraph block is formatted separately in the CKEditor.

A line break within a paragraph block can be created by using the key combination Shift (upper case) + Enter.