Now.js Framework Documentation
CodeElementFactory
CodeElementFactory
Overview
CodeElementFactory is the form-field side of CodeEditor: <textarea data-element="code"> becomes a
code editor that still behaves like any other field. It submits with the form, takes required and data-validate,
shows FormError messages, and fills from data-attr="value:..." and instance.value.
<form data-form="settings">
<label for="config">Config</label>
<textarea id="config" name="config" data-element="code" data-language="json" data-max-height="400" required></textarea>
</form>Created from script:
const field = ElementManager.create('code', {id: 'snippet', name: 'snippet', language: 'php', minLines: 10});
form.appendChild(field.element.closest('.code-editor'));Attributes
| Attribute | Default | Description |
|---|---|---|
data-language |
text |
javascript, json, html, css, php, sql, text and their aliases |
data-line-numbers |
true |
false hides the line numbers |
data-tab-size |
2 |
Columns per indent level |
data-indent-with-tabs |
false |
Indent with tab characters |
data-auto-close-brackets |
true |
false stops typing closing brackets and quotes |
data-auto-indent |
true |
false gives a plain Enter |
data-min-lines |
5 |
Minimum visible lines |
data-height |
— | Fixed height (px or CSS length), scrolls inside |
data-max-height |
— | Grow with the content up to this height |
data-theme |
— | light or dark; by default it follows the page |
The same names (camelCase) work as options of ElementManager.create('code', {...}).
Instance
| Member | Description |
|---|---|
instance.editor |
The CodeEditor |
instance.value |
Read or set the code; setting it recolours |
instance.language |
Read or change the language |
The field's validation, required, isValid(), reset() and FormError work as for other fields. An invalid field
gets a red border on the whole editor.
Methods
static create(def)
Build a code field from a field definition; it always renders a <textarea>.
static extractCustomConfig(element, def, dataset)
Read the editor options from the data-* attributes; only options present are returned, so the defaults fill the rest.
static setupEventListeners(instance)
Attach the editor once the base factory has finished with the element, so the editor wraps the framework's own value
accessor and values set by FormManager or instance.value are recoloured too.
Related Documentation
- CodeEditor - Options, keys, languages and styling
- ElementManager - Form element types