Home›Docs›Form›Editor Library

Editor Library

Last updated: 4 months ago

Category: Form

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

Editor Component: Additional Data Sources, Events, and Methods Demo Examples4 months ago Editor Component4 months ago Editor Library: Additional Data Sources, Events, and Methods Demo Examples4 months ago Editor Library4 months ago

Preface

Currently, there are many open-source rich text editors available, with numerous powerful options among them. Therefore, this editor module is not intended to replace those robust third-party editors, but rather to serve the specific needs within this framework. Its primary purpose is to enable basic innerHTML text editing (as opposed to innerText plain text editing in textarea controls), facilitating real-time preview of HTML text output effects.

Basic Usage

Apply the oc-editor attribute to either a div or textarea element to create a rich text editor instance.

Output
HTML

```
                
                
            
```

Using new+id is also permissible.

Output
HTML
JS

```
                
                
            
```

                
                new orca.Editor('#demo0001');

Initial Content

Set initial content via the content parameter, which follows the same syntax as the content parameter in the getContent function. Multiple writing formats are supported.

Output
HTML
JS

```
                
                
            
```

                
                new orca.Editor('#demo0002',{
                    content:'Initial text content'
                });

Inline Content

Instead of using the content parameter, you can directly place the text content within the tag (this also works with textarea tags).

Output
HTML
JS

Initial content
```
                
                
            
```

                
                new orca.Editor('#demo0012');

Basic Configuration

Property	Type	Default	Description
name	string	''	name attribute of hidden field
value	string	''	Initial plain text content
disabled	boolean	false	Whether to disable the editor
readonly	boolean	false	Whether to enable read-only mode
deferred	boolean	false	Whether to defer rendering child nodes
delay	number	200	Debounce time for edit events (ms)
classes	string	''	Additional CSS classes for the editor

Data Source Configuration

Property	Type	Default	Description
content	string/array	''	Editor data source
contType	'text'/'async'/'html'/'auto'	'text'	Content type
contData	object	{}	Request data parameters
ajax	object	{}	Asynchronous request configuration

Appearance Configuration

Property	Type	Default	Description
appear.rounded	boolean	true	Whether to show rounded corners
appear.bordered	boolean	true	Whether to show borders
mode	'source'/'editor'	'editor'	Display mode
minHeight	string	''	Minimum height
maxHeight	string	''	Maximum height
feature	'simple'/'comm'/'flat'/'group'/'full'	'simple'	Feature combination type

Property	Type	Default	Description
header.enable	boolean	true	Whether to enable header button group
header.children	array	[]	Button layout configuration
footer.enable	boolean	true	Whether to enable footer information bar

Wait Functions

Property	Type	Default	Description
b4Paste	function	null	Pre-paste wait function

Callback Functions

Property	Type	Default	Description
onEdited	function	null	Post-edit callback
onDisabled	function	null	Post-disable callback
onEnabled	function	null	Post-enable callback
onReadonly	function	null	Post-readonly setting callback
onFilled	function	null	Post-content fill callback
onSet	function	null	Post-value set callback
onCleared	function	null	Post-value clear callback
onUpdatedCont	function	null	Post-content update callback
onRequest	function	null	Async request completion callback
onOutput	function	null	Post-value output callback