README

改善编辑页面的方式。

安装

composer require bozboz/laravel-backpack-visualcomposer

确保在您的composer.json中添加以下内容

    "repositories": [
        {
            "type": "composer",
            "url": "http://laravel-packages.staging.bozboz.co.uk"
        }
    ]

然后将以下内容添加到 config/app.php

Bozboz\LaravelBackpackVisualcomposer\VisualComposerServiceProvider::class,

最后，运行

php artisan migrate

使用

在模型中

use \Bozboz\LaravelBackpackVisualcomposer\Traits\VisualComposer;

在CRUD控制器中

public function setup($template_name = false)
{
    parent::setup($template_name);

    $this->crud->addField([
        'name' => 'visualcomposer_main',
        'label' => 'Visual Composer',
        'type' => 'view',
        'view'   => 'visualcomposer::visualcomposer',
        // (optionnal) Only those template will be available
        'templates' => [
            MyNewRowTemplate::class,
        ],
        // (optionnal) Pre-fill the visualcomposer with rows on new models
        'default' => [
            ['template' => MyNewRowTemplate::class],
        ],
        'wrapperAttributes' => [
            'class' => 'form-group col-md-12',
        ],
    ]);
}

public function store(PageRequest $request)
{
    $r = parent::store($request);
    $this->crud->entry->visualcomposer_main = $request->visualcomposer_main;
    return $r;
}

public function update(PageRequest $request)
{
    $r = parent::update($request);
    $this->crud->entry->visualcomposer_main = $request->visualcomposer_main;
    return $r;
}

在模型视图中

@foreach($page->visualcomposer_main as $row)
    {!! $row->template::renderFront($row) !!}
@endforeach

编辑默认配置和模板

运行

php artisan vendor:publish --provider="Bozboz\LaravelBackpackVisualcomposer\VisualComposerServiceProvider"

...它将输出可以覆盖的文件列表，包括配置、背包字段类型、语言文件和11个内置模板

• 文章，一个wysiwyg和标题、副标题、日期、作者、CTA按钮以及用户可自定义颜色的输入
• 背景图片和文字，一个带有标题和wysiwyg描述的可上传图片
• Base64中的图片，将图片存储为base64而不是文件上传
• 容器中的图片，一个可上传的图片，仅此而已
• 左图右文，两列中的一张图片和一些文本字段
• 左文右图，两列中的一些文本字段和一张图片
• 左文右引言，两列中的一些文本字段和可自定义的背景颜色
• 最小化，一个空的模板，具有使其工作的最小代码
• 幻灯片，无限图片和它们的标题的滑块
• 三列图片文本CTA，每个都包含一张图片、一个标题、一个wysiwyg和一个CTA按钮的三列
• 两列图片文本CTA，与上述相同，但改为两列而不是三列

查看它们的制作方法，以便您可以自定义它们并构建自己的。

创建新模板的步骤

• 为您的模板创建一个类。这需要扩展 Bozboz\LaravelBackpackVisualcomposer\Templates\RowTemplateAbstract

例如。

<?php

namespace App\Templates;

use Bozboz\LaravelBackpackVisualcomposer\Templates\RowTemplateAbstract;

class MyNewRowTemplate extends RowTemplateAbstract
{
    public static $name = 'my-new-row-template';
}

• 将模板类名添加到 project/config/visualcomposer.php 模板数组中

    // Installed and available templates to show in crud
    'templates' => [
        ...
        \App\Templates\MyNewRowTemplate::class,
        ...
    ],

• 在 project/resources/views/vendor/visualcomposer/templates 中，为每个模板都有一个文件夹。创建一个带有类名的文件夹，例如MyNewRowTemplate。该文件夹需要一个crud.blade.php（用于管理员）和一个front.blade.php（用于前端）。参见其他模板的示例。

例如，在 crud.blade.php

<div class="row-template vc-my-new-row-template">
    <input type="hidden" class="content">
    <textarea class="some_field"
              placeholder="{{ trans('visualcomposer::my-new-row-template.crud.some_field') }}"></textarea>
</div>

@push('crud_fields_scripts')
    <script>
        window['vc_boot', {!!json_encode($template)!!}] = function ($row, content)
        {
            var $hiddenInput = $(".content[type=hidden]", $row);
            var fields = [
                'some_field',
            ];

            // Setup update routine
            var update = function () {
                var contents = [];
                fields.map(function (item) {
                    contents.push($('.'+item, $row).val());
                });
                $hiddenInput.val(
                    JSON.stringify(contents)
                );
            };

            // Parse and fill fields from json passed in params
            fields.map(function (item, index) {
                try {
                    $('.'+item, $row).val(JSON.parse(content)[index]);
                } catch(e) {
                    console.log('Empty or invalid json:', content);
                }
            });

            // Update hidden field on change
            $row.on(
                'change blur keyup',
                'input, textarea, select',
                update
            );

            // Initialize hidden form input in case we submit with no change
            update();
        }
    </script>
@endpush

• 在 project/resources/lang/vendor/visualcomposer/en/templates.php 中添加一个数组元素，它定义了模板将在管理员下拉列表中显示的内容，以及crud.blade.php中的术语，例如。

<?php
...
    'my-new-row-template' => [
        'name' => 'My new row template',
        'crud' => [
            'some_field' => 'Some field for you to write something in',
        ],
    ],