tui.editor

GFM Markdown e Wysiwyg Editor - produtivo e extensível

Índice

• Pacotes
• Por que brindar editor de interface do usuário?
• Características
• Exemplos
• Suporte do navegador
• Puxe as etapas de solicitação
• Contribuindo
• Família da UI do brinde
• Usado por
• Licença

? Pacotes

Editor de interface do usuário do brinde

Nome	Descrição
@toast-ui/editor	Componente JavaScript simples

Brinquedos do editor de interface do usuário do UI

Nome	Descrição
@toast-ui/react-editor	Componente do Wrapper React
@toast-ui/vue-editor	Componente de Wrapper Vue

Plugins do editor de interface do usuário do brinde

Nome	Descrição
@toast-ui/editor-plugin-chart	Plug -in para renderizar gráfico
@toast-ui/editor-plugin-code-syntax-highlight	Plug -in para destacar a sintaxe do código
@toast-ui/editor-plugin-color-syntax	Plugin para text de edição de cores
@toast-ui/editor-plugin-table-merged-cell	Plug -in para mesclar colunas de tabela
@toast-ui/editor-plugin-uml	Plug -in para render UML

? Por que brindar editor de interface do usuário?

O editor de interface do usuário do Toast fornece o modo de marcação e o modo wysiwyg . Dependendo do tipo de uso que você deseja como produção de Markdown ou talvez apenas editar o Markdown . O editor de interface do usuário do brinde pode ser útil para o uso. Oferece modo de marcação e modo WYSIWYG , que podem ser alternados em qualquer momento.

Modo de marcação produtivo

Commonmark + GFM Especificações

Hoje, o Commonmark é o padrão de marcação de fato. O GFM (Markdown com sabor do GitHub) é outra especificação popular baseada na Larca Common - mantida pelo Github , que é o markdown usado principalmente. O editor de interface do usuário do brinde segue as especificações do Commonmark e do GFM . Escreva documentos com facilidade usando ferramentas produtivas fornecidas pelo editor de interface do usuário do Toast e você pode abrir facilmente o documento produzido onde quer que as especificações sejam suportadas.

• Visualização ao vivo : edite o Markdown, mantendo um olho no HTML renderizado. Suas edições serão aplicadas imediatamente.
• Roll Sync : rolagem síncrona entre Markdown e Visualizar. Você não precisa percorrer cada um separadamente.
• Sintaxe Destaque : você pode verificar a sintaxe de marcação quebrada imediatamente.

Modo WYSIWYG fácil

• Tabela : Através do menu de contexto da tabela, você pode adicionar ou excluir colunas ou linhas da tabela e também pode organizar o texto nas células.
• Editor de blocos personalizados : A área de bloco personalizada pode ser editada através do editor interno.
• Copie e cole : Cole qualquer coisa, desde navegador, captura de tela, Excel, PowerPoint, etc.

Ui

• Barra de ferramentas : através da barra de ferramentas, você pode estilizar ou adicionar elementos ao documento que está editando.

• Tema sombrio : você pode usar o tema sombrio.

Uso de várias funções estendidas - plugins

Commonmark e GFM são ótimos, mas geralmente precisamos de mais abstração. O editor de interface do usuário do Toast vem com plugins poderosos em conformidade com a sintaxe do Markdown.

Cinco plug -ins básicos são fornecidos da seguinte forma e podem ser baixados e usados com o NPM.

• chart : Um bloco de código marcado como um 'gráfico' renderizará o gráfico da interface do usuário do brinde.
• code-syntax-highlight : Destaque a área do bloco de código correspondente ao idioma fornecido pelo Prism.js.
• color-syntax : Usando o Toast UI Colorpicker, você pode alterar a cor do texto de edição com a GUI.
• table-merged-cell : você pode mesclar colunas do cabeçalho da tabela e da área do corpo.
• uml : Um bloco de código marcado como um 'Uml' renderá diagramas uml.

? Características

• Visualizador: suporta um modo para exibir apenas dados de marcação sem uma área de edição.
• Internacionalização (I18N): apóia inglês, holandês, coreano, japonês, chinês, espanhol, alemão, russo, francês, ucraniano, turco, finlandês, tcheco, árabe, polonês, galego, sueco, italiano, norueguês, croata + idioma e você pode se estender.
• Widget: esse recurso permite configurar as regras que substituem a string correspondente a um RegExp específico pelo nó do widget.
• Bloco personalizado: os nós não suportados pelo Markdown podem ser definidos através do bloco personalizado. Você pode exibir o nó o que deseja escrever a lógica de análise com bloco personalizado.

? Exemplos

• Básico
• Espectador
• Usando todos os plugins
• Criando o plugin do usuário
• Personalizando os botões Toobar
• Internacionalização (I18n)

Aqui estão mais exemplos e brincar com o Toast UI Editor!

? Suporte do navegador

Cromo	Internet Explorer	Borda	Safári	Firefox
Sim	11+	Sim	Sim	Sim

? Puxe as etapas de solicitação

Os produtos da interface do usuário do brinde são de código aberto, para que você possa criar uma solicitação de tração (PR) após corrigir os problemas. Execute scripts do NPM e desenvolva -se com o processo a seguir.

Configurar

Filial main do Fork para o seu repositório pessoal. Clone -o para o computador local. Instale os módulos do nó. Antes de iniciar o desenvolvimento, você deve verificar se há algum erro.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

O editor de interface do usuário do Toast usa o espaço de trabalho do NPM, então você precisa definir o ambiente com base no NPM7. Se a subversão for usada, as dependências devem ser instaladas movendo caminhos diretos por pacote.

Desenvolver

Você pode ver seu código refletido assim que salvar o código executando um servidor. Não perca a adição de casos de teste e faça direitos verdes.

Execute o Snowpack-Dev-Server

O Snowpack permite que você execute um servidor de desenvolvimento sem agrupamento.

$ npm run serve editor

Execute webpack-dev-server

Se for necessário teste de navegadores herdados, o servidor de desenvolvimento ainda poderá ser executado usando um webpack.

$ npm run serve:ie editor

Executar teste

$ npm test editor

Solicitação de puxar

Antes de fazer o upload do seu PR, execute o teste uma última vez para verificar se há algum erro. Se não tiver erros, comprometa e depois pressione!

Para obter mais informações sobre as etapas da RP, consulte os links na seção contribuinte.

Contribuindo

• Código de Conduta
• Diretriz contribuindo
• Convenção cometer
• Diretrizes de emissão

? Família da UI do brinde

• Calendário da UI do brinde
• Trua gráfico da interface do usuário
• Brinque a grade da interface do usuário
• Brincho do editor de imagem da interface do usuário
• Brinde componentes da interface do usuário

Usado por

• NHN PAWORAY! - Serviço de colaboração (projeto, mensageiro, correio, calendário, unidade, wiki, contatos)
• UNOTES - Extensão do código do Visual Studio

Licença

Este software está licenciado sob o MIT © NHN Cloud.