medium draft
1.0.0
該分支機構正在進行最新發展。
像富文本編輯器這樣的媒介建立在草稿JS上的媒介，重點是通過添加相關的鍵盤快捷鍵來消除鼠標使用情況。
正在進行的文檔。
使用Beta版本使用
npm install medium-draft@beta
RETURN按壓。caption - 可用於諸如圖像或視頻之類的媒體塊的標題，而不是嵌套的draft-js實例，以簡單。block-quote-caption - blockquote s的標題。todo帶有復選框的文字。toolbarConfig易於自定義的工具欄，以進行以下塊和內聯樣式。默認為所有人。區分大小寫。block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT'] alt/option +
這些命令不是核心編輯器的一部分，而是在使用medium-draft編輯器的示例代碼中實現的。
localstorage 。localstorage中保存了以前保存的數據。 --如果當前塊為blockquote ，則將其更改為block-quote-caption ，Else caption 。*. (An asterisk and a period) - unordered-list-item 。*<SPACE> (An asterisk and a space) - unordered-list-item 。-<SPACE> (A hyphen and a space) - unordered-list-item 。1. (The number 1 and a period) - unordered-list-item 。## - header-two 。[] - todo 。== - unstyled 。npm install medium-draft 。import Editor from 'medium-draft'<link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css"> in <head> in<script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> 。中等草稿可在全局對像中作為MediumDraft使用。medium-draft坐落在draft-js之上，其中一些內置功能和塊。它的API幾乎與draft-js相同。您可以查看演示編輯器的代碼以查看實現。
在您的HTML中包括庫中的CSS-
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/medium-draft.css " >如果您正在使用webpack進行捆綁，則可以在JS代碼中導入這樣的CSS
import 'medium-draft/lib/index.css' ;如果您使用的是sideButtons ，則還需要包括font-awesome的CSS-
< link rel =" stylesheet " href =" //maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css " >或等效的東西。
至少，您需要提供editorState和onChange道具，與draft-js相同。
import React from 'react' ;
import ReactDOM from 'react-dom' ;
// if using webpack
// import 'medium-draft/lib/index.css';
import {
Editor ,
createEditorState ,
} from 'medium-draft' ;
class App extends React . Component {
constructor ( props ) {
super ( props ) ;
this . state = {
editorState : createEditorState ( ) , // for empty content
} ;
/*
this.state = {
editorState: createEditorState(data), // with content
};
*/
this . onChange = ( editorState ) => {
this . setState ( { editorState } ) ;
} ;
this . refsEditor = React . createRef ( ) ;
}
componentDidMount ( ) {
this . refsEditor . current . focus ( ) ;
}
render ( ) {
const { editorState } = this . state ;
return (
< Editor
ref = { this . refsEditor }
editorState = { editorState }
onChange = { this . onChange } />
) ;
}
} ;
ReactDOM . render (
< App /> ,
document . getElementById ( 'app' )
) ;medium-draft的Editor接受稱為sideButtons的道具。默認情況下，只有一個（圖像）按鈕，但是您可以添加更多。 sideButtons Prop必須是一個對像數組，每個對像都具有以下簽名：
{
"title" : "unique-button-name" ,
"component" : ButtonComponent
}for ex：
{
"title" : "Image" ,
"component" : ImageSideButton
}示例代碼：
目前，圖像按鈕只需使用URL.createObjectURL在編輯器內添加圖像。但是，如果您想首先將圖像上傳到您的服務器，然後將該圖像添加到編輯器，則可以遵循兩種方法之一：
要么擴展中等medium-draft的默認ImageSideButton組件。
或自己創建自己的組件。
為簡單起見，我們將遵循第一種方法。如果您研究ImageSideButton的實現，您將看到一種接收文件選擇器事件的onChange方法，其中包含的文件可作為event.target.files可用。我們只想自定義其他任何內容，我們將簡單地覆蓋此方法。另請注意，每個端按鈕組件都會接收getEditorState函數（返回草稿editorState ）， setEditorState(newEditorState)函數（設置新的EditorState）和close功能，您需要手動致電以關閉側面按鈕列表：
import React from 'react' ;
import {
ImageSideButton ,
Block ,
addNewBlock ,
createEditorState ,
Editor ,
} from 'medium-draft' ;
import 'isomorphic-fetch' ;
class CustomImageSideButton extends ImageSideButton {
/*
We will only check for first file and also whether
it is an image or not.
*/
onChange ( e ) {
const file = e . target . files [ 0 ] ;
if ( file . type . indexOf ( 'image/' ) === 0 ) {
// This is a post request to server endpoint with image as `image`
const formData = new FormData ( ) ;
formData . append ( 'image' , file ) ;
fetch ( '/your-server-endpoint' , {
method : 'POST' ,
body : formData ,
} ) . then ( ( response ) => {
if ( response . status === 200 ) {
// Assuming server responds with
// `{ "url": "http://example-cdn.com/image.jpg"}`
return response . json ( ) . then ( data => {
if ( data . url ) {
this . props . setEditorState ( addNewBlock (
this . props . getEditorState ( ) ,
Block . IMAGE , {
src : data . url ,
}
) ) ;
}
} ) ;
}
} ) ;
}
this . props . close ( ) ;
}
}
// Now pass this component instead of default prop to Editor example above.
class App extends React . Component {
constructor ( props ) {
super ( props ) ;
this . sideButtons = [ {
title : 'Image' ,
component : CustomImageSideButton ,
} ] ;
this . state = {
editorState : createEditorState ( ) , // for empty content
} ;
/*
this.state = {
editorState: createEditorState(data), // with content
};
*/
this . onChange = ( editorState ) => {
this . setState ( { editorState } ) ;
} ;
this . refsEditor = React . createRef ( )
}
componentDidMount ( ) {
this . refsEditor . current . focus ( ) ;
}
render ( ) {
const { editorState } = this . state ;
return (
< Editor
ref = { this . refsEditor }
editorState = { editorState }
onChange = { this . onChange }
sideButtons = { this . sideButtons }
/>
) ;
}
} ;要完全刪除側面按鈕，以使圓形添加按鈕永遠不會出現，只需傳遞一個空數組：
sideButtons={[]}
您可以使用三個道具來自定義工具欄中的按鈕，每當您在編輯器中選擇文本時出現：
blockButtonsinlineButtonstoolbarConfig默認的塊級編輯器按鈕是['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo']和默認的內聯編輯器按鈕['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] 。
例如，如果要保留默認塊按鈕並添加一些按鈕，則可以執行以下操作：
import { BLOCK_BUTTONS } from 'medium-draft' ;
const blockButtons = [ {
label : 'H1' ,
style : 'header-one' ,
icon : 'header' ,
description : 'Heading 1' ,
} ,
{
label : 'H2' ,
style : 'header-two' ,
icon : 'header' ,
description : 'Heading 2' ,
} ] . concat ( BLOCK_BUTTONS ) ;
// in your component
< Editor blockButtons = { blockButtons } . . . / >如果要刪除某些按鈕或重新排序，則可以使用默認BLOCK_BUTTONS和INLINE_BUTTONS上的array.slice之類的函數，但這可能比價值更多的麻煩。
為此，最好使用toolbarConfig道具：
// custom ordering for block and inline buttons, and removes some buttons
const toolbarConfig = {
block : [ 'unordered-list-item' , 'header-one' , 'header-three' ] ,
inline : [ 'BOLD' , 'UNDERLINE' , 'hyperlink' ] ,
}
< Editor toolbarConfig = { toolbarConfig } . . . / > block內部和inline數組中的字符串必須與blockButtons和inlineButtons數組中的style屬性匹配。
總結：如果需要添加，刪除和重新排序按鈕，則將blockButtons ， inlineButtons和toolbarConfig一起使用可能最容易。
如果工具欄自定義道具不足以獲取所需的行為，則可以將自己的工具欄注入ToolbarComponent配置道具。
該模式稱為組件注入。您的ToolbarComponent接收與默認工具欄相同的道具。
如果您想編寫自己的工具欄組件，那麼一個好的起點是默認組件。
導出HTML的功能可從0.4.1版本開始。
medium-draft使用草稿轉換（反過來使用React-Dom-Server）將draft-js的editorState置於HTML。
出口商不是核心庫的一部分。如果您想使用medium-draft-exporter ，請按照以下步驟進行操作 -
npm install draft-convert 。 draft-convert是medium-draft的peerDependencies的一部分。
import mediumDraftExporter from 'medium-draft/lib/exporter' ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */ < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-exporter.js " > </ script >出口商可作為MediumDraftExporter Global提供；
var mediumDraftExporter = MediumDraftExporter . default ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */如果您想在渲染的HTML上應用一些基本樣式， medium-draft-exporter還具有預設CSS。
在WebPack中，作為您渲染的HTML頁面的一部分，請使用此 -
import 'medium-draft/lib/basic.css'在瀏覽器中，在您渲染的HTML頁面中，您可以包含此樣式鏈接
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/basic.css " >medium-draft-exporter到editorState導出的HTML負載HTML導出HTML的功能可從0.5.3版本開始。
medium-draft使用草稿轉換（反過來使用React-Dom-Server）將draft-js的editorState置於HTML。
進口商不是核心庫的一部分。如果您想使用medium-draft-importer ，請按照以下步驟進行操作 -
npm install draft-convert 。 draft-convert是medium-draft的peerDependencies的一部分。
import { convertToRaw } from 'draft-js' ;
import { createEditorState } from 'medium-draft' ;
import mediumDraftImporter from 'medium-draft/lib/importer' ;
const html = /* your previously exported html */ ;
const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
// Use this editorState < script src =" https://unpkg.com/[email protected]/dist/react-dom-server.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/draft-convert.min.js " > </ script >
< script src =" https://unpkg.com/medium-draft/dist/medium-draft-importer.js " > </ script >進口商可作為MediumDraftImporter Global提供；
const { convertToRaw } = Draft ;
const { createEditorState } = MediumDraft ;
const mediumDraftImporter = MediumDraftImporter . default ;
const html = /* your previously exported html */ ;
const editorState = createEditorState ( convertToRaw ( mediumDraftImporter ( html ) ) ) ;
// Use this editorStatemedium-draft HTML的導出器。 git clone https://github.com/brijeshb42/medium-draft.git 。npm install react react-dom draft-convert && npm install 。npm run dev 。這將在端口8080上啟動本地服務器。npm run build 。 麻省理工學院
