23 Sept 2019

Rich Text Editor features

Within Collaborate, the Rich Text Editor is used in various modules and other areas to allow site users and Administrators to create highly formatted content, including tables, images, video and embedded site content.

For site users, the Rich Text Editor is the main interface for creating wiki pages, blog posts and events. 

Other content areas, such as the Tasks module and commenting, use a stripped-down version of the Rich Text Editor. 

All of the available rich text formatting options have not been enabled in every instance of Collaborate. If an instance does not have an option that is discussed, contact HighQ to have that option enabled

Typically, when there is existing content in a module that uses the rich-text editor, it will be shown in the view mode, by default and if a user has edit rights to that content, an Edit button or tab will be displayed. Once selected, the content will be shown in edit mode and the rich-text editor will be displayed. When new content is being added, the Add new form will show the rich-text editor by default.

Features

The rich-text editor used in Collaborate is based on a well-used, third-party software known as CK Editor, which has been modified and extended for Collaborate. However, many of the basic features are the same. CK Editor has its own User Guide that is useful for answering most questions and maximizing the potential of this tool.

The modules that use the fully featured rich-text editor -- Wiki, Blog, Events and Home (plus the site notices) - will have most of the options shown above. (Based on how wide a user's browser is set, the options may appear on more than two lines.) For purposes of this set of articles, assume the options are shown on two lines.

Many of the editor features will be familiar to anyone who has used Microsoft Word to create documents, like bold, italic, underline, strikethrough, super- and sub-script, bulleted and numbered lists etc.

If a user is unsure what an option does, simply hover over the option to reveal the option's name in hover text:


As most users will have familiarity with the large majority of the editing features, this article will focus on the less well known and likely more powerful, features of the tool:

  • Full-screen mode - This makes the editor take up the entire page, which exponentially enhances the utility of the editor. Click full-screen mode again to return the editor to its normal layout and save the changes
  • Copying from Microsoft Word - Users are able to copy across content from Microsoft Word into the editor and keep all the original formatting. This includes tables and bullet points but does not include images
  • Drag and Drop files - Users now have the ability to drag and drop images into the editor:

  • Inline Notification - The inline notification notifies the user when a file has been successfully uploaded and will also alert the user if a file has not been uploaded correctly:

  • Table Resizing - A user now has the ability to resize a column table within the editor, by clicking the column border and dragging their mouse to the desired size:

  • Code Snippets - Users now have the ability to insert rich code snippets with syntax highlighting into the editor via Insert Code Snippet:

This will display the Code Snippet screen where a user can select the language to be used:


 And also enter the code content:

Click OK to insert the code snippet into the editor:

  • Embed Media - Users can now embed media directly into the editor via Embed Media from External Sites:

This displays the Embed Media Content screen:


Here, enter the URL of the media you want to embed; you can also select to resize and align the media. Click OK to embed the media in the editor:

As of 5.3,  we have added the ability to add Snippets into the CK Editor in the Footer section. To do this, click Content hub within your profile drop down menu:

And within the Content hub, navigate to Content manager Snippets:

The Snippets screen is displayed. Within the Snippets screen, you can either add a new snippet:

Or edit an existing snippet:

Once you have created your snippet, to add it to the Footer, navigate to your profile drop down menu and click System admin:

The System admin screen is displayed. Within the System admin screen, navigate to System customisation > Footer:

The Footer screen is displayed:

To add the snippet within the footer, click Snippet link:

The Select snippet screen is displayed:

Within this screen, select the snippet(s) you want displayed within your footer and click Save. The snippets will now be displayed within the footer.

Adding a snippet to a footer can then provide different text to different organisations and user groups based on the permissions of the snippet.

Was this article helpful?

Contents