Перетаскивание изображений не работает с ckeditor с использованием laravel

Question

Я использую CKEditor 4 и хочу активировать функцию перетаскивания изображений в ckeditor

Я пробовал, но он не работает согласно демонстрации.

<div class="col-sm-10 col-md-8">
    <textarea
            id="editor<?=$result['languages'][$key]->languages_id?>"
            name="modal_description_<?=$result['languages'][$key]->languages_id?>"
            class="form-control"
            rows="5" draggable="true">
       {{stripslashes($description->home_modal_description)}}

    </textarea>
    <span class="help-block"style="font-weight: normal;font-size: 11px;margin-bottom: 0;">
        {{ trans('labels.EnterModalDetailIn') }} {{ $result['languages'][$key]->name }}
    </span>
</div>

Это js

<script src="{!! asset('admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script type="text/javascript">
    $(function () {

        //for multiple languages
        @foreach($result['languages'] as $languages)
        // Replace the <textarea id="editor1"> with a CKEditor
        // instance, using default configuration.
        {{--CKEDITOR.replace('editor{{$languages->languages_id}}');--}}
        CKEDITOR.replace('editor{{$languages->languages_id}}', {
            extraPlugins: 'easyimage',
            uploadUrl: '{!! url('admin/ckeditor/imageupdload',['_token' => csrf_token()]) !!}',
            {{--filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",--}}
            {{--filebrowserUploadMethod: 'form'--}}
        });
        @endforeach

        //bootstrap WYSIHTML5 - text editor
        $(".textarea").wysihtml5();


    });
</script>

Я перешел по этой ссылке

, но получаю ошибку введите описание изображения здесь

Помогите, пожалуйста, если вы знаете, как активировать перетаскивание изображений в ckeditor.

Answer 1

Вы можете использовать CKFinder вместо easyImage:

<script>
    CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
    } );

    //bootstrap WYSIHTML5 - text editor
    $('.textarea').wysihtml5();

</script>

Документация Здесь

Для laravel:

<script>
   CKEDITOR.replace('editor1', {
       filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token() ])}}",
       filebrowserUploadMethod: 'form'
   });
</script>

В вашем маршруте:

Route::post('images/upload', 'ImageController@upload')->name('ckeditor.upload');

А в вашем ImageController:

public function upload(Request $request)
 {
     if($request->hasFile('upload')) {
         $originName = $request->file('upload')->getClientOriginalName();
         $fileName = pathinfo($originName, PATHINFO_FILENAME);
         $extension = $request->file('upload')->getClientOriginalExtension();
         $fileName = $fileName.'_'.time().'.'.$extension;
        
         $request->file('upload')->move(public_path('images'), $fileName);
   
         $CKEditorFuncNum = $request->input('CKEditorFuncNum');
         $url = asset('images/'.$fileName); 
         $msg = 'Image uploaded successfully'; 
         $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
               
         @header('Content-type: text/html; charset=utf-8'); 
         echo $response;
     }
}

Наслаждайтесь !!!