[教學] 如何製作所見即所得編輯器 CSS？

所見即所得是指，能在 Inkmagine 文章管理編輯器內，可看到網頁上的文章樣式，例如引用樣式、標題字體大小、超連結顏色…等等，方便在編輯時，預想發布後的文章呈現。

例如：可設定文章中「引用」的樣式為藍色，且由線條、逗號所組成

您會需要編寫 CSS 程式碼，以您的網站樣式為基礎，覆蓋預設的編輯器樣式。以下為設定所見即所得樣式步驟。

Step1 產製文章頁 CSS 

您可以使用 CSS 程式碼模板，或是自行撰寫。

CSS 程式碼模板

模板列出多數文章內 html 結構，並且附有常見 CSS 設定。可依照網站文章頁樣式調整，若沒有使用該 html 結構，請刪除項目。例如：網站沒有 blockquote ，請將模板中相關程式刪除。

// 全域樣式
.ck-content {}

 

// 段落
.ck-content p {}

 

// 標題
.ck-content h3,
.ck-content h4,
.ck-content h5 {}

 

// 超連結
.ck-content a {}
.ck-content a:focus,
.ck-content a:hover {}
.ck-content a.ck-anchor {}

 

// 清單
.ck-content ol,
.ck-content ul {}
.ck-content li {}

 

// 引言
.ck-content blockquote {}
.ck-content blockquote p {}

 

// 分隔線
.ck-content hr {}

 

// 圖片
.ck-content figure.image {}
.ck-content figure.image img {}
.ck-content figure.image p {}
.ck-content figure.image figcaption {}
.ck-content figure.image.image-type-fluid
.ck-content figure.image.image-type-fluid img {}

 

// 外部影片、社群 Embed
.ck-content figure.media {}
.ck-content figure.media embed,
.ck-content figure.media iframe,
.ck-content figure.media object {}

模板參數說明與範例

全域樣式、段落：字體、字級、文字間距、行距、顏色

.ck-content {
 font-size: 18px;
 font-weight: 400;
 line-height: 1.6;
 letter-spacing: 0.02em;
 overflow-wrap: break-word;
}
.ck-content p {
 margin-bottom: 1rem;
}

標題：h3 (標題 1)、h4 (標題 2)、h5 (標題 3)

.ck-content h3,
.ck-content h4,
.ck-content h5 {
 font-weight: 700;
 line-height: 1.2;
}
.ck-content h3 {
 font-size: 1.5em;
}
.ck-content h4 {
 font-size: 1.25em;
}
.ck-content h5 {
 font-size: 1em;
}

連結：超連結、Anchor

.ck-content a {
 color: #4c3fff;
}
.ck-content a:focus,
.ck-content a:hover {
 color: #0f00e2;
}
.ck-content a.ck-anchor {
 background: 0 0;
 padding: 0;
 color: #4c3fff;
}

清單：符號清單、有序清單

.ck-content ol,
.ck-content ul {
 padding-left: 1.5rem;
}

段落引用

.ck-content blockquote {
 border: none;
 font-style: normal;
 overflow: visible;
 background-color: #d5dffe;
 padding: 20px 30px;
}
.ck-content blockquote p {
 margin: 0;
 line-height: 2;
}

分隔線

.ck-content hr {
 border-color: #dddfe8;
 margin: 0.5em 0;
}

圖片：來源、說明、最大寬度、置中對齊

.ck-content figure.image {}
.ck-content figure.image img {
 max-width: 100%;
}
.ck-content figure.image:has(p),
.ck-content figure.image:has(figcaption) {
 border-bottom: 1px dashed #dddfe8;
 padding-bottom: 0.5em;
}
.ck-content figure.image p,
.ck-content figure.image figcaption {
 font-size: 0.8em;
 margin: 0;
 padding: 0.5em 0 0;
}
.ck-content figure.image p {
 text-align: center;
 color: #8f90a6;
}
.ck-content figure.image figcaption {
 text-align: left;
 color: #676a88;
}
.ck-content figure.image.image-type-fluid
.ck-content figure.image.image-type-fluid img {
 width: 100%;
 margin: 1em auto;
}

Embed：插入外部影片、社群貼文

.ck-content figure.media {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
}
.ck-content figure.media embed,
.ck-content figure.media iframe,
.ck-content figure.media object {
 display: block;
 width: 100%;
 text-align: center;
}

從網站擷取現有 CSS

您可以從網站 CSS 中，擷取文章頁有使用的 CSS，只要遵守以下規格即可：

• 請提供編譯後 CSS 

• 請在樣式前方加上 “.ck-content ”

• 若文章頁有套用全站的 CSS 樣式也需要提供，例如：字級大小、字體

• 若有自定義的編輯工具、圖片大小，需依據設定的 Classname 提供樣式。例如：blockquote 有分 blockquote 與 shortquote 兩種樣式，則需要分別提供
   

Step 2 放入 Inkmagine 設定

請至 Inkmagine 文章管理 > 設定 > 編輯器 CSS 頁面，填入 CSS 後按「更新」，即可完成設定。設定完成後，可於文章編輯頁查看所設定的樣式。