Como adicionar estilos ao TinyMCE & Markdown Content
Muitos escritores preferem trabalhando em Markdown porque é uma linguagem mais simples, com menos obstáculos para subir. É claro que está longe de ser perfeito, mas oferece visão mais limpa do seu texto com a facilidade de exportando para HTML.
Infelizmente, os estilos padrão de Markdown são geralmente muito chatos. Mas com o biblioteca de wysiwyg.css, você pode tenha um documento vibrante em pouco tempo.
Esta biblioteca CSS gratuita transforma todo o seu conteúdo básico do TinyMCE ou Markdown em blocos de HTML formatados e fáceis de ler.
Você não precisa conhecer nenhum HTML / CSS complexo para usar este plugin. Simplesmente embrulhe o conteúdo gerado em uma div com a turma .wysiwyg
, e está tudo pronto.
A dificuldade real é criar um aplicativo que automatize esse processo ou adicionar essa biblioteca ao back-end de um painel de administração do usuário.
No entanto, as possibilidades são infinitas, e você pode até usar isso para trabalho de escrita local se você preferir exportar seu conteúdo de Markdown para HTML.
Por padrão, esta biblioteca CSS suporte para todas as principais tags HTML imaginável. Isso inclui todos os cabeçalhos, listas, links, tags pré / código, figuras e até mesmo tags semi-obscuras, como e
. Há um lista completa no repo GitHub se você quiser dar uma olhada.
Se você definir seus próprios estilos tipográficos, eles podem reescreva as configurações padrão na folha de estilo. Então você pode obter todos os benefícios do wysiwyg.css misturado com suas próprias escolhas de fontes.
A biblioteca também não poderia ser mais fácil de configurar. Somente baixe uma cópia localmente ou puxe-o diretamente usando npm instala o wysiwyg.css
De lá, você só incluir o arquivo CSS na cabeça do seu documento e deixe-o rodar. Ele só segmentará o conteúdo dentro de um contêiner com a turma .wysiwyg
, então essa classe deve envolver qualquer recipiente que você quiser.
A biblioteca ainda está sendo atualizado com frequência, então você pode encontrar atualizações recentes no repo principal do GitHub. E se você tiver sugestões ou ideias para novas atualizações, fique à vontade para compartilhar com o criador Jeremy Thomas em sua página no Twitter @jgthms.