iT邦幫忙

wysiwyg相關文章
共有 30 則文章
鐵人賽 Modern Web DAY 15

技術 Day 15. slate × Interfaces × Iteration

JS 的 Iteration 在 Slate 裡頭佔了不小的份量,即便有 Ref concepts 讓我們得以追蹤特定的 Location value ,在很...

鐵人賽 Modern Web DAY 10

技術 Day 10. slate × 架構藍圖

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

鐵人賽 Modern Web DAY 28

技術 Day 28. slate × Transforms × Node

最後終於來到了我們最後一個章節:『 Transforms 』。 Transform 在 slate package 裡頭也是佔了舉足輕重的地位,它提供了最 h...

鐵人賽 Modern Web DAY 1

技術 Day 1. Pre-Start × 微前言

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

鐵人賽 Modern Web DAY 27

技術 Day 27. slate × Normalizing × normalize

前一篇我們介紹了 Slate Normalizing 裡負責實作節點正規化以及讓使用者自定義 constraints 的主要函式: create-editor...

鐵人賽 Modern Web DAY 6

技術 Day 6. Compare × G2 × Quill

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

鐵人賽 Modern Web DAY 2

技術 Day 2. Pre-Start × WYSIWYG

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

鐵人賽 Modern Web DAY 3

技術 Day 3. Pre-Start × WYSIWYG × contenteditable

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

鐵人賽 Modern Web DAY 18

技術 Day 18. slate × Immutable × Immer & slate

ImmutableJS v.s. ImmerJS 舊版的 Slate 選擇 Immutable.js 這個套件去建立 Immutable object ,但...

鐵人賽 Modern Web DAY 5

技術 Day 5. Compare × G1

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

鐵人賽 Modern Web DAY 26

技術 Day 26. slate × Normalizing × normalizeNode

Slate 正規化的相關功能由兩個主要函式: interfaces/editor.ts 的 normalize method create-editor 編...

鐵人賽 Modern Web DAY 4

技術 Day 4. Compare × Generations

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

鐵人賽 Modern Web DAY 21

技術 Day 21. slate × Operation × Entrance

上一篇我們介紹了 interfaces/operations.ts 裡定義的 Operation types ,還沒看過的讀者們 傳送門 在此~ 接著從這一篇...

鐵人賽 Modern Web DAY 17

技術 Day 17. slate × Immutable

接著我們要進入到 slate 的下一個重點章節: Immutability 。 雖然這已經算是一個老生常談的主題了,但還是先讓我們稍微花點篇幅討論一下:什麼是...

鐵人賽 Modern Web DAY 12

技術 Day 12. slate × Interfaces × Data-Model

上一篇我們有提到上圖這些畫了黃框的 files ,是我們在建立 editor 與操作 editor value 時主要會使用到的概念。 同時介紹了 slate...

鐵人賽 Modern Web DAY 29

技術 Day 29. slate × Transforms × Selection & Text

上一篇我們統整了 NodeTransforms 裡各個 methods 的用法以及參數介紹, 傳送門 在此~ 這一篇同樣會以 reference 的形式統整...

鐵人賽 Modern Web DAY 24

技術 Day 24. slate × Normalizing

在開始繼續深入源碼之前,我們先花點篇幅討論 Normalizing 這回事。 Normalizing - 正規化,對資料庫稍有著墨的話對這個名詞一定不陌生。...

鐵人賽 Modern Web DAY 7

技術 Day 7. Compare × G2 × Draft

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

鐵人賽 Modern Web DAY 14

技術 Day 14. slate × Interfaces × Ref

相信有 React 開發經驗的讀者們對 Ref 這個詞一定不陌生。 其實 slate 裡頭的 Ref concept 與 React Ref 非常相似,同樣都...

鐵人賽 Modern Web DAY 11

技術 Day 11. slate × Interfaces × Document-Model

接下來的篇章我們會把目光聚焦於 interfaces/ 這個目錄底下的內容,想確認 slate package 完整的 src directory 的讀者們可...

鐵人賽 Modern Web DAY 22

技術 Day 22. slate × Operation × transform

今天的內容將延續 上一篇 文章中 Operation Process 裡的 3. ,同時我們會非常深入地去解析實現整個 transform function...

鐵人賽 Modern Web DAY 13

技術 Day 13. slate × Interfaces × Positioning

緊接著這一篇要來探討 slate 是如何實現『定位』這件事的。 在開發以 text 文字資料模型為主的功能時,有辦法精準地定位到特定的文字位置,甚至是文字集合...

鐵人賽 Modern Web DAY 23

技術 Day 23. slate × Operation × L-transform

上一篇文章我們深入瞭解了 Operation 的 transform function 是如何實作針對各種不同的 Operation types 的更新功能的...

鐵人賽 Modern Web DAY 9

技術 Day 9. Compare × Final

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

鐵人賽 Modern Web DAY 30

技術 Day 30. Goal × 微結語

一天過一天,終於走到了今天(撒花~ 從最一開始的 Pre-Start 篇章:帶讀者們認識 WYSIWYG 、瀏覽器的 contenteditable 屬性、...

鐵人賽 Modern Web DAY 19

技術 Day 19. slate × Operation × WeakMap

在正式開始介紹 Operation 的內容之前,先讓我們花一點篇幅來介紹一下『 WeakMap 』這個感覺有點偏冷門的主題。 即便對它不熟悉的讀者們,第一眼看...

鐵人賽 Modern Web DAY 8

技術 Day 8. Compare × G2 × Slate

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

鐵人賽 Modern Web DAY 20

技術 Day 20. slate × Operation × Interface

我們接下來就要進入到 slate 世界裡的另一大領域: Operations 。 這一整段章節其實也是筆者準備整個系列文章中數一數二期待的章節。因為在面對 W...

鐵人賽 Modern Web DAY 25

技術 Day 25. slate × Normalizing × Dirty-Path

我們在 上上一篇 也有提到過 slate 將 Normalizing 這項功能的實現拆成了第一步驟的『骯髒標記( Dirty-Path ) 』以及透過骯髒標記...

鐵人賽 Modern Web DAY 16

技術 Day 16. slate × Interfaces × CustomType

slate 將 typescript 的型別擴充相關的內容都集合在 interfaces/custom-types.ts 這個 file 裡面。 這個 fil...