CkEditor 图像上传在 laravel 中不起作用

Posted 2023-03-07

【中文标题】CkEditor 图像上传在 laravel 中不起作用

【英文标题】：CkEditor image upload is not working in laravel

【发布时间】：2020-07-04 18:01:26

【问题描述】：

我在我的 laravel 项目中使用了 ckeditor 5 zip。但是当我从 ckeditor cloudServices 添加图像上传插件时它不起作用。 这是文档 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html

我在刀片中的 html 代码。

<div class="form-group">
    <label for="description">Description</label>
    <textarea class="form-control" name="description" id="description"
              rows="3"> old('description') </textarea>
</div>

这是我的脚本

<script>
    ClassicEditor
        .create(document.querySelector('#description'), 
            cloudServices: 
                tokenUrl: ' csrf_token() ',
                uploadUrl: ' public_path('../../img/desc-img') '
            
        )
        .then(editor => 
            window.editor = editor;
        )
        .catch(err => 
            console.error(err.stack);
        );
</script>

【问题讨论】：

我在这里回答了同样的问题，希望对你有帮助***.com/a/62485424/4575350

【参考方案1】：

定义你的文本区域

<textarea class="form-control" id="ckeditor" name="ckeditor"></textarea>

并使用此代码实例化 ckeditor。

CKEDITOR.replace('ckeditor ', 
 filebrowserUploadUrl: "route('ckeditor.image-upload', ['_token' => csrf_token() ])",
 filebrowserUploadMethod: 'form'
);

然后创建用于上传图片的操作并像这样定义您的路线：

/**
 * upload images from ckeditor.
 *
 * @param Request $request
 * @return \Illuminate\Http\Response
 */
 public function upload_images(Request $request)
 
      $request->validate([
          'upload' => 'image',
      ]);
      if ($request->hasFile('upload')) 
            $url = $request->upload->store('images');
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('storage/' . $url);
            $msg = 'Image successfully uploaded';
            $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
            @header('Content-type: text/html; charset=utf-8');
            return $response;
        

就是这样。

【参考方案2】：

使用这些脚本调用 Ckeditor

<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>
<script type="text/javascript">
    CKEDITOR.replace('editor1', 
        filebrowserUploadUrl: "route('ckeditor.upload', ['_token' => csrf_token() ])",
        filebrowserUploadMethod: 'form'
    );
</script>

然后将这些代码放入您的 imageUploaderController

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;
 

它对我有用，试试吧。

【参考方案3】：

别忘了用exit 停止脚本执行。

if ($request->hasFile('upload')) 
    
    //some code for uploading
    
    echo $response;
    exit;