x
1
<div data-react-class="Editor" data-react-props="{"mode":"json","name":"code_editor","storedValue":"{\"test\":\"test\"}","readOnly":false,"className":"json-editor"}" data-react-cache-id="Editor-0" style="width:100%"></div>Code Editor
The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.
Related components
| Used Components | Components where is Used |
|---|---|
| Ace Editor |
Usage rules
- ✅ Do
- Use in environments where users need to write or modify code directly
- ❌ Don't
- Don’t use if users only need basic text input or settings fields
1
2
3
4
5
6
7
8
9
10
11
<% code = { test: 'test' }%><%= render LooposUi::CodeEditor.new( type: "json", code: code, readonly: params[:read_only] || false)%>No notes provided.
No params configured.
Code Editor
The Code Editor component is a specialized text editor for code within a user interface. It’s commonly used in development environments, configuration panels, or any interface where users need to edit code, scripts, or configuration files directly.
Arguments
| Property | Default | Description |
|---|---|---|
type |
`` | Language for editor [:ruby, :json] |
code |
`` | Value that goes inside the editor |
readonly |
true |
Enables or disables edition |
extra_options |
`` | Extra props to use on Ace Editor component. Oficial docs: https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md |