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 。 麻省理工学院
