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

Question

我在我的拉拉维尔项目中使用了ckeditor 5 zip。 但是当我从 ckeditor 云服务添加图像上传插件时，它不起作用。 这是文档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>

Answer 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 IlluminateHttpResponse
*/
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;
}
}

仅此而已。

Answer 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>

并在将这些代码放入您的图像后上传器控制器

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;
}

它对我有用，试试吧。

Answer 3

并且不要忘记使用exit停止脚本执行。

if ($request->hasFile('upload')) {

//some code for uploading

echo $response;
exit;
}