re editor
v0.5.8
Um editor de texto Rich Rich
Para se adaptar a diferentes necessidades de desenvolvimento, o editor fornece os dois métodos de uso a seguir.
O reeditor é um componente encapsulado que pode ser usado após a instalação. Ele contém @reeditor/núcleo e @reeditor/ferramenta-barra. A barra de ferramentas usa o estilo ANTD por padrão. Se você deseja usar outras barras de ferramentas, consulte o seguinte documento personalizado
$ npm install re-editorIntroduzido em JS
import 're-editor/lib/styles/index.css'Também pode ser introduzido no CSS (requer suporte de pré -processamento de CSS)
@import 're-editor/lib/styles/index.css'| propriedade | ilustrar | tipo |
|---|---|---|
| valor | Valor do editor | objeto |
| OnChange | Retorno de chamada para o editor Altera o conteúdo | (valor: valor) => void |
| espaço reservado | Texto de espaço reservado | corda |
| Readonly | Modo somente leitura | booleano |
| OnImageUpload | Cama de imagem personalizada | (arquivo: arquivo) => Promise <url: string> |
| ferramentas | Defina o teor de exibição da barra de ferramentas | Array <Array |
Ferramentas Formulário de suporte de tools props , se for uma matriz bidimensional, será exibida em grupos
tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
[ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
[ 'orderedlist' , 'unorderedlist' ]
] }| nome | Função |
|---|---|
| audacioso | Audacioso |
| itálico | itálico |
| sublinhado | Sublinhado |
| Strikethrough | Excluir linha |
| Lista ordenada | Lista ordenada |
| Lista não ordenada | Lista não ordenada |
| Cabeçalho | título |
| alinhar | Alinhamento |
| imagem | foto |
| mesa | folha |
| código | Código |
| desfazer | Revogar |
| refazer | Retrabalho |
| tela cheia | tela cheia |
O editor é dividido em duas partes, a área de edição de conteúdo e a barra de ferramentas. A seguir descreve como personalizar a barra de ferramentas
$ npm install @re-editor/coreVocê pode criar uma barra de ferramentas do editor de qualquer maneira. Você precisa passar a instância do editor para a barra de ferramentas. Você pode consultar a implementação do Reeditor e @Reeditor/ToolBar-Antd para visualizar a documentação da API para obter detalhes (esta parte do documento ainda não foi escrita, será concluído em um futuro próximo?)
Por exemplo, implemente uma função ousada:
import { command } from '@re-editor/core' ;
const Demo = ( props ) => {
function handleClick ( ) {
command ( props . editor ) ( 'bold' )
}
return < div onClick = { handleClick } > bold </ div >
} Ardósia ou rascunho não é um editor puro, eles são mais como uma estrutura para editores de construção. O reeditor é desenvolvido com base no slate, para que você não precise prestar atenção ao processo de构建编辑器.
O estilo é dividido em duas partes, nó (negrito, H1, H2, etc.) e a barra de ferramentas. Todos eles podem reescrever o estilo básico através do CSS, e a barra de ferramentas também pode reescrever completamente o estilo através do CSS.
Usando atualização incremental, o valor do retorno de chamada do OnChange está no formato imutável. Você pode usar o imutável-js-hiff e outros métodos para obter o conteúdo do diff para atualização incremental
A imagem é salva como base64 por padrão. Se você precisar fazer o upload da imagem para o servidor especificado, poderá usar a função onImageUpload , ((arquivo: arquivo) => Promise <url: string> Código de amostra
斜体粗体下划线删除线下标
有序列表无序列表
左对齐居中对齐右对齐两端对齐
h1 h2 h3 h4 h5 h6
图片表格代码高亮markdown#>-1.Outras funções continuam a aumentar ...
