# Summernote ###### tags: `laravel` ## 如何套用summernote [Summernote - Super Simple WYSIWYG editor](https://summernote.org/) ## 上傳圖片 [Summernote - onImageUpload](https://summernote.org/deep-dive/#onimageupload) ### 官網文件 Callbacks>onImageUpload ![1](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/17f2e390-0ce1-456c-974a-b318ff9c97f7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103006Z&X-Amz-Expires=86400&X-Amz-Signature=6e1a799d3a76836b2d8ebf6ce7e45153acff51181e152d80b8a15dde74faccd4&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/17f2e390-0ce1-456c-974a-b318ff9c97f7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103006Z&X-Amz-Expires=86400&X-Amz-Signature=6e1a799d3a76836b2d8ebf6ce7e45153acff51181e152d80b8a15dde74faccd4&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) ### 開路由 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1cd76da0-56fe-4ec2-9c44-349008b3e434/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103708Z&X-Amz-Expires=86400&X-Amz-Signature=fa5e180b2876faab508031b6be1d8c2567b1eca51e9678535711fb286069fb99&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) ### fetch FormData() — 箭頭函式寫法 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/3d23d2d5-8265-4286-913b-54ab1507dabb/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103726Z&X-Amz-Expires=86400&X-Amz-Signature=e841d2764735933076015f7571be442afd6c0e8444ce5da5526eb0853ba10635&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) ### fetch FormData() — 普通寫法 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/dfb3c4d5-f93c-4375-85d3-3815dc60ebac/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103803Z&X-Amz-Expires=86400&X-Amz-Signature=ec4a548050a1fd1f8571fe3e6a0a76fd52460b1133ef22fdcc71fa0b81773f7f&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) fetch 是送出請求,第一個參數是要取回的地點,填位置或網址,之前天氣小卡取用Json檔就是透過這個方法。這次我們要調用Controller中的store(取名為summernote)函式,因此我們需要開一隻Route,作為網址傳入第一個參數。 第二個參數則是要做的事,下面是用PUT方法,將 formData 中的資料傳進上面的位置中。 .then內寫的是送出請求後,對面傳回給我的response,若是有才會開始動作,否則卡住 ### 419問題是少了token__ 只要用post方法送表單,就需要token 兩個花誇號,表示這是PHP階段,會先做 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/6e8efb6d-62bb-4e29-b5cb-5cb8d7f6b069/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103827Z&X-Amz-Expires=86400&X-Amz-Signature=b2cb2a9773499fa35b05ede8c9cc532f33d70921c32ed13c983948a2097c4a15&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) ### 存檔的controller — 套用之前store寫法 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/68241934-8233-4122-bd21-14adf4db2e2a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103850Z&X-Amz-Expires=86400&X-Amz-Signature=d5d92d902e0b0d584b47ecfa098b28c78ff1124dba1012a0aef80e5caa4844e5&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22) ### 重講 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/129ef305-9c91-4d40-924b-81d3877ace48/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T103914Z&X-Amz-Expires=86400&X-Amz-Signature=e927b257aaa17defef53561a75822885e2b57113f8d699ddbb456fa9d57f892b&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)