@spatie/blender-content-blocks

Blender Media

Content blocks component for Blender, our CMS.

Installation

The blender-content-blocks can be installed from npm.

yarn add @spatie/blender-content-blocks

blender-content-blocks also requires you to install vue@'^2.0.0', lodash@'^4.0.0', and spatie-dom@'^1.0.0':

yarn add vue@'^2.0.0' lodash@'^4.0.0' spatie-dom@'^1.0.0'

Usage

The canonical way to use blender-content-blocks, is to mount it on a selector. The mount function will replace every element that matches a given selector with a blender-content-blocks component. The element should contain props just like you'd pass them with Vue.

import { mount } from '@spatie/blender-content-blocks';

export default function init() {
    mount('content-blocks');
}

<content-blocks
    collection="default"
    editor="default"
    create-url="/create"
    :model="{ name: 'MyModel', id: 1 }"
    :input="[]"
    :data="{
        locales: ['nl', 'en'],
        contentLocale: 'nl',
        mediaModel: 'App\Models\ContentBlock',
        mediaUploadUrl: '/upload'
    }"
    :debug="false"
></content-blocks>

Custom Fields

Custom fields can be defined by passing types, translatableAttributes or mediaLibraryCollections to data. Here are the default values as a quick reference:

{
    types: {
        imageLeft: 'Afbeelding links',
        imageRight: 'Afbeelding rechts',
    },
    translatableAttributes: {
        name: 'text',
        text: 'redactor',
    },
    mediaLibraryCollections: {
        image: 'image',
    },
}

Contributing

Since this is an internal project, we don't accept pull requests at this time.

License

The MIT License (MIT). Please see License File for more information.

Example images provided by Unsplash.