canner slate editor
1.0.0
Rich Text / Wysiwyg Editor Foco na modularidade e extensibilidade , construa sobre a estrutura de ardósia com belos desenhos e APIs de alto nível.
? Canner-Slate-Editor é um editor modulizado, tudo é um módulo NPM! Você pode 100% compor ao seu uso pessoal!
Como este projeto é originalmente iniciado da Canner, notamos que não há um editor único em todas as variedades de requisitos, por isso achamos que a única maneira de resolver esse problema é projetar um editor modular.
Existem muitos outros editores ricos em texto e wysiwyg on -line, mas como slate - por que a seção mencionou que a maioria dessas soluções é
Portanto, esse repositório tentará manter todas as vantagens que a estrutura de ardósia fornece e criar uma APIs de nível mais alto para os desenvolvedores também podem reutilizar e personalizar facilmente sua própria versão do editor. Também somos sempre bem -vindos a todos os tipos de contribuições! ?
Este projeto está usando o ANTD como nossa biblioteca primária da interface do usuário.
Por que
Uma das negativas de usá -lo é aumentar o tamanho do seu pacote. Veja aqui a solução
Você precisará adicionar css e less regras de teste na sua configuração de webpack.
...
rules : [
{
test : / .js$ / ,
use : {
loader : "babel-loader"
} ,
exclude : / node_modules /
} ,
{
test : / .css$ / ,
use : [
{
loader : "style-loader"
} ,
{
loader : "css-loader"
}
]
} ,
{
test : / .less$ / ,
use : [
{
loader : "style-loader"
} ,
{
loader : "css-loader"
} ,
{
loader : "less-loader"
}
]
}
]
. . .Atualmente, esses projetos contêm mais de 47 módulos NPM , todos os recursos são embalados em módulos NPM, como ícones, ajudantes, plugins, utils, etc ..., então isso permite que os desenvolvedores escolham módulos para montar em seus próprios usos.
Outro editor de texto rico usando estrutura de ardósia, com belo design
$ npm install --save canner-slate-editorVocê também precisará instalar
$ npm install antd slate slate-react
Um editor de Markdown, que permite editar ao vivo com o suporte de teclas quentes!
$ npm install --save slate-md-editorVocê também precisará instalar
$ npm install antd slate slate-react
Mais de 20 ícones compartilhados de ardósia e ajudantes para editores de ardósia.
Recursos suportados:
Aprenda mais icons ardósos
Seletores de ardósia compartilhados para editores de ardósia.
Seletores suportados:
Aprenda mais seletores de ardósia
Extrato de ícones do editor de quill com wrapper de componentes React, suporta mais de 65 ícones!
$ npm install --save quill-iconsUm conjunto de plug -ins slate.
Um conjunto de mudanças e funções de utilidade para editores de ardósia
Um conjunto de componentes do utilitário editor.
Compartilhar constantes através de repositórios.
Saiba mais constante de ardósia
Estamos usando o espaço de trabalho yarn para gerenciar todos os repositórios, aprenda mais sobre o espaço de trabalho de Yarn
Para instalar pacotes
yarn
Veja demos
npm start
Você precisa construir arquivos JS através de Babel entrando
yarn run build:watch
yarn jest <...path/to/pkg> [--coverage]
Slate é uma estrutura de editor poderosa bem projetada que ajuda você a lidar com peças difíceis ao criar um editor, como modelagem de dados, atualização de estados, renderização, esquemas de editor, serializando ... (você pode aprender mais aqui), enquanto está tentando construir seus próprios editores, ainda precisa de muitos esforços para construir um editor simples e bonito.
Esse repositório visa fornecer soluções completas de editores e plugins que permitem usá-lo imediatamente, em vez de cavar documentações de ardósia e usando nossos componentes de alto nível, você quase pode criar editores sem nenhum conhecimento da estrutura slate para usar.
canner-slate-editor está usando uma biblioteca de reações impressionante chamada Ant Design, a biblioteca fornece muitos componentes de reação comumente usados, como dica de ferramenta, tabela, modal, etc ... que é amplamente utilizado na renderização de nossos editores. Uma das desvantagens do uso da biblioteca é o tamanho do pacote. Se você está tentando resolver o tamanho do tamanho, recomendamos a seguir as soluções:
