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. The 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.
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.
Let’s assume we want to re-create a button element in our template as the main call-to-action for the message.
Below we have the CSS rules for this button:
.call-to-action {
padding: 12px 32px;
background-color: blue;
color: #FFFF;
font-weight: 700;
}
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:
<p>
<div
data-kolleno-custom-styled-div="true"
style="padding: 12px 32px; background-color: blue; color: #FFFF; border-radius: 8px; width: fit-content; font-weight: 700; cursor: pointer;"
>Click me</div>
</p>
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. Make use of the HTML source editor to insert the new HTML into your editor.
