Hi Tom,

The text area can be configured to use different editors (e.g. CKEditor and Quill). So, to achieve what you're describing you should use a text area component configured with the editor setting set to CKEditor. This is what the content component also uses to allow you to add content.

The steps below can be used to achieve this:

Drag and drop a text area component into your form
Within the components setting under the display tab set the Editor property to CKEditor
Like all other components you can also set a default value for the text area or have its value dynamically updated.

Here's an example of the output.

Tom

Hey Erin,

Awesome, didn't know you could do this. but I'm now having trouble with the Dynamic Content not update, It is just saying the Line '' {{ data.clientname }} \"

Erin Dwyer

To dynamically update the value of a text area based the response to another field you could use the \"On Change\" setting available in the logic tab. For example, let's say you have text field capturing a name and you want to display a hello message to that user in a text area, you could use the steps below:

Open the settings for the component that will update the text area (not the text areas settings), in this case this is the name field.
Within the logic tab locate open the \"On Change\" setting and add the following JavaScript to update the value of the text area. Note you will need to adapt the code below for your specific form/scenario.

JavaScript

Copy

instance.root.getComponent('message').setValue(`Hi ${data.name} 👋, how are you today?`)

Here is an example of the output:

Tom

Hey Erin, Dont think I can achieve what I'm after as that deletes the Default or any Data added into the Text Component when changes are made

Tom

Don't worry, Figured it out with a Custom Button Function

Plain Text

Copy

const clientNameKey = 'clientName';\nconst projectKey = 'project'; \nconst quillComponentKey = 'Annex';\n\nconst clientName = data[clientNameKey] || '';\nconst project = data[projectKey] || '';\n\nconst quillComponent = instance.root.getComponent(quillComponentKey);\n\nif (quillComponent) {\n    let currentContent = quillComponent.getValue();\n    currentContent = currentContent.replace(/{{clientName}}/g, clientName);\n    currentContent = currentContent.replace(/{{project}}/g, project);\n    quillComponent.setValue(currentContent);\n  }

Editable Content Component