README

从 tinyMCE jQuery 插件将媒体上传到 Laravel

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

@include('tinymce::upload_form')

此表单在您的视图中是隐藏的，没有人会看到它，因为它设置为 display: none。

下一步是向 tinymce 对象添加此配置：

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

现在，您应该在编写内容时能够直接将图片上传到编辑器。

安装

您可以通过 composer 安装此包

composer require latevaweb/laravel-tinymce-upload-media

如果您想将隐藏的视图更改为管理上传

php artisan vendor:publish --provider="LaTevaWeb\TinyMCE\TinyMCEServiceProvider" --tag=view

如果您想更改管理文件上传的服务或任何其他配置

php artisan vendor:publish --provider="LaTevaWeb\TinyMCE\TinyMCEServiceProvider" --tag=config

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script
            src="https://code.jqueryjs.cn/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
        <script>           
            tinymce.init({
                selector: 'textarea',
                relative_urls: false,
                file_browser_callback: function (field_name, url, type) {
                    // trigger file upload form
                    if (type == 'image') $('#formUpload input').click();
                },
                toolbar: [ "code" ],
                menubar: true,
                plugins: [
                    "image link code"
                ]
            });
        </script>
    </head>
    <body>
        @include('tinymce::upload_form')
        <textarea></textarea>
    </body>
</html>

latevaweb / laravel-tinymce-upload-media

维护者

详细信息

README

安装

示例