Laravel-AdminにリッチテキストエディタCKeditorを追加し、画像をアップロードできます.

6779 ワード

昨日のプロジェクトはLaravel-Adminに対してリッチテキストエディタを交換する必要があります.選択したリッチテキストエディタはCKEditor4で、エディタは直接画像をアップロードすることができます.多くの資料を探して半日銅鼓を打って、やっとできました.そして、OSSに直接画像を伝えることができます.ここに記録する.
  • は、まずOSSの公式文書の拡張に従って
  • を設定する.
  • 上記の章ごとに公式のドキュメントを設定すると、リッチテキストエディタを呼び出すことができ、文字を編集することができるが、リッチテキストに画像をアップロードすることはできず、ダウンロードしたAdminのファイルディレクトリの下でdiskを見つける必要があり、以下のコードを追加する必要がある:
  •  config.filebrowserImageUploadUrl = '/ckeditor/upload?opener=ckeditor&type=images';
    
    Laravel-Adminで検索してCKEditorを変更
    id:"Upload",hidden:!0
    //   
    id:"Upload",hidden:false
    
  • 以下では、対応するピクチャ受信コントローラを記述する必要があり、まずartisanでコントローラを生成し、ルーティング
  • を設定する.
    php artisan make:controller CkeditorUploadController
    
    config.jsに対応するルーティングを設定
    Route::post('ckeditor/upload','CkeditorUploadController@uploadImage');
    

    コントローラの内容を記述
    	public function uploadImage(Request $request)
        {
    
              $image = request()->file('upload');
            //       disk
            $path = $image->store('images');
            
            //            disk
    //      $path = Storage::disk('public')->put('images',$image);
            $url = Storage::disk('public')->url($path);
    
            $callback = $request->input("CKEditorFuncNum");
            $CKEditor = $request->input('CKEditor');
    
            return "window.parent.CKEDITOR.tools.callFunction(1,'<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$url</span><span class="token punctuation">}</span></span>','')";
    //        return 'window.parent.CKEDITOR.tools.callFunction('.$funcNum.', "'.$url.'", "'.$message.'")'
    
    
        }
    
  • は画像テストをアップロードして、発見は500の間違いで、1顔は愚かで、感じはコールバックの帰ってくる内容が間違っているべきで、ckeditor/plugins/image/dialogs/image.jsまで参照5hidden:falseの中で
  • を追加します
        config.filebrowserUploadMethod = 'form';
    

    世界はすべて静かになって、涙が満面に流れます!
    参考資料:[1]http://laravel-admin.org/docs/zh/model-form-field-management [2]https://github.com/tmtfns/laravel-ckeditor/blob/master/app/Http/Controllers/TextImageController.php [3] https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html [4] https://blog.csdn.net/alistring/article/details/55510907 [5] https://segmentfault.com/q/1010000007678160 [6] https://www.jianshu.com/p/1a620cafdf7c [7] https://coderwall.com/p/xs1rsa/image-uploads-with-ckeditor-and-laravel [8] https://stackoverflow.com/questions/49390242/how-to-return-ckeditorfuncnum(点眼リンク)