內文樣式
這是引言，欲使用引言功請於編輯器點選「引用段落」，趕快來試試看吧！在引言裡用<cite>可以有這個效果，通常用於顯示引言的來源
大標題（編輯器：「格式 > 標題1」）
這是段落文字。我們認為新媒體/資訊傳播科技（New Media/Information Communication Technology）除了為大眾帶來更好、更酷的生活之外，還能夠促成社會變革，影響文化、政治、環境等公共議題。我們的願景是促成一般網路使用者、非營利組織工作者、商業經營者，皆能善用資訊傳播科技、採取行動，改變自己與世界！
中標題（編輯器：「格式 > 標題2」）
我們以社會企業自許，以平等、開放、透明的方式對待工作同仁、合作夥伴與客戶。我們希望所提供的產品與服務，能對社會有所助益。公司利潤除作為公司發展與員工福利之外，將實質回饋20%於非營利組織的相關工作。
我們相信同樣的理念，將串連起用有相同想法的朋友，發掘合作機會，共創更好的社會企業營運模式。
小標題（編輯器：「格式 > 標題3」）
shift + enter 換行測試，與下一行應該有一行的間隔，而非段落的間隔。
換行測試，不應該中間有間隔。
換段落，與上個段落有間隔。換段落，與上個段落有間隔。換段落與上個段落有間隔，換段落與上個段落有間隔。換段落，與上個段落有間隔。
清單要正確呈現，清單間距不應太開，也不應太擠
- 清單，清單，清單。
- 清單，清單，清單。清單，清單，清單。
清單中可以 shift + enter 換行 - 清單，清單，清單。清單，清單，清單。
以下是排序清單
- 清單，清單，清單。
- 清單，清單，清單。清單，清單，清單。
清單中可以 shift + enter 換行 - 清單，清單，清單。清單，清單，清單。
來看看一些文字效果與超連結
- 粗體 Bold
- 斜體 Italic （中文請別使用斜體，因為中文沒有斜體）
- 底線 Underline
刪除線- 超連結
- 改變字型，這是新細明體（建議不要使用，除非必要）
- 改變文字大小，這是28px的文字大小（建議不要使用，除非必要）
- 改變文字顏色，這是紅色（建議不要使用，除非必要）
- 改變文字背景色，背景色是黃的（建議不要使用，除非必要）
為什麼不建議調整字型、文字大小和文字顏色呢？原因是，設計網站時，文章內容各元素（例如標題、段落、連結等等）的樣式也會一併設計，若替部分元素額外添加或調整字型、文字大小和文字顏色時，其調整可能會使原本設計好的版面變雜亂，例如文字顏色與版面的主色調不搭產生違和感。而據我們觀察，很多時候使用者在上稿時甚至整篇把字型改掉或改變文字大小，這可能會造成網站整體美觀度與文章的易讀性下降。
文字靠左對齊
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
文字置中
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
文字靠右對齊
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
文字左右對齊
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
咦？樓上說好的左右對齊呢？其實是有的只是看不太出來，因為樓上的斷貨幾乎都是全形的字，如果多加一些半形的字就會比較明顯，例如：
這是有使用左右對齊段落文字。裡面夾雜了English。社會企業是什麼呢？A social enterprise is an organization that applies commercial strategies to maximize improvements in human and environmental well-being—this may include maximizing social impact alongside profits for external shareholders。社會企業（英文：social enterprise）是從英國興起的企業型態，目前並無統一的定義。概括而言，社會企業從事的是公益性事業，它通過市場機制來調動社會力量，將商業策略最大程度運用於改善人類和環境生存條件，而非為外在的利益相關者謀取最大利益。
如果沒用左右對齊，段落尾端可能會有不齊的情況發生，如下方段落：
這段文字沒有使用左右對齊。裡面夾雜了English。社會企業是什麼呢？A social enterprise is an organization that applies commercial strategies to maximize improvements in human and environmental well-being—this may include maximizing social impact alongside profits for external shareholders。社會企業（英文：social enterprise）是從英國興起的企業型態，目前並無統一的定義。概括而言，社會企業從事的是公益性事業，它通過市場機制來調動社會力量，將商業策略最大程度運用於改善人類和環境生存條件，而非為外在的利益相關者謀取最大利益。
然而，在文章中通常是避免使用左右對齊的，因為左右對齊可能會造成字與字之間被撐得太開以及每一行字與字之間被撐開的比例不一。
文字增加與減少縮排
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
我們認為，開放原始碼（Open Source）的精神不僅是公開成果，更是開放過程、集結智慧與累積資源。我們的產品和服務將以開放原始碼為基礎，除了提供專業服務以印證其對客戶的效益，並將保持開放精神，樂於合作和分享。此外，我們也將實質回饋公司利潤的20%，進行開放原始碼相關的推廣與研發工作。
我們在引言內放一些其他元素
這裡是引言應該要有自己的樣式，你看看，有沒有，沒有要跟攻城師反應，拜託拜託！在引言內放清單看看，要能正常顯示！
- hey
- hello
- yo
來看看表格
無框線表格
| 表頭要正確的樣式 | 表頭要正確的樣式 |
|---|---|
|
表格內的段落仍可有間距，可視情形將表格內的文字與間距微調小一點 若只是要換行一樣 |
格子內部的垂直對齊，預設是垂直置中（vertical-align: middle），建議改用垂直向上對齊（vertical-align: top） |
| 編輯器框線大小、儲存格間距、儲存格內距功能比較難實現，因為版型或模組等等可能會寫好預設的表格屬性，CSS 會優先於表格設定的這些屬性，也因此樣式會被 CSS 覆蓋掉。 | 當然你也可以清除掉這些預設屬性，注意，是清除掉，因為無法使用 CSS 屬性預設值覆寫的方式來處理。清除後這時編輯器的框線功能就可以用了。 |
被編輯器設定了框線、儲存格間距和儲存格內距的表格
| 表頭要正確的樣式 | 表頭要正確的樣式 |
|---|---|
|
表格內的段落仍可有間距，可視情形將表格內的文字與間距微調小一點 若只是要換行一樣 |
格子內部的垂直對齊，預設是垂直置中（vertical-align: middle），建議改用垂直向上對齊（vertical-align: top） |
| 編輯器框線大小、儲存格間距、儲存格內距功能比較難實現，因為版型或模組等等可能會寫好預設的表格屬性，CSS 會優先於表格設定的這些屬性，也因此樣式會被 CSS 覆蓋掉。 | 當然你也可以清除掉這些預設屬性，注意，是清除掉，因為無法使用 CSS 屬性預設值覆寫的方式來處理。清除後這時編輯器的框線功能就可以用了。 |
表頭可以透過修改儲存格設定來改變背景色
| 表頭可以改背景色 | 表頭可以改背景色 |
|---|---|
|
表格內的段落仍可有間距，可視情形將表格內的文字與間距微調小一點 若只是要換行一樣 |
格子內部的垂直對齊，預設是垂直置中（vertical-align: middle），建議改用垂直向上對齊（vertical-align: top） |
| 編輯器框線大小、儲存格間距、儲存格內距功能比較難實現，因為版型或模組等等可能會寫好預設的表格屬性，CSS 會優先於表格設定的這些屬性，也因此樣式會被 CSS 覆蓋掉。 | 當然你也可以清除掉這些預設屬性，注意，是清除掉，因為無法使用 CSS 屬性預設值覆寫的方式來處理。清除後這時編輯器的框線功能就可以用了。 |
無表頭的表格
當然，無論表格是否有表頭，你可以各別或複選儲存格並更改其背景色，儲存格亦可留白
| 無表頭 | 無表頭 | 無表頭 | 無表頭 |
| 無表頭 | 有背景色 | 有背景色 | 無表頭 |
| 無表頭 | 無表頭 | 無表頭 | 無表頭 |
| 無表頭 | 另一種背景色 | 無表頭 | |
| 無表頭 |
可以同時有垂直（行）與水平（列）的表頭
| 表頭 | 表頭 | 表頭 | 表頭 |
|---|---|---|---|
| 表頭 | 貼一些內容來看看吧 | 貼一些內容來看看吧 | 貼一些內容來看看吧 |
| 表頭 | 貼一些內容來看看吧 | 貼一些內容來看看吧 | |
| 表頭 | 貼一些內容來看看吧 | 貼一些內容來看看吧 | 貼一些內容來看看吧 |
圖片
一般圖片
有超連結的圖片
有圖說的圖片
文繞圖
圖片靠左靠右，建議用 CSS 寫好預設的邊距，才不會跟旁邊的文字黏再一起
靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片。
不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。靠左或靠右圖片，不應該黏住段落文字，但需要對齊左側或右側。
嵌入外部內容：
請使用編輯器裡的「Embed Media」功能，這樣嵌入的內容外層會有<div class="media_embed"></div>，如此一來攻城師就能使用 .embed_media 來做嵌入內容 的 RWD。
Youtube
Slideshare
Issuu
以下是沒有使用編輯器「Embed Media」功能而直接從原始碼或是編輯器插入 iframe 功能加入的 iframe，故不會在嵌入內容外層加上一個 wrapper，也就無法完全 RWD。
最後來個分隔線