在正文之前要說一下,
其實我覺得在留言板用文字編輯器不是個好主意,
反而應該放在心情隨筆的地方,
(但也不是不行, 譬如像Facebook這樣, 有點像結合了留言板跟心情隨筆功能)
不過因為之前有過失敗的經驗,
所以把最困難的放在最後面,
這兩天研究很久終於研究出來了...

今天要解決的是圖片上傳,
用之前的程式雖然可以成功完成文字編輯器的編輯,
但是缺少了圖片上傳的部分,
感覺好像少了什麼?
所以今天要來做圖片上傳的部分,
收集了各種各樣的資料,
剪剪貼貼修修補補之後,
終於完成了其中一種方式,
(有提供好幾種, 但有的沒想嘗試, 有的嘗試失敗)
我把參考資料放在最後面,
有興趣可以自己研究其他方式.
順帶一提,
我使用的是CKEditor 5,
跟以往的版本可能會有些許的不同.

首先js的部分加入一個自定義的物件

class MyUploadAdapter {
	constructor(loader) {
		// The file loader instance to use during the upload.
		this.loader = loader;
	}

	// Starts the upload process.
	upload() {
		return this.loader.file.then(
			file =>
				new Promise((resolve, reject) => {
					this._initRequest();
					this._initListeners(resolve, reject, file);
					this._sendRequest(file);
				})
		);
	}

	// Aborts the upload process.
	abort() {
		if (this.xhr) {
			this.xhr.abort();
		}
	}

	// Initializes the XMLHttpRequest object using the URL passed to the constructor.
	_initRequest() {
		const xhr = (this.xhr = new XMLHttpRequest());

		// Note that your request may look different. It is up to you and your editor
		// integration to choose the right communication channel. This example uses
		// a POST request with JSON as a data structure but your configuration
		// could be different.
        xhr.open("POST", "/image", true);
        xhr.setRequestHeader('X-CSRF-TOKEN', '<?PHP echo csrf_token() ?>');
		xhr.responseType = "json";
	}

	// Initializes XMLHttpRequest listeners.
	_initListeners(resolve, reject, file) {
		const xhr = this.xhr;
		const loader = this.loader;
		const genericErrorText = `無法上傳檔案: ${file.name}.`;

		xhr.addEventListener("error", () => reject(genericErrorText));
		xhr.addEventListener("abort", () => reject());
		xhr.addEventListener("load", () => {
            const response = xhr.response;
            
            console.log('response', response);

			// This example assumes the XHR server's "response" object will come with
			// an "error" which has its own "message" that can be passed to reject()
			// in the upload promise.
			//
			// Your integration may handle upload errors in a different way so make sure
			// it is done properly. The reject() function must be called when the upload fails.
			if (!response || response.error) {
				return reject(response && response.error ? response.error.message : genericErrorText);
			}

			// If the upload is successful, resolve the upload promise with an object containing
			// at least the "default" URL, pointing to the image on the server.
			// This URL will be used to display the image in the content. Learn more in the
			// UploadAdapter#upload documentation.
			resolve({
				default: response.url,
			});
		});

		// Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
		// properties which are used e.g. to display the upload progress bar in the editor
		// user interface.
		if (xhr.upload) {
			xhr.upload.addEventListener("progress", evt => {
				if (evt.lengthComputable) {
					loader.uploadTotal = evt.total;
					loader.uploaded = evt.loaded;
				}
			});
		}
	}

	// Prepares the data and sends the request.
	_sendRequest(file) {
		// Prepare the form data.
		const data = new FormData();

        data.append("upload", file);
        
        console.log('file:', file);

		// Important note: This is the right place to implement security mechanisms
		// like authentication and CSRF protection. For instance, you can use
		// XMLHttpRequest.setRequestHeader() to set the request headers containing
		// the CSRF token generated earlier by your application.

		// Send the request.
		this.xhr.send(data);
	}
}

// ...

function MyCustomUploadAdapterPlugin(editor) {
	editor.plugins.get("FileRepository").createUploadAdapter = loader => {
		// Configure the URL to the upload script in your back-end here!
		return new MyUploadAdapter(loader);
	};
}

其中

xhr.open("POST", "/image", true);

裡面的路徑要寫後端上傳檔案的路徑

xhr.setRequestHeader('X-CSRF-TOKEN', '<?PHP echo csrf_token() ?>');

這是Laravel需要的SCRF的驗證

另外也可以自己修改錯誤訊息(但是除非是500 Server Error, 如果傳送成功, 錯誤訊息是從後端過來)

const genericErrorText = `無法上傳檔案: ${file.name}.`;

並且JavaScript要加入CKEditor的宣告

ClassicEditor
   .create(document.querySelector("#editor"), {
        extraPlugins: [MyCustomUploadAdapterPlugin],
        toolbar: ["heading", "|", "alignment:left", "alignment:center", "alignment:right", "alignment:adjust", "|", "bold", "italic", "blockQuote", "link", "|", "bulletedList", "numberedList", "imageUpload", "|", "undo", "redo"],
   })
   .then(editor => {
       myEditor = editor;
   })
   .catch(error => {
       console.error(error);
   });

然後要寫後端接收的部分,
首先是web.php的部分

Route::group(['prefix' => '/'], function(){
    //上傳圖片
    Route::any('/image', 'HomeController@imageProcess');
});

然後是圖片接收的函式
app/Http/Controllers/HomeController.php

//接收檔案上傳
public function imageProcess()
{
    header('Content-Type: application/pdf');

    Log::notice('接收圖片資料');
    //接收輸入資料
    $input = request()->all();
    $result = array();

    Log::notice('接收圖片'.print_r($input, true));

    if(isset($input['upload']))
    {
        $upload = $input['upload'];

        //檔案副檔名
        $extension = $upload->getClientOriginalExtension();
        //產生隨機檔案名稱
        $filename = uniqid().'.'.$extension;
        //相對路徑
        $relative_path = 'images/upload/'.$filename;
        //取得public目錄下的完整位置
        $fullpath = base_path('public_html/'.$relative_path);

        //允許的檔案格式
        switch($upload->getMimeType())
        {
            case 'image/jpeg':
            case 'image/png':
                break;
            default:
                $result['error'] = array(
                    'message' => '很抱歉，只接受JPG和PNG檔案',
                );
                echo json_encode($result);
                exit;
        }

        //移動檔案位置並改名稱
        move_uploaded_file($upload->getRealPath(),$relative_path);

        $result['url'] = '/'.$relative_path;
        echo json_encode($result);
    }
    else
    {
        $result['error'] = array(
            'message' => '很抱歉，上傳檔案失敗了',
        );
        echo json_encode($result);
    }
}

最後再附上成果圖

到這裡這個系列的文章差不多結束了,
雖然還有些東西想寫,
不過就等年底再說了.

參考資料:
Simple upload adapter(官方文件)
[筆記]CKEditor加上CKFinder上傳圖檔更方便
如何套用 CKEditor5 上傳圖片
CKEditor 5圖片的上傳方式
CKEditor 5 教學（三），上傳圖片至 Amazon S3