CKEditor Laravel 图像上传未定义

Question

我正在尝试将 CKEditor 与 Laravel 7 一起使用来编辑富文本。但是，图像上传不起作用。

我在网上搜索了解决方案，他们建议使用：

config.filebrowserUploadMethod = 'form';

但是添加这一行并不能解决我的问题。

我收到“未定义”和“服务器错误”

这是我的代码 -

config.js

:

config.removeDialogTabs = 'image:advanced;link:advanced';
config.removePlugins = 'image'; //I had previous conflict between easyimage and image that's why I added this
config.height = 700;
config.filebrowserUploadMethod = 'form';

CKEditor控制器

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';
        // answers online suggested to use this instead of section below but it gave me undefined error
        return response()->json([ 'fileName' => $fileName, 'uploaded' => false, 'url' => $url, $msg ]);

        //previously the section below gave me an error of server
       // $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";

      //  @header('Content-type: text/html; charset=utf-8');
       // echo $response;
    }
}

路线

Route::post('ckeditor/image_upload', 'CKEditorController@upload')->name('upload');

表格

@extends('layouts.app')

@section('content')

    <div class="row section-primary">
        <div class="col-md-12">
            <div class="dashboard-post-header">
                <h2>Create Post</h2>
                <a href="{{url('/admin/dashboard/')}}" class="btn btn-primary">Dashboard</a>
            </div>


    {!! Form::open(['action' =>  'PostsController@store','method' => 'POST', 'enctype' => 'multipart/form-data']) !!}
    <div class="form-group">
        {{Form::label('title','Title')}}
        {{Form::text('title','',['class'=>'form-control','placeholder'=>'Title'])}}
    </div>
    <div class="form-group">
        {{Form::label('published','Status')}}
        {{Form::select('published', ['0' => 'Draft', '1' => 'Published'])}}
    </div>

    <div class="form-group">
        {{Form::label('type','Type')}}
        {{Form::select('type', ['companies' => 'Companies', 'macro-trends' => 'Macro Trends'])}}
    </div>




    <div class="form-group">
        {{Form::label('content_preview','Cotent Preview')}}
        {{Form::textarea('content_preview','',['class'=>'form-control','placeholder'=>'Content Preview'])}}
    </div>
    <div class="form-group">
        {{Form::label('content','Content')}}
        {{Form::textarea('content','',['id'=>'article-ckeditor','placeholder'=>'Content'])}}
    </div>

    <div class="form-group">
        {{Form::file('image')}}
    </div>

    <div id="editorjs"></div>

    {{Form::submit('Submit',['class' => 'btn btn-primary'])}}
    {!! Form::close() !!}


    <script type="text/javascript">
        $(document).ready(function () {
            CKEDITOR.replace( 'article-ckeditor', {
                filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });



        });




    </script>


</div>
    </div>
@endsection

Answer 1

这是我的代码（旧项目）与 ckfinder 结合使用，效果很好

刀片：

<textarea name="content" required aria-required="true" class="ckeditor" id="editor">{{html_entity_decode(old('content'))}}</textarea>

javascript:

<script src="{{asset('ckeditor.js')}}"></script>
@include('ckfinder::setup')
CKEDITOR.replace('editor',
{
  filebrowserBrowseUrl: "{{ route('ckfinder_browser', 'Type=Files') }}",
  filebrowserImageBrowseUrl: "{{ route('ckfinder_browser', 'Type=Images') }}",
  filebrowserFlashBrowseUrl: "{{ route('ckfinder_browser', 'Type=Flash') }}",
  filebrowserUploadUrl: "{{ route('ckfinder_connector', 'command=QuickUpload&type=Files') }}",
  filebrowserImageUploadUrl: '{{ route('ckeditor_upload',['_token' => csrf_token() ]) }}',
  filebrowserFlashUploadUrl: "{{ route('ckfinder_connector', 'command=QuickUpload&type=Flash') }}"
});

在控制器中：

use File;
use Illuminate\Support\Str;

public function ckeditor_upload(Request $request)
{
    $funcNum  = $request->input('CKEditorFuncNum');
    $message  = $url = '';
    if ($request->hasFile('upload')) {
        $file = $request->file('upload');
        if ($file->isValid()) {
            $folder = public_path('images/gallery/');
            if(!is_dir($folder)){
                File::makeDirectory($folder, $mode = 0777, true, true);
            }

            $filename = Str::uuid().$file->getClientOriginalExtension();
            $file->move($folder, $filename);
            $url = public_path("images/gallery/{$filename}"); //asset() i guess worked fine
        } else {
            $message = 'An error occurred while uploading the file.';
        }
    } else {
        $message = 'No file uploaded.';
    }
    return "<script>window.parent.CKEDITOR.tools.callFunction({$funcNum}, '{$url}', '{$message}')</script>";
}