A rich text editor (RTE for short) is a user-friendly tool that helps you create, edit, and format text in a way that goes beyond simple, plain text. Think of it as a more advanced version of your everyday text editor, providing a variety of styling options to make your text look just the way you want it.

At Kolleno we use our RTE (Rich Text Editor) for all communications. It’s easy to recognise the RTE via the toolbar buttons at the bottom of the editor.

Note the Format Text and attach files buttons in the toolbar below the editor

The toolbar on the RTE (Rich Text Editor) contains various plugins that are specific to the type of communication being composed. These plugins provide additional functionality and features to enhance the editing and formatting capabilities of the editor.

At Kolleno, we continuously strive to enhance the functionality of our RTE (Rich Text Editor) by introducing regular updates and new features. Below is a list of plugins that we believe will assist you in getting started for most use-cases. For more advanced requirements, kindly reach out to your customer support agent for further assistance.

Clicking on the Format Text button in the toolbar will expose a number of settings relating to text formatting for the editor

Formatting can be applied to all of the text by:

Or you can choose to only update a portion of the editor text by selecting the targeted section and updating the settings

Certain text formatting settings can also be toggled via keyboard shortcuts:

You can transform any section of text to act as a hyperlink. Simply select the text you want to convert and then click on the Insert Link icon

Note that in this example we selected “here” as the target text. Clicking on the Insert link plugin will expose the link editor below the selected text.

From here you can choose to either edit the link or completely remove the link from the text. When a link has been added the styling of the text will be updated to reflect that.

There are two ways you can add images to your communication

Simply drag and drop the image onto the editor to insert it into the message. You will notice that the editor indicates that you can drop the file when it detects a hover.

And then once the image has been dropped the editor will include it in the message content

To include an image as an attachment to the message we need to use the Attach File button

You can either click on the paperclip to go directly to picking a file to attach or you can select the arrow to show more options.

From this menu we can control if invoice PDF’s should be included as well. For now we will focus on adding our image as an attachment so we will go with Upload file.

Once your file is uploaded you will notice a card indicating that a file has been attached alongside the option to view all attachments

Clicking on View Attachments will show you a more detailed view of all the attachments on this communication

Kolleno uses multiple tags to allow users to create templates and communications that will be filled with user specific information before being sent. For example we will use {{ customer.balance }} to insert the customers balance value in the message.

The Kolleno RTE simplifies adding these tags to a message by eliminating the need for you to remember each and every tag’s text.

At the top of the RTE you will see another toolbar with a button labelled Insert tag. Clicking on that button will show you a searchable list of tags that can be added.

You can use the searchbar to find a specific tag

Once a tag has been selected it will be added to the editor content. Tags will display a user friendly label ie: Customer Balance, but will do all the required work to insert {{ customer.balance }} to the message.

For power users you can also search and insert tags using what we call the type-ahead menu.

Let’s for example assume you want to add the following greeting to a message:

“Good morning {{ customer.first_name }}”

You can start off by adding the “Good morning” portion to the editor

To insert a tag from here we simply type / to trigger the type-ahead menu.

The editor will display a short list of popular tags. You can use your keyboard arrows to select a tag and then hit the enter key to add the tag to the editor.

We have successfully created our message with a tag without needing to remove our hands from the keyboard at all.

Also note that you can search for a tag while the type-ahead menu is open. Any text following the / will be used as search input.

Assuming you have an HTML template that you want to use with the RTE, you can utilise our HTML source code editor to upload the template and make modifications to it.

The Kolleno RTE tries to not impose any restrictions to the type of content that can be created in the editor, but there are some limitations that can not be avoided. Rich text editor sits on top of HTML content, but not all HTML elements are available within the editor’s context. For example the Kolleno RTE does not support inserting <button/> elements or custom <script/> and <style /> tags.

We do however off some assistance should you want to style some content beyond the capabilities the standard RTE has to offer.

<aside> ⚠️ Note that any content contained within these custom elements are not guaranteed to work 100% with the other editor plugins. Please thoroughly test your implementation before using it with real-world data.

</aside>

Let’s assume we want to re-create a button element in our template as the main call-to-action for the message.

The styling applied to the button:

To re-create that button we will use a <div/> element with a few inline styles. We also need to include the following attribute to the element: data-kolleno-custom-styled-div

Here is the new HTML for the div element styled to look like a button:

Note that we are wrapping the div in a p tag. That is to allow us to move the caret before or after the custom element.