registerEditorItem

Registers a Vue component under a comp string, making it available to editor items as comp: "<type>". Use it to add controls the editor does not register by default, such as Combo, DatePicker, CodeMirror, TinyMCE, or a fully custom component.

Usage

registerEditorItem(
  type: string,
  handler: Component,
  config?: { readonly?: boolean }
): void;

Parameter	Type	Description
type	string	Name referenced by comp in an item config.
handler	Component	Vue component that renders the control.
config.readonly	boolean	When true, registers handler as the read-only variant of type.

Registration is global and keyed by string. Call it once at module load, not per render. The built-in text, textarea, checkbox, readonly, and section types are registered by the package.

Example

Register a custom control:

<script setup>
import { Editor, registerEditorItem } from "@svar-ui/vue-editor";
import PriorityCombo from "./PriorityCombo.vue";

registerEditorItem("priority", PriorityCombo);

const items = [
  { comp: "priority", key: "priority", label: "Priority", options: priorityOptions }
];
</script>

<template>
  <Editor :items="items" :values="values" />
</template>

Register a read-only variant alongside the editable one:

<script setup>
import { registerEditorItem, CodeMirror } from "@svar-ui/vue-editor";

registerEditorItem("code-mirror", CodeMirror);
registerEditorItem("code-mirror", CodeMirror, { readonly: true });
</script>

Related articles

• Input controls