Multiprova - Editor
Editor HTML do Multiprova.
Como instalar?
Para instalar o @multiprova/editor
em seu projeto, instale a biblioteca como dependência via npm:
$ npm install @multiprova/editor
Como usar?
A utilização do @multiprova/editor
é simplificada, basta importar em um componente e começar a usar:
import React, { Component } from 'react'
import { Editor } from '@multiprova/editor'
export default class Example extends Component {
render() {
return <Editor />
}
}
O componente se apresentará da seguinte maneira:
Propriedades (Props)
O <Editor />
recebe algumas props que modificam diretamente seu comportamento:
Nome da propriedade | Descrição | Tipo | Valor padrão |
---|---|---|---|
html |
Elemento html usado para encapsular o texto | string |
<p></p> |
rows |
Número de linhas | number |
1 |
floatingToolbar |
Barra de ferramentas flutuante | boolean |
false |
justifyDefault |
Alinhamento textual justificado | boolean |
true |
spellCheck |
Verificação ortográfica | boolean |
true |
readOnly |
Somente leitura | boolean |
false |
adornment |
Adorno do campo Recebe um objeto Adornment |
object |
{ align: 'right', onEvent: false } |
placeholder |
Texto de descrição do campo | string |
'' |
autoFocus |
Foco automático | boolean |
false |
onChange |
Função disparada ao alterar o valor do texto | function |
() => {} |
onFocus |
Função disparada quando o campo está em foco | function |
() => {} |
onBlur |
Função disparada quando o campo perde o foco | function |
() => {} |
enabledModules |
Objeto com módulos ativo e inativas para a barra de ferramentas | object |
{} |
upload |
Função de upload de mídia | function (file, nodeType) |
false |
defaultFontSize |
Tamanho padrão do texto | string |
"12pt" |
dynamicValues |
Conjunto de valores possíveis de uma questão | object[] |
[] |
Objetos
Adornment
{
align: 'left' | 'right',
onEvent: false | 'hover' | 'focus' | 'blur',
element: Elemento React
}
Como executar localmente
Para fazer modificações na biblioteca @multiprova/editor
localmente siga os seguintes passos:
- Instale a ferramenta Yalc globalmente:
$ npm install -g yalc
- Edite o arquivo
package.json
do editor e adicione o seguinte atributo ao objeto:
"files": [
"src"
]
- Acesse o repositório do editor no terminal e execute:
$ cd editor
$ yalc push
- Acesse no terminal o repositório que utiliza o editor como dependência e execute:
$ cd nome-repositorio
$ yalc add @multiprova/editor
$ yalc link @multiprova/editor
$ npm install
- Faça a importação do editor
import { Editor } from '@multiprova/editor/src'
- Para compilar qualquer alteração feita no editor, execute
yalc push
no terminal do@multiprova/editor
e o repositório que o utiliza como dependência irá compilar automaticamente. Não é preciso executarnpm start
no editor.
Como remover o repositório local
Para remover o repositório local das dependências, acesse o repositório que utiliza o editor como dependência e execute:
$ cd nome-repositorio
$ yalc remove @multiprova/editor
$ npm install
ATENÇÃO: Desfaça as alterações feitas no arquivo package.json
do editor e remova o '/src' do caminho da importação do editor. É importante que essas alterações não estejam em um commit para o repositório.