1.1.0 • Published 5 years ago

hh-slate-editor v1.1.0

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

hh-slate-editor

Slate Editor customized by Hahow

Install

找 release 裡面的檔案,複製網址。例如:

npm install --save https://github.com/hahow/hh-slate-editor/releases/download/1.0.1/hh-slate-editor-1.0.1.tgz

or

yarn add https://github.com/hahow/hh-slate-editor/releases/download/1.0.1/hh-slate-editor-1.0.1.tgz

ScreenShot

npm.io

Usage

Example

import React, { Component } from 'react';

import SlateEditor from 'hh-slate-editor';

class Demo extends Component {
  constructor (props) {
    super(props);
    this.state = {
      value,
    };
  }

  onChange = (newValue) => {
    this.setState({
      value: newValue,
    });
  }

  uploadImage = (file, fulfilledCallback) => {
    // You need to implement the function to upload image
  }

  onWarning = (msg) => {
  }

  render () {
    return (
      <SlateEditor
        value={value}
        onChange={this.onChange}
        debounceTime={250}
        height={350}
        debugMode={false}
        uploadImage={this.uploadImage}
        onWarning={this.onWarning}
        normalizeValue={false}
        normalizePastedValue={false}
        errorMessage=""
      />
    );
  }
}

Props Explanation

proptypeexplanationdefault value
valueString編輯器文字內容 (html string)"<p></p>"
onChange(newValue)function內容有更改時的 onChange。會有 debounce,時間為 debounceTimenewValue 為更動後新的值。
debounceTimeNumberdebounce time (in 毫秒)250
heightNumber編輯器預設的寬度 (in px)350
uploadImage(file, fulfilledCallback)function上傳圖片的 function。 file 為 file reference object ,包含 type, name 等參數。 fulfilledCallback 為上傳完成後執行的 callback function
normalizePastedValueboolean是否在複製、貼上時,執行 normalize html string 的功能。true
debugModeboolean(平常不會用到) 是否開啟 debug 模式
onWarning(text)function(平常不會用到) 編輯器內部在某些無法處理的情況下,可以噴輸出警告訊息。
normalizeValueboolean(平常不會用到) 是否在每一次更新內容時,重新 normalize html string ,以符合 slate editor 的格式。這個功能基本上只有在換編輯器時會用到。false
errorMessageString(平常不會用到) 顯示在編輯器下方的警告文字""(空字串)

Run example

  cd ./example
  yarn start