medium draft
1.0.0
この支店では最新の開発が進行中です。
関連するキーボードショートカットを追加することにより、マウスの使用を排除することに重点を置いて、ドラフトJS上に構築されたリッチなテキストエディターのような媒体。
進行中のドキュメント。
使用してベータ版をインストールします
npm install medium-draft@beta
RETURNプレスの適切な取り扱い。caption - 簡単にするために、ネストされたdraft-jsインスタンスの代わりに、画像やビデオなどのメディアブロックのキャプションとして使用できます。block-quote-caption - blockquoteのキャプション。todoチェックボックス付きの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 、その他の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><script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script>中ドラフトは、 GlobalオブジェクトでMediumDraftとして利用できます。medium-draftいくつかの機能とブロックが組み込まれたdraft-jsの上に座っています。そのAPIはdraft-jsのAPIとほぼ同じです。デモエディターのコードを見て、実装を確認できます。
HTMLにライブラリに付属のCSSを含めます -
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/medium-draft.css " >バンドリングにwebpackを使用している場合は、このようなCSSをJSコードにインポートできます
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 " >または同等のもの。
少なくとも、 draft-jsと同じように、 editorStateとonChange小道具を提供する必要があります。
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と呼ばれる小道具を受け入れます。デフォルトでは、1つの（画像）ボタンしかありませんが、さらに追加できます。 sideButtons Propは、各オブジェクトに次の署名を持つオブジェクトの配列でなければなりません。
{
"title" : "unique-button-name" ,
"component" : ButtonComponent
}exのために：
{
"title" : "Image" ,
"component" : ImageSideButton
}例コード：
現在、画像ボタンは、 URL.createObjectURLを使用してエディター内に画像を追加するだけです。ただし、最初にサーバーに画像をアップロードしてから、その画像をエディターに追加する場合は、2つの方法のいずれかに従うことができます。
medium-draftに付属のデフォルトのImageSideButtonコンポーネントを拡張します。
または、自分で完全な機能を使用して独自のコンポーネントを作成します。
簡単にするために、最初の方法に従います。 ImageSideButtonの実装を調査すると、選択されたファイルがevent.target.filesとして使用可能なファイルChooserイベントを受信するonChangeメソッドが表示されます。他のものをカスタマイズしたくないので、この方法をオーバーライドします。また、各サイドボタンコンポーネントは、 getEditorState関数（ドラフトeditorStateを返す）、 setEditorState(newEditorState)関数（新しい編集者を設定）、およびサイドボタンリストを閉じるために手動で呼び出す必要がある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={[]}
エディター内でテキストを選択するたびに表示されるツールバー内のボタンをカスタマイズするために使用できる3つの小道具があります。
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 */ medium-draft-exporterは、レンダリングされたHTMLに基本的なスタイルを適用する場合は、プリセットCSSも付属しています。
Webpackで、レンダリングされたHTMLのページの一部として、これを使用します -
import 'medium-draft/lib/basic.css'ブラウザには、レンダリングされたHTMLのページに、このStyleSheetリンクを含めることができます
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/basic.css " >medium-draft-exporterを使用してeditorStateにエクスポートした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を使用してビルド。 mit
