---
# System prepended metadata

title: Summernote -2 這篇很亂，斟酌服用
tags: [laravel]

---

# Summernote -2 這篇很亂，斟酌服用
###### tags: `laravel`

### 多圖片上傳

window.onload Vs document.ready  等畫面長好才開始執行以下js內容，通常寫功能時都會加

[...files] ES6解構，將files中的東西一個一個拿出來，存成一個array。

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2b9f89eb-6833-4af4-9958-ae3b3b72fcd2/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T104853Z&X-Amz-Expires=86400&X-Amz-Signature=37da17e9278f9844b9470d67d499ed48012a0bcb06929d54cdb35dd5214580d1&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

return 誰發送請求我就回給誰—-fetch的.then會接到

### foreach
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/d48699e8-5e94-4925-816d-008bfbe3a43e/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105005Z&X-Amz-Expires=86400&X-Amz-Signature=59ff6352c74a76e754dd5f7077afd006473c921ae5a8bf9b03d80ea56e66b635&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/ff6f6f89-d634-4642-b45c-4637d453d97b/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105032Z&X-Amz-Expires=86400&X-Amz-Signature=84fa88f6638e895d1bafbc0a50789b65cc3259d54e37f51aa4c73ddcec7ff38f&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
fetch 是取回，第一個參數是要取回的地點，填位置或網址，之前天氣小卡取用Json檔就是透過這個方法。這次我們要調用Controller中的store(取名為summernote)函式，因此我們需要開一隻Route，作為網址傳入第一個參數。

第二個參數則是要做的事，下面是用PUT方法，將 formData 中的資料傳進上面的位置中。
### 刪除

先新增一route給delete
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/74b52d4e-9eec-4fc3-aad7-3f439836879e/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105101Z&X-Amz-Expires=86400&X-Amz-Signature=3b01efc2c42944f292c6d58fcd7de36a48a321d6cd9e99093dd5155e618a327a&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/0e1f875e-ba5f-48ff-90af-d5a70443da7c/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105127Z&X-Amz-Expires=86400&X-Amz-Signature=6d7add3601af79ef2f0836307e798a0563a33f33c7fb884f9367d22d88bb1db6&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
去controller接看有沒有接到src

有的話繼續
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/f9df11de-79ae-49cd-a4dd-a28603fdf103/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105152Z&X-Amz-Expires=86400&X-Amz-Signature=b2371189f1d048f185ca4a26aa096f9bccb1e02975f4e2e121de3b91c1e280b3&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
補上then

test打錯，要改成text
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/653ec6c8-7d92-44ab-9ba5-7bbd9084dbd5/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105213Z&X-Amz-Expires=86400&X-Amz-Signature=a0ee2cda36ecd643d22a5d9481a605ffd03305ac3c738c56c3c46329e1e07dd5&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/935ead65-9dd3-4279-af53-551173a453be/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105246Z&X-Amz-Expires=86400&X-Amz-Signature=753135a63ec3904c2b5296e280cdd273ae805987fb500d8defd192b7138a5910&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)


# 進階挑戰

## 如何刪掉summernote伺服器上的圖檔?

### 按下summernote刪除圖片後，畫面檔案被刪除了，伺服器上的還在

### 取出所有img開頭，\結尾的，但還無法拿出src
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4347495d-ad39-4728-93e3-7925b34bf83f/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105300Z&X-Amz-Expires=86400&X-Amz-Signature=99460adbf3c484a27decacfc46ef48d06b3ca4389d81d9af5d7b4150987c2a13&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
第二種找文字的方法—用parser，從html
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/6dcc0f7c-e6b5-4ce2-a76e-47babbdc2b4e/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105323Z&X-Amz-Expires=86400&X-Amz-Signature=4f9d3ce1fac5b9d0e8df0eec20d1a7aedd1042ef213f1618cdf5ffbd455beb75&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
拿一個的寫法
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/3fd0f644-5088-4acc-babc-5e683caf32cd/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105338Z&X-Amz-Expires=86400&X-Amz-Signature=6d2a412bfbfab0fd7990d84d600c68619a0d5b14eebfe7b487d91802493ace88&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
拿很多個的寫法
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2e0f924b-f894-4f51-a2f3-597aea1bc207/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105353Z&X-Amz-Expires=86400&X-Amz-Signature=7bdd947f0cbc7254606c9309d42aaf7360ecf3b03c4f8c69ad13b33f56c6a3ff&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
拿很多個的寫法—-有註解
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4de92572-7f74-4ec5-9ee7-4bc0c521fd4f/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105443Z&X-Amz-Expires=86400&X-Amz-Signature=3bd8674701719298385b61b3642cc72ea3dd1ffa6707dd2347ce71b8a6db8a78&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4bfadd84-11cd-43f2-b02b-ec2052d2c898/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105458Z&X-Amz-Expires=86400&X-Amz-Signature=a8d846febd6cf0bc29f739f150ef9ee17c8ba21985954e06cc9b22f6167abc43&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/42d19508-fb8e-45df-8f40-188976e46379/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105513Z&X-Amz-Expires=86400&X-Amz-Signature=0cef2a0693343aaf27e40c6b7bc0f4e577fb447f3bd3bb79b59cdc6938b4bcb8&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/64bbb2bc-74fe-4fbb-a5ec-a9a6988d184b/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105523Z&X-Amz-Expires=86400&X-Amz-Signature=cdcded8d90970fc5eef18047b65ee91a0e21c3c44c22e5b0f046b38b9526fcdf&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
開頭直接讓他保持base64，不一上傳就儲存
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/1b37c813-f598-4241-b1d1-29c4634f67b9/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105532Z&X-Amz-Expires=86400&X-Amz-Signature=9a28850b2950cf22dcc92af0b4e9bf09ef4e56a9325ba55a67c3f49b137a2154&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)


[PHP正規表達式比對](https://medium.com/verybuy-dev/php%E6%AD%A3%E8%A6%8F%E8%A1%A8%E9%81%94%E5%BC%8F%E6%AF%94%E5%B0%8D-89b03ebc10eb)

開始恍神
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2129ddb1-8e2e-4a3e-8968-c358f7bc2052/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105603Z&X-Amz-Expires=86400&X-Amz-Signature=580fafc94432b0cc617d668403b264319e6c869d2ae31ff9552ca17ac6a43eb6&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/6fe171fd-97da-459e-bff5-e72b899cc6fc/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105633Z&X-Amz-Expires=86400&X-Amz-Signature=53494999c2f2c6bbbf63caa9cd19aa6d53c42abd60f39c2f7547030ef4cb6283&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/125faec0-887d-4712-b5ee-b1ead52b1968/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105702Z&X-Amz-Expires=86400&X-Amz-Signature=4194b823230a519b66a946ddc01e7f0ec9afc79337f0968955b3fa87647ffedc&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/5dafa2b5-f10b-4c22-8b25-4c4bf13ea2b2/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105712Z&X-Amz-Expires=86400&X-Amz-Signature=0af9eabc6c19c7f2f99de1495c2dc768d0061dd3ec551054bf49486238af5aac&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/60619586-5907-4e1d-8f76-ee5eb38b85f9/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105725Z&X-Amz-Expires=86400&X-Amz-Signature=d38364f8f57d86908d5620bb63a7c7ece732f264ea9f9a3c84146cd99634cab7&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2f26d289-5690-49dc-8d66-3fe9a653a80a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105735Z&X-Amz-Expires=86400&X-Amz-Signature=9063905c2f97d3da315a01fe6fa792427edbca05bd99a28b5a0122b76d9daf41&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
圖片過大，被SQL擋掉
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/72d3fcc3-e734-4d42-b81e-a5e43f92c6d7/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105745Z&X-Amz-Expires=86400&X-Amz-Signature=9e7375f6397cfbfa2fa8559c14547912edb736bb30ee9133bd243147084dca55&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
放開限制
![image alt](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/9e9ab743-3490-4bcd-88ad-c00c79bbe1cc/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20210608%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20210608T105801Z&X-Amz-Expires=86400&X-Amz-Signature=0d2e7ddf3460b7f5a3312b2971afac675f4fdad6f8eb29e8577cb3efb7564b94&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)
進去裡面改memory_limit，應該要改四個地方，進入的、儲存的，原本40M改成1000M之類的。



# 補充

[Jun-jieChen/summernote](https://github.com/Jun-jieChen/summernote)

[Summernote - Delete image from server](https://stackoverflow.com/questions/28078159/summernote-delete-image-from-server)

老師給的替換

[Replace First Occurrence of String With PHP | Beamtic](https://beamtic.com/replace-first-occurrence-php)

均均找到的正規表達式寫法-img、src

[Matching SRC attribute of IMG tag using preg_match](https://stackoverflow.com/questions/2180255/matching-src-attribute-of-img-tag-using-preg-match)

嘉威找到ㄉ正規表達式寫法-src

[PHP: get image src attribute (regular expression)](https://gist.github.com/vyspiansky/11285153)

