iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

深入 slate.js x 一起打造專屬的富文字編輯器吧! 系列

覺得只用 <input> 、 <textarea> 做出來的文字編輯器看起來很 low 嗎?
想做個互動效果十足、炫砲感滿滿的文字編輯器,卻無法有系統性地管理 & 製作功能嗎?
用 Medium 寫文章寫這麼久,甚至報名參加 IThome 鐵人賽的你,卻連 WYSIWYG 都沒聽過?!

不怕!

就讓我們用 30 天的時間,一步一步地探索『富文本編輯器 feat. slate.js 』的世界

鐵人鍊成 | 共 30 篇文章 | 15 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1. Pre-Start × 微前言

行前導讀 第一次參加鐵人賽的你,先禮貌性來個自我介紹吧?! 嗨大家好! This is Ian , 24 歲身心理男。 Position : RD —...

2021-09-16 ‧ 由 boogieyan1997 分享
DAY 2

Day 2. Pre-Start × WYSIWYG

那個 W 開頭的 你是不是看我書讀得少,想隨便拿一串英文符號呼隆我? 這誤會可不是普通的小啊!必須道個歉。聽說合格的道歉露出胸部是基本,那這邊就......

2021-09-17 ‧ 由 boogieyan1997 分享
DAY 3

Day 3. Pre-Start × WYSIWYG × contenteditable

誠如上一篇結尾所說,我們今天要把目光聚焦在瀏覽器提供的 contenteditable 屬性以及 execCommand api ,這兩個瀏覽器默認,用於製作...

2021-09-18 ‧ 由 boogieyan1997 分享
DAY 4

Day 4. Compare × Generations

經過了三天的文章後,我們總算要進到新的『 Compare 』篇章了。 前兩天我們介紹了 WYSIWYG 一詞本身所代表的涵意,並列舉了一些市面上知名的應用,並接...

2021-09-19 ‧ 由 boogieyan1997 分享
DAY 5

Day 5. Compare × G1

The World of G1 G1 的編輯器在網路還沒進入到前端 framework 御三家(Angular、React、Vue)之前就已經存在了 在 W...

2021-09-20 ‧ 由 boogieyan1997 分享
DAY 6

Day 6. Compare × G2 × Quill

Quill 是整個第二世代編輯器的開山始祖,也是第一個嘗試脫離瀏覽器掌控的叛逆份子,目前在 Github 的 star 數量已經超過 30k 了。 附上 Qu...

2021-09-21 ‧ 由 boogieyan1997 分享
DAY 7

Day 7. Compare × G2 × Draft

接下來的 Draft 與 Slate 就是提供建立編輯器環境為主的 Framework Library 了,如果對這個名詞不太熟悉的話可以回頭去看 Day5...

2021-09-22 ‧ 由 boogieyan1997 分享
DAY 8

Day 8. Compare × G2 × Slate

這一篇是這一系列 Libraries 比較文實質性的最後一篇了,在下一篇稍做總結以後接著我們就要正式進入到 source-code 解析的篇章了! 這篇我們主...

2021-09-23 ‧ 由 boogieyan1997 分享
DAY 9

Day 9. Compare × Final

Conclusion 呼~到今天為止 9 天過去了,Libraries 之間的比較篇章也到今天告一個段落。 今天就來對這個章節做個小小總結。(言下之意就是準...

2021-09-24 ‧ 由 boogieyan1997 分享
DAY 10

Day 10. slate × 架構藍圖

在開始今天的主題前,雖然在前面介紹 Slate 時已經有稍微提到過了,我們還是先從 slate 的各個 packages 分別負責的領域開始介紹起。 sl...

2021-09-25 ‧ 由 boogieyan1997 分享