Editor Component: Additional Data Sources, Events, and Methods Demo Examples
Category: ExamplesThe Editor rich text editor component supports HTML editing (unlike textarea which only handles plain text) and provides multiple shortcut operations.
Asynchronous Content
The content attribute can accept an asynchronous URL.
Deferred Content Loading
If the content to be loaded during initialization is large, you can set the deferred attribute to prevent content loading during initialization. The content will only load when the mask element is clicked.
Source Mode
By default, initialization displays in HTML editor mode. To initialize in source mode, set the attribute mode='source'. You can switch back to HTML editor by clicking the "Source/Editor" button.
Disabled State
There are two ways to set disabled state:
Borders
To integrate this editor with other components, you may need to set border styles that match other sections. The appear attribute can modify border styles with the following properties:
Getting Values
Like input and textarea elements, the editor component has name, value, disabled, and readOnly properties that can be accessed directly through the component node.
Event Listening
Supports using addEventListener to subscribe to input, change, focus and blur events. The on+event syntax is also supported.
Since passing parameters with addEventListener is cumbersome, an additional set of listener events is provided.
Operation Methods
Built-in common methods include reset(), clear(), and set(data), along with input-specific blur and focus methods. Based on these methods, the component provides corresponding listener events.
Using Validation
Form field validation is an independent operation method.
Using Cache
When modifying element properties or values, if you need to cache data to restore previous properties and values when reloading the page, use the stor-name attribute. However, ensure this attribute value is unique in the browser cache.
