preloader
軟體工程

Drupal的Wysiwyg編輯器搭配使用Insert module上傳圖片

在Drupal上使用TinyMCE編輯器通常感到困擾的是,TinyMCE的圖片plugin不能上傳圖片,它只有剪裁圖片大小的編輯功能。Drupal 7版本只能安全使用TinyMCE到3.x版本,Drupal英文官方網頁提到Drupal 7支援TinyMCE4.x版可能會有問題,因為目前(本文寫作時間)他們尚未完成檢查Drupal7相容TinyMCE 4.x版的程式碼。

我先前尋找很久,能夠安裝在TinyMCE 3.x版本且能正常運作在Drupal 7的圖片上傳plugin,試了一些,發現上傳圖片的步驟會很多,或是版本只支援到Drupal 6,而且plugin上傳的圖片不會上傳到AWS的S3,後者例如: image_assist。這對我來說管理不便,因為這代表我必須買大空間的VM,不划算。也嘗試不同的Drupal編輯器相關套件,例如:CKEditor、WYSIWYG CKEditor CKFinder bridge、BUEditor、elFinder、elFinder BUEditor integration和elFinder File Field Source這些套件,也試過伺服器檔案管理的套件,例如:IMCE和IMCE for File Field。

最後找到Insert這個套件,它可以配合Wysiwyg套件上傳圖片到AWS的S3,只要搭配一些設定就能在TinyMCE輕鬆上傳圖片並附圖片在編輯器裡,上傳步驟比之前少很多。Insert module操作說明:

  1. 以Drupal管理員身分登入網站,並點選Dashboard的架構(architecture)

  2. 架構頁面內點選內容類型(Content category/type)

  3. 在內容類型頁面找到一個已經定義的內容類型,譬如叫做「文章」,選擇右邊操作欄位的「管理欄位」

  4. 文章的欄位新增一個欄位給圖片,譬如名稱是「Image」,欄位類型點選「圖片」,Widget欄位選「圖片」;如果已經有定義一個欄位專門給圖片,請確認欄位類型與Widget的選擇內容如前所述,再進行第五步驟

  5. 新增「Image」欄位完畢之後,在「Image」的「操作」欄位點選「編輯」

  6. 進入「編輯」畫面後,請將畫面拉到進度列指示器的位置,進度列指示器位置的底下是Insert下拉隱藏選單,請依頁面指示點選你需要的功能。我選擇的是

    1. Enable insert button,
    2. Enable insert styles部分是Automatic、原始圖像、large、medium與thumbnail,
    3. Default insert style部分是medium;這個Insert下拉隱藏選單其他未提及的項目我是未選擇的。
  7. 接著再向下拉畫面到 Image 欄位設定,

  8. 完成第7步驟後請回到第3步驟,並改點選「管理顯示」

  9. 管理顯示頁面內有「預設」和「摘要」兩個子模式,請先操作「預設」子模式:將「Image」的標籤欄位值和格式欄位值都設成「<隱藏>」;「摘要」模式也請將將「Image」的標籤欄位值和格式欄位值都設成「<隱藏>」

 

Drupal全站內容撰寫也必須設定成Full HTML,操作說明:

  1. 以Drupal管理員身分登入網站,並點選Dashboard的模組(Module)
  2. 模組頁面請找到Wysiwyg module,點選它操作欄位的最右邊「設置」連結
  3. 點選之後會進入到「內容撰寫」頁面,預設你會看到四種內容撰寫類型:a)Full HTML,b)Filterd HTML,c)PHP code,d)Plain text。如果要讓TinyMCE這類的Wysiwyg編輯器,撰寫文章時附加的圖片被Drupal網站使用者看到,不會被Drupal網站強制濾掉,必須設定Full HTML,在此我們讓Full HTML的Editor欄位使用TinyMCE編輯器,並點選Full HTML操作欄位的「編輯」連結。

 

尋找Drupal module解答的建議方法次序:

  1. 主要從Drupal官網的Module說明文件和FAQ尋找合適Module
  2. 找第三方套件的網站,例如本次是TinyMCE套件的網站
  3. 找Stackoverflow上面的相關提問
  4. 尋找第三方套件用在其他CMS系統時,遇到相同或類似的問題,例如wordpress使用。
  5. 尋找第三方套件用在結合其他語言的CMS系統,遇到相同或類似的問題,例如Django-tinymce。