README

这是一个将 GrapesJS 编辑器 集成到 laravel-admin 的 laravel-admin 扩展。

DEMO 使用 admin/admin 登录

安装

composer require xn/grapesjs-editor
php artisan vendor:publish --tag=laravel-admin-grapesjs-editor

更新

composer require xn/grapesjs-editor
php artisan vendor:publish --tag=laravel-admin-grapesjs-editor --force

配置

当内容中需要禁用 Controller edit 方法中的 Pjax 时

/**
    * Edit interface.
    *
    * @param mixed   $id
    * @param Content $content
    *
    * @return Content
    */
public function edit($id, Content $content)
{
    Admin::disablePjax();
    return parent::edit($id, $content);
}

在 config/admin.php 文件的 extensions 部分添加属于此扩展的一些配置。

'extensions' => [
    'grapesjs-editor' => [
        // set to false if you want to disable this extension
        'enable' => true,
        'config' => [
            'styles' => [
                "//cdn.jsdelivr.net.cn/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
            ],
            'scripts' => [
                "//code.jqueryjs.cn/jquery-3.6.4.min.js",
                "//cdn.jsdelivr.net.cn/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            ]
        ],
        'plugins' => [
            'styles' => [
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/css/grapesjs-preset-webpage.min.css',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/css/tooltip.css',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/css/grapesjs-component-code-editor.min.css',
            ],
            'scripts' => [
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-preset-webpage.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/gjs-blocks-basic.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-plugin-forms.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-component-countdown.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-plugin-export.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-tabs.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-custom-code.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-touch.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-parser-postcss.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-tooltip.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-tui-image-editor.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-typed.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-style-bg.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-component-code-editor.js',
                '//cdn.ckeditor.com/4.20.1/full-all/ckeditor.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-plugin-ckeditor.min.js',
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/grapesjs-rulers.min.js',
                //
                'vendor/laravel-admin-ext/grapesjs-editor/grapesjs/plugins/plugins-opts.js',
            ]
        ],
    ]
]

更多配置信息请参考 GrapesJS 编辑器。

使用方法

在表单中使用它

$form->grapesjs('content')->options(['height' => 500])->setWidth(12, 0);

更多资源

出色的 Laravel-admin

许可证

许可协议：MIT 许可证，详情请见 LICENSE 文件。