快速开始

安装

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

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

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

使用

安装后，在你的 App 中使用 YiiEditor。

<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>

完整的示例请参考: Demo

更多

若想了解更多信息，可查看相关文档:

• YiiEditor API
• Editor instance