medium draft
1.0.0
O desenvolvimento mais recente está acontecendo nesta filial.
Um editor de texto rico médio, construído em draft-js, com ênfase na eliminação do uso do mouse, adicionando atalhos relevantes do teclado.
Documentação em andamento.
Instale a versão beta usando
npm install medium-draft@beta
RETURN .caption - pode ser usada como legenda para blocos de mídia, como imagem ou vídeo, em vez de instâncias draft-js aninhadas para simplificar.block-quote-caption -Legenda para blockquote s.todo - TODO Texto com uma caixa de seleção.toolbarConfig para os seguintes estilos de bloco e embutido. Padrões para todos. Maiúsculas e minúsculas.block: ['ordered-list-item', 'unordered-list-item', 'blockquote', 'header-three', 'todo']inline: ['BOLD', 'ITALIC', 'UNDERLINE', 'hyperlink', 'HIGHLIGHT'] Alt/opção +
Esses comandos não fazem parte do editor principal, mas foram implementados no código de exemplo que usa o editor medium-draft .
localstorage .localstorage . -- o bloco atual for blockquote , ele será alterado para block-quote-caption , caso contrário, 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"> em <head><script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script> . O Medium-Draft está disponível no objeto global como MediumDraft . medium-draft fica no topo de draft-js com algumas funcionalidades e blocos embutidos. Sua API é quase a mesma que a de draft-js . Você pode dar uma olhada no código do editor de demonstração para ver a implementação.
Inclua o CSS que vem com a biblioteca em seu HTML -
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/medium-draft.css " > Se você estiver usando webpack para agrupamento, pode importar o CSS como este em seu código JS
import 'medium-draft/lib/index.css' ; Se você estiver usando sideButtons , também precisará incluir o CSS para font-awesome -
< link rel =" stylesheet " href =" //maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css " >ou algo equivalente.
No mínimo, você precisa fornecer adereços editorState e onChange , o mesmo que 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' )
) ; O Editor do medium-draft aceita um suporte chamado sideButtons . Por padrão, existe apenas um botão (imagem), mas você pode adicionar mais. O suporte sideButtons deve ser uma variedade de objetos com cada objeto com a seguinte assinatura:
{
"title" : "unique-button-name" ,
"component" : ButtonComponent
}Para ex:
{
"title" : "Image" ,
"component" : ImageSideButton
}Exemplo Código:
No momento, o botão de imagem simplesmente adiciona uma imagem dentro do editor usando URL.createObjectURL . Mas se você deseja fazer o upload da imagem primeiro ao seu servidor e adicione essa imagem ao editor, poderá seguir um dos 2 métodos:
Estenda o componente padrão ImageSideButton que vem com medium-draft .
Ou crie seu próprio componente com a funcionalidade completa.
Para simplificar, seguiremos o primeiro método. Se você estudar a implementação do ImageSideButton , verá um método onChange que recebe o evento de busca de arquivos, onde os arquivos selecidos estão disponíveis como event.target.files . Simplesmente substituiremos esse método, pois não queremos personalizar mais nada. Observe também que cada componente do botão lateral recebe a função getEditorState (retorna o rascunho editorState ), a função setEditorState(newEditorState) (define o novo EditorState) e a função close que você precisa chamar manualmente para fechar a lista de botões laterais:
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 }
/>
) ;
}
} ;Para remover completamente os botões laterais, para que o botão Adicionar Circular nunca apareça, basta passar uma matriz vazia:
sideButtons={[]}
Existem três adereços que você pode usar para personalizar os botões na barra de ferramentas que aparecem sempre que você seleciona texto dentro do editor:
blockButtonsinlineButtonstoolbarConfig Os botões do editor de nível de bloco padrão são ['header-three', 'unordered-list-item', 'ordered-list-item', 'blockquote', 'todo'] e os botões de editor em linha padrão ['BOLD', 'ITALIC', 'UNDERLINE', 'HIGHLIGHT', 'hyperlink'] .
Por exemplo, se você deseja manter os botões de bloco padrão e adicionar mais alguns, poderá fazer algo como o seguinte:
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 } . . . / > Se você deseja remover alguns botões ou reordená -los, poderá usar funções como array.slice no BLOCK_BUTTONS padrão e INLINE_BUTTONS , mas isso provavelmente é mais problemático do que vale a pena.
Para esse fim, é melhor usar o suporte 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 } . . . / > As seqüências de cordas dentro do block e matrizes inline devem corresponder ao atributo de style dentro de blockButtons e matrizes inlineButtons .
Para resumir: se você precisar adicionar, remover e reordenar os botões, provavelmente é mais fácil usar blockButtons , inlineButtons e toolbarConfig juntos.
Se os adereços de personalização da barra de ferramentas não forem suficientes para obter o comportamento desejado, você poderá injetar sua própria barra de ferramentas com o suporte ToolbarComponent .
Esse padrão é chamado de injeção de componente. Seu ToolbarComponent recebe os mesmos adereços que a barra de ferramentas padrão.
Se você deseja escrever seu próprio componente da barra de ferramentas, um bom lugar para começar é com o componente padrão.
O recurso para exportar HTML está disponível na versão 0.4.1 em diante.
medium-draft usa o Draft-Convert (que, por sua vez, usa o React-Dom-Server) para renderizar editorState do draft-js ao HTML.
O exportador não faz parte da biblioteca principal. Se você deseja usar medium-draft-exporter , siga estas etapas-
npm install draft-convert . draft-convert faz parte das peerDependencies de medium-draft .
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 > O exportador está disponível como MediumDraftExporter Global;
var mediumDraftExporter = MediumDraftExporter . default ;
const editorState = /* your draft editorState */ ;
const renderedHTML = mediumDraftExporter ( editorState . getCurrentContent ( ) ) ;
/* Use renderedHTML */ O medium-draft-exporter também vem com um CSS predefinido se você deseja aplicar alguns estilos básicos ao HTML renderizado.
Em Webpack, como parte da página de HTML renderizada, use isso-
import 'medium-draft/lib/basic.css'No navegador, em sua página de HTML renderizada, você pode incluir este link de folha de estilo
< link rel =" stylesheet " type =" text/css " href =" https://unpkg.com/medium-draft/dist/basic.css " >medium-draft-exporter para editorState O recurso para exportar HTML está disponível na versão 0.5.3 em diante.
medium-draft usa o Draft-Convert (que, por sua vez, usa o React-Dom-Server) para renderizar editorState do draft-js ao HTML.
O importador não faz parte da biblioteca principal. Se você quiser usar medium-draft-importer , siga estas etapas-
npm install draft-convert . draft-convert faz parte das peerDependencies de medium-draft .
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 > O importador está disponível como 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 . git clone https://github.com/brijeshb42/medium-draft.git .npm install react react-dom draft-convert && npm install .npm run dev . Isso iniciará um servidor local na porta 8080 .npm run build . Mit
