# new RichTextField()
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 2 following methods:
Create the Web Component and call its init method:
const myRichTextField = document.createElement("a-richtextfield").init(config)
Or use the shorthand for it:
const myRichTextField = createRichTextField({
label: "My rich text field",
width: 600,
labelPosition: "top"
})
myRichTextField.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "richTextField",
label: "My rich text field",
width: 600,
labelPosition: "top"
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config.value |
string
|
<optional> |
Default value |
config.label |
string
|
<optional> |
|
config.readOnly |
boolean
|
<optional> |
|
config.disabled |
boolean
|
<optional> |
|
config.required |
boolean
|
<optional> |
|
config.labelWidth |
string
|
number
|
<optional> |
|
config.fieldWidth |
string
|
number
|
<optional> |
|
config.fieldPadding |
string
|
<optional> |
|
config.labelPosition |
string
|
<optional> |
left | right | top | bottom |
config.labelAlign |
string
|
<optional> |
left | right |
config.labelFontSize |
string
|
<optional> |
Any valid CSS value |
config.labelFontWeight |
string
|
<optional> |
Any valid CSS value |
config.labelColor |
string
|
<optional> |
Any valid CSS value |
config.boxShadow |
number
|
<optional> |
|
config.width |
integer
|
<optional> |
Width in pixels |
config.height |
integer
|
<optional> |
Height in pixels |
config.useCDN |
boolean
|
<optional> |
Set to true to use the CDN version of Quill. Default is true. |
config.theme |
string
|
<optional> |
Use "snow" for a docked toolbar, and "bubble" for a floating toolbar. Default is "bubble". |
config.toolbar1 |
Array.<object>
|
<optional> |
Toolbar 1. Default is ["clean", { "header": 1 }, { "header": 2 }, { "header": 3 }, { "header": 4 }] |
config.toolbar2 |
Array.<object>
|
<optional> |
Toolbar 2. Default is ["bold", "italic", "underline", {color: []}] |
config.toolbar3 |
Array.<object>
|
<optional> |
Toolbar 3. Default is [{ "list": "ordered"}, { "list": "bullet" }, { "list": "check" }] |
config.toolbar4 |
Array.<object>
|
<optional> |
Toolbar 4. Default is ["blockquote", "code-block"] |
config.imageWithCaption |
boolean
|
<optional> |
If true, the editor will allow to insert images with a caption. |
this
Generated markup
<a-richtextfield class="a-richtextfield">
<label class="field-label"></label>
<div class="field-richtext">
<!-- Quill editor is here !-->
</div>
</a-richtextfield>
Methods
# _initSelectionObserver()
Keep track of the current selection index
# _insertImageFromURL(configopt)
Show the dialog to insert an image and a caption from a URL
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
<optional> |
Configuration object |
mode |
string
|
<optional> |
"create" to insert a new image, "update" to update an existing image |
figure |
HTMLElement
|
<optional> |
The figure element to update (if mode is "update") |
img |
HTMLElement
|
<optional> |
The img element to update (if mode is "update") |
src |
string
|
<optional> |
The image URL (if mode is "create" or "update") |
alt |
string
|
<optional> |
The alternative text for the image (if mode is "create" or "update") |
figcaption |
string
|
<optional> |
The figcaption element to update (if mode is "update") |
caption |
string
|
<optional> |
The caption text for the image (if mode is "create" or "update") |
Example
// Insert a new image with caption
myRichTextField._insertImageFromURL({
mode: "create",
src: "https://example.com/image.jpg",
alt: "Example Image",
caption: "This is an example image"
})# addImageWithCaption(config)
Insert an image with a caption into the editor
Parameters:
| Name | Type | Description |
|---|---|---|
config |
object
|
|
src |
string
|
URL of the image |
alt |
string
|
|
caption |
string
|
# setFieldWidth(width)
Set the color selector field width
Parameters:
| Name | Type | Description |
|---|---|---|
width |
*
|
this
# setLabelPosition(position)
Set label position
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string
|
"left" (default) | "right" | "top" | "bottom" |
this
# async setValue(newValue, fromBlurEventopt)
Set the code
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
newValue |
string
|
||
fromBlurEvent |
boolean
|
<optional> |
If true, the update is only performed on binded record, not locally |
this
# validate() → {boolean}
Validate the field value and apply UI style accordingly
true is the field is valid, false otherwise
boolean