Skip to content

VUnlayerEditor

This is a Vue component for the Unlayer-Editor. The component is based on john-it-com/vue-unlayer-editor which is a fork of unlayer/vue-email-editor. JOHN IT maintains an NPM package named @john-it.com/vue-unlayer-editor.

In addition to the original package we can set display-mode manually and use setBodyValues method.

Example

For rendering the VUnlayerEditor component the following example code can be used:

    <x-base::form
    name="product-bundle.update"
    action="{{ route('events.product-bundles.design.update', ['event' => $event->id]) }}"
    method="PUT"
    novalidate=""
>
    <div class="row">
        <div class="col">
            <v-unlayer-editor
                :name="'myname'"
                :min-height="'1000px'"
                :design="{{ $design }}"
                :merge-tags="{{ $mergeTags }}"
                :merge-tags-data="{{ $mergeTagsData }}"
                :upload-api-url="'{{ route('my-tenant.unlayer-upload') }}'"
            ></v-unlayer-editor>
        </div>
    </div>
</x-base::form>

Attributes

name

The name used when sending POST data.The Design will be available in $_POST['myname']['design']. The rendered HTML will be available in $_POST['myname']['html'].

min-height

design

Prefill the editor with a saved design. This can be a template or a previously saved design which you want to edit.

merge-tags

This attributes defines the available template variables. See Unlayer docs for details.

Example: 

json_encode([
    'product_bundle_title' => [
        'name' => 'Titel',
        'value' => '{{product_bundle_title}}',
        'sample' => "Offenes Lauftraining"
    ],
    'product_bundle_teaser_image' => [
        'name' => 'Teaserbild',
        'value' => '{{product_bundle_teaser_image}}',
        'sample' => "https://www.intersana.de/cms_media/module_img/3/1905_1_teaserImg_AdobeStock_83816572.jpeg"
    ],
    'appointments' => [
        'name' => 'Veranstaltungstermine',
        'rules' => [
            'repeat' => [
                'name' => 'Wiederhole für jeden Veranstaltungsterm',
                'before' => '{{#appointments}}',
                'after' => '{{/appointments}}',
            ]
        ],
        'mergeTags' => [
            'appointment_title' => [
                'name' => "Titel",
                'value' => "{{appointment_title}}",
            ],
            'appointment_period' => [
                'name' => "Zeitraum",
                'value' => "{{appointment_period}}",
            ],
        ]
    ],
]);

merge-tags-data

This attributes defines the data for the template variables. See Unlayer docs for details.

Example: 

json_encode([
    'product_bundle_title' => "Dies ist ein Titel",
    'product_bundle_teaser_image' => "https://www.intersana.de/cms_media/module_img/3/1905_1_teaserImg_AdobeStock_83816572.jpeg",
    'appointments' => [
        [
            'appointment_title' => "1. Termin",
            'appointment_period' => $appointment[0]->getFormattedPeriodAttribute(),
        ],
        [
            'appointment_title' => "2. Termin",
            'appointment_period' => $appointment[1]->getFormattedPeriodAttribute(),
        ],
        [
            'appointment_title' => "3. Termin",
            'appointment_period' => $appointment[2]->getFormattedPeriodAttribute(),
        ]
    ]
]);

upload-api-url

The URL where the editor can upload images.

:design

:display-mode

:project-id

:locale