Editor field

The editor field contains a rich text editor that stores text content in HTML format.

Examples

Here's an example of using the editor field in a block:

# blocks/Product.vue

<template>
  <PruviousHTML :html="description" />
</template>

<script lang="ts" setup>
import { editorField } from '#pruvious'

defineProps({
  description: editorField({
    label: 'Product description',
    placeholder: 'Enter a description',
    blockFormats: [{ className: 'p-6 border rounded', label: 'Boxed', tags: ['div'] }],
    inlineFormats: [{ className: 'text-red-500', label: 'Red' }],
    toolbar: ['bold', 'italic', 'heading2', 'heading3', 'paragraph', 'link', 'blockFormats', 'inlineFormats', 'clear'],
    required: true,
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    description: {
      type: 'editor',
      options: {
        label: 'Product description',
        placeholder: 'Enter a description',
        blockFormats: [{ className: 'p-6 border rounded', label: 'Boxed', tags: ['div'] }],
        inlineFormats: [{ className: 'text-red-500', label: 'Red' }],
        toolbar: [
          'bold',
          'italic',
          'heading2',
          'heading3',
          'paragraph',
          'link',
          'blockFormats',
          'inlineFormats',
          'clear',
        ],
        required: true,
      },
    },
    // ...
  },
})

Options

You can specify the following options in the editor field: