Adding Custom Rich Text Editors to a Page in Creatio

Most sections in Creatio have an Attachment and Notes tab. On this tab you’ll see a rich text editor that allows for HTML content with fonts, text size, colors, tables, and even embedded images. You can create custom rich text editors, just like this one, with just a few simple steps. Your end result will be a fully-functioning rich text editor, just like the one that comes out of the box.

STEP 1: Add an Unlimited Text Field to the Page

The first step is to add the column that will store the contents of the rich text editor. This should be an unlimited length text field. Add this to the page where you’d like the rich text editor to display.

STEP 2: Modify the Text Field in the Diff

Next, you’ll need to locate the text field you added in step #1 in the diff of the page code. The easiest way to do this is to just do a CTRL+F/Command+F and search for the field name. Once you locate it, you’ll add the following into the “values” part of the field:

"contentType": Terrasoft.ContentType.RICH_TEXT

That alone is enough to make the control appear as a rich text editor (Note, sometimes the wizards will change this to “contentType”: 4 – which is also valid and nothing to worry about). However, if you want to be able to add images to the rich text, you’ll also need to add the following (also added to the “values” section):

"controlConfig": {
	"imageLoaded": {
		"bindTo": "insertImagesToNotes"
	},
	"images": {
		"bindTo": "NotesImagesCollection"
	}
}

This will bind the image handling in the rich text editor to the ones that already exist on the page. Lastly, rich text controls look nicer without the label, so I’d also add the following to the “values” as well:

"labelConfig": {
	"visible": false
}

The complete element in the diff will look something like the following:

{
	"operation": "insert",
	"name": "UsrMarketingSignaturee7ab2c68-170d-458b-a3bc-d7ca046ee2cc",
	"values": {
		"layout": {
			"colSpan": 24,
			"rowSpan": 1,
			"column": 0,
			"row": 0,
			"layoutName": "MarketingProfileTabGridLayout2c810a4b"
		},
		"bindTo": "UsrMarketingSignature",
		"enabled": true,
		"contentType": Terrasoft.ContentType.RICH_TEXT,
		"labelConfig": {
			"visible": false
		},
		"controlConfig": {
			"imageLoaded": {
				"bindTo": "insertImagesToNotes"
			},
			"images": {
				"bindTo": "NotesImagesCollection"
			}
		}
	},
	"parentName": "MarketingProfileTabGridLayout2c810a4b",
	"propertyName": "items",
	"index": 0
}

Now the rich text control will be fully functioning, just like the ones out of the box.