Integrate with Ckeditor

- Prepare HTML

<textare name="content" id="editor"></textare>

- Ckeditor config

var config = {
    filebrowserImageBrowseUrl: '',
    filebrowserImageUploadUrl: '' + $('meta[name="csrf-token"]').attr('content'),
    filebrowserWindowWidth: '768',
    filebrowserWindowHeight: '500',
    height: 356,
    allowedContent: true
var mergeConfig = {};
$.extend(mergeConfig, config, extraConfig);
CKEDITOR.replace('editor', mergeConfig);

You need to add <meta name="csrf-token" content="{{ csrf_token() }}"> to header of your layout if it's not exists.


- Prepare HTML

<textare name="content" id="editor"></textare>

<iframe id="form_target" name="form_target" style="display:none"></iframe>
<form id="my_form" action="{{ route('media.files.upload.from.editor') }}" target="form_target" method="post" enctype="multipart/form-data" style="width:0;height:0;overflow:hidden;display: none;">
    {{ csrf_field() }}
    <input name="upload" id="upload_file" type="file" onchange="$('#my_form').submit();this.value='';">
    <input type="hidden" value="tinymce" name="upload_type">

- TinyMCE config

    menubar: false,
    skin: 'voyager',
    min_height: 600,
    resize: 'vertical',
    plugins: 'link, image, code, youtube, giphy, table, textcolor',
    extended_valid_elements : 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
    file_browser_callback: function(field_name, url, type, win) {
        if (type =='image') {
    toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | code',
    convert_urls: false,
    image_caption: true,
    image_title: true

Standard alone button

- Sample HTML:

<input type="text" name="file" class="input-file">
<a class="btn_gallery">Choose file</a>

- JS:

if (jQuery().rvMedia) {

        multiple: false,
        onSelectFiles: function (files, $el) {
            var firstItem = _.first(files);