Nuxt.js使用quill編輯器上傳圖片及直接編輯HTML

如果你還沒看過如何部署Nuxt專案,請先閱讀

Laravel+Nuxt快速上手

本篇主要介紹如何使用vue-quill-editor文字編輯器,並且開啟獨立上傳圖片不使用內建的將圖片直接壓成base64寫入html中,主要是因為這種方法會讓html異常的肥大,另一方面也會處理如何開啟直接編輯html的功能。

參考文件 :

https://www.itread01.com/content/1543370884.html

https://github.com/benwinding/quill-html-edit-button

https://www.leixuesong.com/3860

安裝quill editor

安裝方式其實依照文件中照打就可以完成不難

1. 安裝vue-quill-editor

2. 引入vue plugin到nuxt專案中

在plugin資料夾中建立 : vue-quill-editor.js,內容如下

3. 編輯nuxt.conf.js,引入該plugin以及CSS檔案

基本上到此已經安裝完畢,此時在component或page中的template加入以下

用來定義編輯器該出現的位置,關鍵在class=”quill-editor”,

v-quill: 定義工具列該出現哪些,詳細可以參考官網說明,範例如下

@change : 定義當內容異動時該如何處理,這邊我會定義一個method讓他把html存回data

完整範例大概會像這樣子

安裝圖片上傳套件

因為預設上傳圖片會將圖片直接壓成base64寫入html中,這樣會使存下來的html超級長,所以我還是希望是上傳到伺服器後,html中只保留url即可

1.安裝quill-image-extend-module

2. 接著修改一下剛剛寫在beforMount的內容

其中定義在modules ImageExtend的參數

name 是傳送到後端伺服器接收到變數名稱

action是後端伺服器接收檔案的API URL,這邊我是將伺服器URL定義在.env中,後面接上已經設計好的URL位置

response中的return值必須是這張圖片存在伺服器上的URL,所以必須注意API回傳中是不是有包含圖片URL

這樣子,點選圖片上傳後就回直接上傳到伺服器上,並且將<img src=”URL” /> 寫入html中。

安裝編輯html套件

quill-editor功能中並不包含可以直接編輯html的功能,但是這個功能卻是很常用上的,因此我們透過其他套件來完成

1. 安裝quill-html-edit-button

2. 接著來改一下剛剛beforMont中的內容

兩個地方特別需要注意

1.一定要加入這行,不然nuxt會丟錯誤訊息

2.顯示在toolbar上的按鈕在這邊定義

github上面提供的範例實際跑出來會有點歪掉,我猜想是因為quill-editor經過改版後每個按鈕的寬度有重新定義過,所以這邊我自己加了class以及margin讓畫面好看些。