Using the Content Editor

Several places in TeamDynamix allow the entry of formatted text and HTML via a text editor called CKEditor. This article provides guidance on how to effectively use formatted content.

All formatted content in the system is subject to HTML sanitization. Learn more about automated content sanitization.

In this article, we’ll cover:

• Image Size Restrictions and Resizing
• Using Templates
• Removing the Underline
• Link to Other Sections of Same Page
• Where to Find Editors

Image Size Restrictions and Resizing

The maximum width for images is 900 pixels, and the content viewing size in the Client Portal is limited to 750 pixels. The maximum file size for uploads is approximately 4 MB. 

For best results, format your images so the width is 750 pixels or less.

Oversized Image Handling

• Images that are between 750 and 900 pixels wide will be compressed to fit when viewing the published content in the portal. 
• Images that exceed 900 pixels will be scaled down to this width. 
• After uploading oversized images, you can resize them for display using HTML width and height attributes or inline CSS styles.

Learn how to Add Responsive Images to Articles.

Using Templates

Templates are pre-defined, ready-made elements with page layout, text formatting, and styling, as well as other elements. Templates can provide both smaller portions of content (like a callout or alert box) and base structures for entire documents (for example, a KCS article template). Templates are a useful tool to speed up the writing process and maintain consistency across the organization's content.

To use a template:

1. Open the editing page for the desired content
2. In the editor window, place the cursor where you want the element to appear
3. In the editor toolbar, click the Templates dropdown, then select an option from the available templates
4. The element will appear in the page content and is ready for editing

Client Portal administrators with the Modify Article Templates permission can create and manage article templates. Learn more about defining templates here.

Removing the Underline from Hyperlinks in Custom Content

As per WCAG 2.0 Guideline 1.4.1, hyperlinks in the client portal are underlined to clearly indicate their presence to users. If there is a compelling reason to remove this underline, it can be achieved using a CSS class.

The underline is applied to all link elements in the Client Portal that are outside of the header or footer. This includes Knowledge Base articles, Service listings, Questions, and custom HTML modules. 

TeamDynamix has included a unique CSS class that can be applied to hyperlinks to remove this underline – add the no-underline class to the anchor element. This must be done individually for each link in the content.

To apply the no-underline class:

1. Open the editing page for the desired content
2. Click on the Source button in the upper left corner of the editor. Note that not all users have access to see the Source button
3. Locate the anchor element for the link and add class="no-underline". For example:

   <a class="no-underline" href="https://www.teamdynamix.com/">Sample Link</a>
   

4. Click Save

Linking to Other Sections of the Same Page

It is possible to make links that navigate to other sections on the same page; these are called "anchors". This is an especially useful technique for building an article that has a table of contents at the beginning or to refer to another section while providing a convenient link. These in-page links can be used in Knowledge Base articles, Services, and Questions.

Create an Anchor Link Using the CKEditor

To create an anchor link using the CKEditor:

1. Select the text you want to link to
2. Click the Anchor button (waving flag icon) in the editor toolbar
3. Enter a meaningful name in the Anchor Name field, then click OK
4. Go to the content you want to link from
5. Select the text and click the Link button (chain icon) in the editor toolbar
6. In the Link popup, under Link Type, select Link to anchor in the text
7. Under Select an Anchor, click the By Anchor Name dropdown and select the anchor you created

Create an Anchor Link Using HTML

The following explains the HTML needed to put a link at the top of a knowledge base article to jump to a Contact Us section in the middle of the article.

The anchor is the clickable starting point link. The HTML is:

<a href="#ContactUs">Go to the Contact Us section</a> 

The href attribute for the anchor should be in the format #ID-of-DestinationLink. In this case, since the destination link below will have an id and name value of ContactUs, the starting point link should have an href value of #ContactUs.

The destination link is where the link should go on the page. This link is not visible in the browser.

You should place HTML like the following at the beginning of the Contact Us section to end up after clicking the link at the top of the page:

<a id="ContactUs" name="ContactUs" style="display: inline-block;"></a>

Where to Find Editors

Administrators, Service Catalog managers, and Knowledge managers will use formatted content in a variety of places in TDAdmin and Client Portal.

HTML content editors can be found in the following locations:

• Client Portal login prompts, HTML headers, and footers: TDAdmin > Applications > [Client Portal Application name] > Settings > Site Settings
• TDNext login prompts: TDAdmin > Organization Settings > Site Settings
• HTML desktop modules: TDAdmin > Desktop Templates > HTML Modules
• Service Catalog Service content: Client Portal > Services > New Service or Edit Service
• Service Catalog Service Offering content: Client Portal > Services > [Service name] > New Service Offering or Edit Service Offering
• Knowledge Base Article content: Client Portal > Knowledge Base> New Article or Edit Article
• Question bodies and answers: Client Portal > Questions > New Question or Edit Existing Question (or its Answers)