The editor use React, Typescript, react-quill
- Store and Generate with HTMLformat
- Insert image Url and upload image to imgur
- Embeded video with full width and 16:9 ratio
- Basic editor function
styled-components is peerDependencies. If you don't install styled-components yarn add styled-components first.
yarn add @yosgo/editor
| props | required | type | description |
|---|---|---|---|
| value | yes | string | 編輯器中的內容，html 的字串內容 |
| onChange | yes | function (html: string) => void | 當編輯器改變時取得 html 內容，並執行自訂函式 |
| mode | no | string "normal", "simple" | 簡單模式僅支援粗體、文字超連結、圖片、影片。預設為正常模式 |
| imgurClientId | no | string | 圖片上傳至指定 imgur application。無此屬性編輯器僅提供貼上圖片網址的功能 |
| props | required | type | description |
|---|---|---|---|
| html | yes | string | 顯示 HTML 內容。透過 Viewer 元件，讓編輯情境與查看情境時的內容樣式保持一致 |
| Issue | 相關連結 | 狀態 |
|---|---|---|
| react-quill build issue solve with "esModuleInterop": true | Link | 修正 |
| react-quill build issue solve with "resolutions": {"@types/quill": "1.3.6" } | Link | 修正 |
| extra lines | Link | 修正 |
| BlockEmbed cause copy paste error | Link | 修正 |