Question

我正在使用CKEditor 4，并希望在ckeditor中激活图像拖放功能

我已经尝试过了，但是按照演示无法正常工作。

kswapd

这是js

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

我关注了this link

但出现错误

如果您知道如何在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>

文档Here

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

享受！！！

使用Laravel，图像拖放不适用于ckeditor

1 个答案: