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.
| 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 元件，讓編輯情境與查看情境時的內容樣式保持一致 |
Example on CodeSandBox
| 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 |
修正 |