Class

RichTextField

kiss.ux.RichTextField()

The Rich Text Field derives from Component. It's a simple componant to edit rich text content:

  • headers (h1, h2, h3)
  • bold, italic, underline
  • color
  • lists (ordered, bullet, check)
  • blockquote
  • code block
  • clear formatting

Encapsulates original Quill inside a KissJS UI component: https://quilljs.com

Current version of local Quill: 2.0.2

Constructor

# 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.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.

View Source client/ux/richTextField/richTextField.js, line 44

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

# blur()

Unset the focus of the input field

View Source client/ux/richTextField/richTextField.js, line 386

this

# focus()

Give focus to the input field

View Source client/ux/richTextField/richTextField.js, line 376

this

# getLabel() → {string}

Get the field label

View Source client/ux/richTextField/richTextField.js, line 453

string

# getLabelPosition() → {string}

Get the label position

View Source client/ux/richTextField/richTextField.js, line 498

"left" | "right" | "top"

string

# getValue() → {string}

Get the field value, which is the HTML content

View Source client/ux/richTextField/richTextField.js, line 351

  • The field value
string

# isEmpty() → {boolean}

Check if the field is empty

View Source client/ux/richTextField/richTextField.js, line 428

boolean

# setFieldWidth(width)

Set the color selector field width

Parameters:
Name Type Description
width *

View Source client/ux/richTextField/richTextField.js, line 475

this

# setInvalid()

Change the style when the field is invalid

View Source client/ux/richTextField/richTextField.js, line 415

this

# setLabel(newLabel)

Set the field label

Parameters:
Name Type Description
newLabel string

View Source client/ux/richTextField/richTextField.js, line 440

this

# setLabelPosition(position)

Set label position

Parameters:
Name Type Description
position string

"left" (default) | "right" | "top" | "bottom"

View Source client/ux/richTextField/richTextField.js, line 508

this

# setLabelWidth(width)

Set the label width

Parameters:
Name Type Description
width *

View Source client/ux/richTextField/richTextField.js, line 487

this

# setValid()

Remove the invalid style

View Source client/ux/richTextField/richTextField.js, line 404

this

# 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

View Source client/ux/richTextField/richTextField.js, line 326

this

# setWidth(width)

Set the field width

Parameters:
Name Type Description
width *

View Source client/ux/richTextField/richTextField.js, line 463

this

# validate() → {boolean}

Validate the field value and apply UI style accordingly

View Source client/ux/richTextField/richTextField.js, line 360

true is the field is valid, false otherwise

boolean