YOSGO Editor

The editor use React, Typescript, react-quill

Feature

• 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

Get start

Install

styled-components is peerDependencies. If you don't install styled-components yarn add styled-components first.

yarn add @yosgo/editor

Editor props

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。無此屬性編輯器僅提供貼上圖片網址的功能

Viewer props

props	required	type	description
html	yes	string	顯示 HTML 內容。透過 Viewer 元件，讓編輯情境與查看情境時的內容樣式保持一致

Example

Example on CodeSandBox

Relative issue tracking

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	修正

Helpful resource

• Customize image upload and elements
• Ref in typescript
• Image update example
• quill-react use ref
• Ref easier way
• Embeded block customize
• Nest blot
• Imgur api reference
• Quill API doc
• I am a library author. Should I bundle styled-components with my library?