# [D8教學]Drupal8超新手入門模組系列-ckeditor colorbutton、font、bootstrap grid

## 前言
還沒看過入門模組系列第一篇的可以先行前往[Drupal8超新手入門模組系列-editor advanced link](https://www.hellosanta.com.tw/blog/drupal-8-module_editor-advanced-link)，第一篇為了解決D8 ckeditor預設超連結無法右鍵開啟新視窗的問題而安裝editor advanced link套件，接下來本篇將一次介紹3個相依模組，讓D8的ckeditor更強大！
## 模組介紹
這次一次介紹三種ckeditor相依模組，分別為：
1. [colorbutton](https://www.drupal.org/project/colorbutton)
colorbutton可以改變文字顏色，這不用多說肯定是文字編輯會需要的套件。
2. [font](https://www.drupal.org/project/ckeditor_font)
font則是能調整編輯時的字型及文字大小，這一樣是文字編輯常使用的功能之一。
3. [bootstrap grid](https://www.drupal.org/project/ckeditor_bootstrap_grid)
bootstrap grid 就比較特別一點，要讓使用者有高度彈性能編輯圖片加文字的列表，就能安裝該模組協助使用者。
可以選擇插入一列三個item或兩個item等等的圖片加文字方塊，整個排版給與使用者高度彈性。

## 安裝模組
進入[colorbutton](https://www.drupal.org/project/colorbutton)、[font](https://www.drupal.org/project/ckeditor_font)、[bootstrap grid](https://www.drupal.org/project/ckeditor_bootstrap_grid)官網下載，指令安裝如下：

composer require 'drupal/colorbutton:^1.1' 
composer require 'drupal/ckeditor_font:^1.0' 
composer require 'drupal/ckeditor_bootstrap_grid:^1.2' 

官方文件由提到，這三個模組都需要額外安裝插件才能啟用，細節如下：
colorbutton需要啟用PanelButton這個模組及安裝[ http://ckeditor.com/addon/colorbutton]( http://ckeditor.com/addon/colorbutton)這個插件，才能使用，插件的話可以直接下載放到指定資料夾底下或使用composer.json安裝，若使用composer安裝可參考這篇[如何通過composer.json加入第三方插件到Library資料夾](https://www.hellosanta.com.tw/blog/how-to-add-3rd-party-plugin-by-using-composer)。

## 結論
模組系列進入到第二篇後差不多把D8 ckeditor常用的相依模組一次介紹完畢，唯一比較可惜的是這個，更能縮減開發的時間，將效率最大化，後續作者將持續更新自身接觸過的實用模組給大家。