PxDoc Editor Vue

Vue integration for the PxDoc editor.

Installation

npm install @px-doc/editor-vue

Usage

As a Vue Plugin

import { createApp } from 'vue';
import PxEditor from '@px-doc/editor-vue';

const app = createApp(App);
app.use(PxEditor);

Direct Component Import

<template>
  <div>
    <PxEditor 
      v-model="content" 
      :editable="true"
      :autofocus="true"
    />
    <div v-html="content"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { PxEditor } from '@px-doc/editor-vue';

const content = ref('<p>Hello world!</p>');
</script>

With Custom Extensions

<template>
  <PxEditor 
    v-model="content" 
    :extensions="extensions"
  />
</template>

<script setup>
import { ref, shallowRef } from 'vue';
import { PxEditor } from '@px-doc/editor-vue';
import Bold from '@tiptap/extension-bold';
import Italic from '@tiptap/extension-italic';

const content = ref('<p>Hello world!</p>');
const extensions = shallowRef([Bold, Italic]);
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | modelValue | string | '' | Initial content (supports v-model) | | editable | boolean | true | Whether the editor is editable | | autofocus | boolean | false | Whether to autofocus the editor | | extensions | array | [] | Custom extensions to add |

Events

| Event | Parameters | Description | |-------|------------|-------------| | update:modelValue | content: string | Emitted when content changes |

Browser Support

The Vue package works in all modern browsers that support ES2018+ and Vue 3.

License

MIT