Morpheme

Appearance

Editor ​

The VEditor component is an integration of the CKEditor component with vee-validate for validation.

Usage ​

Basic Usage ​

To use the VEditor component, bind it to a value using the v-model directive:

INFO

The VEditor component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Label ​

You can add a label to the VEditor component by using the label prop:

Validation ​

To add validation to the VEditor component, you can use the useForm hook from vee-validate. Here's an example of how to set up validation and handle form submission:

Props ​

NameTypeDefault
modelValuestring''
valuestring''
namestring''
rulesstring''
labelstring''
labelClassstring''
wrapperClassstring''
errorbooleanboolean
errorClassstring''
errorMessagesstring[][]
readonlystring''
hintString''

Events ​

The VEditor component emits several Vue events that can be listened to and acted upon.

update:modelValue ​

This event is emitted when the modelValue prop of the VEditor component is updated. It passes the updated value as an argument.

vue
<script setup lang="ts">
import {ref} from 'vue';

const value = ref('');

function onModelValueUpdate(value: string) {
  // do something with the updated value
}
</script>

<template>
  <VEditor v-model="value" @update:modelValue="onModelValueUpdate" />
</template>
<script setup lang="ts">
import {ref} from 'vue';

const value = ref('');

function onModelValueUpdate(value: string) {
  // do something with the updated value
}
</script>

<template>
  <VEditor v-model="value" @update:modelValue="onModelValueUpdate" />
</template>

change ​

This event is emitted when the value of the VEditor component is changed. It passes the updated value as an argument.

vue
<script setup lang="ts">
import {ref} from 'vue';

const value = ref('');

function onChange(value: string) {
  // do something with the updated value
}
</script>

<template>
  <VEditor v-model="value" @change="onChange" />
</template>
<script setup lang="ts">
import {ref} from 'vue';

const value = ref('');

function onChange(value: string) {
  // do something with the updated value
}
</script>

<template>
  <VEditor v-model="value" @change="onChange" />
</template>

blur ​

This event is emitted when the VEditor component loses focus. It passes the event object as an argument.

vue
<script setup lang="ts">
import {ref} from 'vue';

const value = ref('');

function onBlur(event: any) {
  // do something with the event object
}
</script>

<template>
  <VEditor v-model="value" @blur="onBlur" />
</template>
<script setup lang="ts">
import {ref} from 'vue';

const value = ref('');

function onBlur(event: any) {
  // do something with the event object
}
</script>

<template>
  <VEditor v-model="value" @blur="onBlur" />
</template>

Slots ​

None

CSS Variables ​

scss
:root {
  --v-editor-height: 300px;

  /* label */
  --v-editor-label-font-size: var(
    --input-label-font-size,
    var(--size-font-sm)
  );
  --v-editor-label-font-weight: var(--font-weight-regular);
  --v-editor-label-display: var(--v-input-label-display, block);
  --v-editor-label-margin-bottom: var(--size-spacing-2);

  // hint
  --v-select-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-select-hint-color: var(--v-input-hint-color);
  --v-select-hint-margin-top: var(--v-input-hint-margin-top);
}
:root {
  --v-editor-height: 300px;

  /* label */
  --v-editor-label-font-size: var(
    --input-label-font-size,
    var(--size-font-sm)
  );
  --v-editor-label-font-weight: var(--font-weight-regular);
  --v-editor-label-display: var(--v-input-label-display, block);
  --v-editor-label-margin-bottom: var(--size-spacing-2);

  // hint
  --v-select-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-select-hint-color: var(--v-input-hint-color);
  --v-select-hint-margin-top: var(--v-input-hint-margin-top);
}

Standalone Installation ​

You can also install the Editor component individually via @morpheme/editor package:

bash
yarn install @morpheme/editor
yarn install @morpheme/editor
vue
<script setup lang="ts">
import VEditor from '@morpheme/editor';
</script>

<template>
  <VEditor />
</template>
<script setup lang="ts">
import VEditor from '@morpheme/editor';
</script>

<template>
  <VEditor />
</template>

Storybook ​

View Storybook documentation here.