Guide

Text Editor

Many entry fields on the Inzu cloud CMS use CK Editor to give more control over the styling of text. CK Editor is a widely used and supported text editor that offers a range of useful features.

It is important to learn the basics of CK Editor to get the most out of using the Inzu cloud CMS to author and edit content. Note not all the text editor features are used on all content types.

Full window editing

Maybe the most important feature to remember is the full window-editing mode. For writing full-page articles or text that is more than a few paragraphs, being able to see everything at once makes writing a lot easier.

Source code

Next to the full window button is the ‘Source’ button - this option reveals the underlying HTML code that is generated by CK Editor when you type or style text. This can be useful if your page is having formatting issues, but the HTML code should only be edited if you know your way around the HTML language or you may cause issues displaying the content as intended.

Text styling

A number of options are available that allow you to style the entered text. These styles use regular HTML markup, so can be controlled via a CSS page on your website however you want to. For example, you can assign headings to be Heading 1 or Heading 2 on Inzu and then control the colour, size and font of those heading types across your whole site via a central CSS page.

Text styles available are:

Format - Assign text to be a HTML heading e.g. H1, H2, H3 etc.

Font family - Select a font from the standard HTML font list

Font size - Set highlighted text to be a different font size

Font colour - Colourise any highlighted text

Font weight - Make text bold

Italics - Make text italicised

Make list - Convert text to HTML list

Align/Justify - Align text to the left, centre, right or justify text

Creating lists

You can convert a text list to a HTML formatted list by using either the ‘ordered' or 'un-ordered’ list button. Firstly highlight the text to be converted, then choose what type of list you require. The ‘ordered' list option will automatically number each item on the list, whereas the 'un-ordered’ option will use bullet points. Again, because the list is now in HTML it can be styled via your site’s CSS page to be highly customised.

Adding a web link

Highlighted text or images can be selected to link to any website or e-mail address. There are three buttons associated with links - one is to create the link (the chain), one to remove a link (the broken chain) and one to create a page anchor. To add a link to a web page follow these steps:

  1. Highlight the text you want to convert into a link
  2. Click the ‘Link' button
  3. Type the web address in the ‘URL' field and click OK

Adding an e-mail link:

  1. Highlight the text you want to convert into a link
  2. Click the ‘Link' button
  3. Change 'Link type' to E-mail
  4. Enter the e-mail address in the “E-mail” field and click OK

Linking to files

As well as being able to link to a web address, it is also possible to select the web address of a file previously uploaded to Inzu. By clicking 'Browse Server’, a file browser for your account will let you select the right file with the web address for that file being automatically entered for you. More detailed instructions for the file browser can be read here:

Page Anchors

To add a link to a position on a page, you need to first highlight the text where the link will go to, click the ‘Anchor' button and name the anchor.

To link to the new anchor, click the ‘Link' button when the text you want to link from is highlighted then choose 'Link to anchor in text' from the 'Link type’ drop down. This will provide a list of anchors from the page which you can link to.

Including/uploading images

When writing an article you will often want to add images directly to the document between the text you are typing. To add an image where the cursor is currently located, click the ‘Image' button. A dialog box will open that has a number of options.

If you are simply including an image from your account that has already been uploaded, click the 'File Browser' button. Selecting the image from the file browser will return back to the image dialog where you can choose to re-size the image and alter the image’s position.

To upload a new image, click the ‘Upload' tab on the image dialog. This tab will allow you to select an image from your computer, which is uploaded by clicking 'Send to Server'. Once the image has uploaded, you return to the first tab where the image can be re-sized and positioned.

Please note that images uploaded via the text editor will be listed on the entry page and can be deleted or replaced via the entries' image list.

Tables

The ‘Tables' button will allow you to add a HTML table to your page. This is the best way to display data in a tabular format.

Media attachments

Some Content Library sections such as Blog and Articles allow for file and image attachments to be uploaded. There are two fields at the base of the entry form for adding images or files.

The media will appear on the entry page once uploaded and can be replaced or removed at any time. The attachments may be used within the text of the entry by using the file browser, or they could be listed alongside a page on your site as an attachments list.

File browser

When adding a link or an image to text via the text editor, the option for 'Browse Server’ is available. This folder contains subfolders relating to different Inzu applications including the Inzu cloud CMS - within an application’s folder will be relevant files such as images you have previously uploaded.

The folder structure is as following:

The main window of the browser can be set to a list view or thumbnail view, which is useful when viewing a folder of images.