Getting Started

Installation

# npm
npm -i @yiitap/vue @yiitap/vue-preset

# yarn
yarn add @yiitap/vue @yiitap/vue-preset

# pnpm
pnpm add @yiitap/vue @yiitap/vue-preset

Usage

After installing, import YiiEditor in your app.

<template>
  <YiiEditor ref="yiiEditor" v-bind="options" @update="onUpdate" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { 
  YiiEditor,
  OStarterKit,
} from '@yiitap/vue'
import '@yiitap/vue/dist/vue.css'

const yiiEditor = ref<InstanceType<typeof YiiEditor>>()

const options = computed(() => {
  return {
    content: '',
    showMainMenu: false,
    showBubbleMenu: true,
    sideMenu: {
      show: true,
      add: 'menu',
    },
    pageView: 'page',
    extensions: [
      OStarterKit.configure({
        UniqueID: true,
      }),
    ]
  }
})

function onUpdate({ editor }: { editor: Editor }) {
  console.log('json', editor.getJSON())
  console.log('html', editor.getHTML())
  console.log('markdown', editor.markdown?.serialize(editor.getJSON()))
}
</script>

For a complete example, please refer to: Demo

More

Check out the documentation for more information:

• YiiEditor API
• Editor instance