yosgo-editor

The editor use React, Typescript, react-quill

Usage no npm install needed!

<script type="module">
  import yosgoEditor from 'https://cdn.skypack.dev/yosgo-editor';
</script>

README

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) => any 當編輯器改變時取得 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

Helpful resource