Editor Component

Last updated: 1 month ago

Category: Form

The Editor rich text editor component supports HTML editing (unlike textarea which only handles plain text) and provides multiple shortcut operations.

Basic Usage

Use the oc-editor node to create a rich text editor component instance.

Initial Content

Simply place the content inside the node.

For plain text content, you can also set it in the value attribute. Changes to the value attribute will not reinitialize the instance.

For plain text content, you can also use the content attribute, but changes to the content attribute will reinitialize the instance. For asynchronous content loading, the content attribute must be used.

Attributes

This component encapsulates the built-in instance, and its attributes are consistent with the parameters of the built-in instance. You can click here to view all parameters.

Several important notes:

1. All component attributes should be lowercase.
2. Attribute values must be in string format.
3. If an attribute value is an object, the surrounding { and } symbols can be omitted.
4. For attribute names that are verb-object structures or composed of two words, use hyphens to separate them. For example:
   • Module parameter contType (if exists) should be written as cont-type in component attributes
   • Parameter b4Init should be written as b4-init in attributes
5. All methods, events, and variables can be accessed through the built-in instance (typically via this.ins).
6. When data cannot be passed through component attributes (e.g., due to nested single/double quote issues), you can manipulate the built-in instance to achieve your goal. It's particularly recommended to implement event listeners through the built-in instance.

Common Methods

Common component methods:

• set: Set properties (takes key-value pairs or array)
• reset: Reset properties (no params)
• clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

• connected: Component connected (no params)
• disconnected: Component disconnected (no params)
• adopted: Component moved (no params)
• set: Property set (receives value)
• cleared: Property cleared (no params)
• reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})