sky9s/laravel-tinymce-simple-imageupload

Laravel6 中TinyMCE的简单图片上传。

dev-master 2019-09-19 10:04 UTC

This package is auto-updated.

Last update: 2024-09-19 21:24:15 UTC


README

Laravel中TinyMCE的简单图片上传。

为什么制作这个?

从 petehouston/laravel-tinymce-simple-imageupload 分支而来

我想用于Laravel 6.x

因为,我使用TinyMCE,并且基本上,在编辑内容时很难理解如何直接将图片上传到编辑器。现在有很多TinyMCE的图片上传器,但它们的函数太复杂了,我只需要一个核心使用场景,选择并上传图片

就是这样,所以我为我的项目创建了这个包以便重复使用。当然,如果你需要,你也可以使用这个包。

此包适用于Laravel 6.0+。

安装

对于Laravel 6.0+

$ composer require sky9s/laravel-tinymce-simple-imageupload
    'providers' => [
        ...

        Sky9s\Tinymce\TinymceServiceProvider::class,

    ]

使用方法

在包含TinyMCE设置的视图中,您需要包含上传视图,在底部添加此行,

@include('mceImageUpload::upload_form')

不用担心,这个表单对您的视图是隐藏的,没有人会看到它,因为它设置为 display: none

下一步是将此配置添加到 tinymce 对象,

    tinymce.init({
        // .. your config here
        relative_urls: false,
        file_browser_callback: function(field_name, url, type, win) {
            // trigger file upload form
            if (type == 'image') $('#formUpload input').click();
        }
    });

这就完了,现在您应该在写内容时能够直接将图片上传到编辑器。

如果您需要自定义 resources/views 目录中的内容,可以发布视图

$ php artisan vendor:publish --provider=Sky9s\Tinymce\TinymceServiceProvider

尝试示例

该包中有一个设置示例,您可以通过添加一个示例路由来在项目中尝试它,

Route::get('/tinymce_example', function () {
    return view('mceImageUpload::example');
});

一些说明

图片上传处理器

我已经设置了一个控制器 Sky9s\Tinymce\TinymceController,该控制器实现了图片上传的方法。

如您所见,所有上传的图片都将存储在 public/img 目录中,名称是一个连接的哈希值,

$filename = 'image_'.time().'_'.$image->hashName();

处理图片上传的默认路由是 /tinymce/simple-image-upload

自定义上传URL和控制器

如果您不想使用包的预配置,可以自己配置。

在包含上传表单时,传入处理图片上传的URL

@include('mceImageUpload::upload_form', ['upload_url' => 'YOUR_URL_FOR_HANDLING_IMAGE_UPLOAD'])

添加一个处理图片上传的方法,该方法应返回与 Sky9s\Tinymce\TinymceController 中相同的结果。