Component

In this section, we systematically introduce the fundamental usage of the editor component and provide detailed explanations of event triggering mechanisms. By mastering the content in this section, you will learn how to properly initialize the editor, interact with it, and respond to key operation events, laying a solid foundation for subsequent deep customization.

Fundamental Usage

View the full example

<template>
  <Editor :config="config"></Editor>
</template>

<script setup lang="ts">
import '@ssml-editor/editor-vue/styles/highlight/github-dark-dimmed.css';
import '@ssml-editor/editor-vue/styles/style.css';
import { StorageType } from '@ssml-editor/core';
import {
  CodeMenu,
  CopyMenu,
  ExportMenu,
  SaveMenu,
  SubmitMenu,
  type SubmitProps
} from '@ssml-editor/editor-vue';
import {
  Editor, RowContainerAlign, type BaseEditor,
  type EditorConfig
} from '@ssml-editor/vue';

const config = <EditorConfig>{
  placeholder: 'Please enter content...',
  animation: { grayscale: true, zoom: true },
  html: {
    storageType: StorageType.LOCAL,
  },
  toolbar: {
    menus: [
      {
        component: SaveMenu,
      },
      {
        component: ExportMenu,
      },
      {
        component: CopyMenu,
      },
      {
        component: CodeMenu,
      },
    ],
    align: RowContainerAlign.CENTER,
  },
  footer: {
    menus: [
      {
        component: SubmitMenu,
        props: <SubmitProps>{
          onClick: (
            code: string,
            editor?: BaseEditor,
            config?: EditorConfig,
          ) => {
            console.log('onClick', code, editor, config);
          },
        },
      },
    ],
    align: RowContainerAlign.END,
    style: {
      marginTop: 'calc(var(--spacing, .25rem) * 2)',
    },
  },
};
</script>

Event Handling

View the full example

<template>
  <Editor @created="createdHandler" @change="changeHandler" @selection-change="selectionChangeHandler"
    @value-change="valueChangeHandler" @destroyed="destroyedHandler" @focus="focusHandler" @blur="blurHandler"
    @max-length="maxLengthHandler" @warning="warningHandler" @error="errorHandler"></Editor>
</template>

<script setup lang="ts">
import type { Warning } from '@ssml-editor/base';
import { type BaseEditor, Editor } from '@ssml-editor/vue';
import type { Operation } from 'slate-vue3/core';

function createdHandler(
  editor: BaseEditor,
  htmlElement: HTMLDivElement | null,
) {
  console.log('createdHandler', editor, htmlElement);
}

function changeHandler(
  editor: BaseEditor,
  htmlElement: HTMLDivElement | null,
  options?: { operation?: Operation },
) {
  console.log('changeHandler', editor, htmlElement, options);
}

function selectionChangeHandler(
  editor: BaseEditor,
  htmlElement: HTMLDivElement | null,
  options?: { operation?: Operation },
) {
  console.log('selectionChangeHandler', editor, htmlElement, options);
}

function valueChangeHandler(
  editor: BaseEditor,
  htmlElement: HTMLDivElement | null,
  options?: { operation?: Operation },
) {
  console.log('valueChangeHandler', editor, htmlElement, options);
}

function destroyedHandler(
  editor: BaseEditor,
  htmlElement: HTMLDivElement | null,
) {
  console.log('destroyedHandler', editor, htmlElement);
}

function focusHandler(editor: BaseEditor, htmlElement: HTMLDivElement | null) {
  console.log('focusHandler', editor, htmlElement);
}

function blurHandler(editor: BaseEditor, htmlElement: HTMLDivElement | null) {
  console.log('blurHandler', editor, htmlElement);
}

function maxLengthHandler(
  editor: BaseEditor,
  htmlElement: HTMLDivElement | null,
) {
  console.log('maxLengthHandler', editor, htmlElement);
}

function warningHandler(warning: Warning) {
  console.log('warningHandler', warning.message);
}

function errorHandler(error: Error) {
  console.log('errorHandler', error.message);
}
</script>

Editor Api

Editor Attributes

Property	Description	Type	Default
config	Editor configuration details. For detailed configuration options, see the Configuration section.	EditorConfig	-

Editor Events

Event	Description	Type
created	Triggered when the editor is successfully created and mounted.	Function
change	Triggered after any editor modification occurs. (Includes both selection and content changes)	Function
selectionChange	Triggered when the editor selection changes.	Function
valueChange	Triggered after the editor content changes.	Function
destroyed	Triggered when the editor is unmounted and destroyed.	Function
focus	Triggered when the editor gains focus.	Function
blur	Triggered when the editor loses focus.	Function
maxLength	Triggered when the input text length reaches the configured maximum value. (Depends on config.maxLength in configuration)	Function
error	Triggered when the editor throws an exception.	Function
warning	Triggered when the editor throws a warning.	Function