canner slate editor
1.0.0
Rich Text / Wysiwyg Editor se concentre sur la modularité et l'extensibilité , construisez au-dessus du cadre d'ardoise avec de beaux conceptions et des API de haut niveau.
? Le rédacteur en chef de Canner-Slate est un éditeur modulé, tout est un module NPM! Vous pouvez composer à 100% à votre utilisation personnelle!
Étant donné que ce projet est à l'origine démarré de Canner, nous remarquons qu'il n'y a pas d'éditeur unique qui va dans toutes les variétés d'exigences, nous pensons donc que la seule façon de résoudre ce problème est de concevoir un éditeur modulaire d'abord.
Il existe de nombreux autres éditeurs de texte riche et WYSIWYG en ligne, mais en tant qu'arme - Pourquoi section mentionnait que la plupart de ces solutions sont
Par conséquent, ce référentiel essaiera de garder tous les avantages fourni par Slate Framework et créera des API de haut niveau pour les développeurs pourraient également réutiliser et personnaliser leur propre version de l'éditeur. Nous sommes également toujours les bienvenus à toutes sortes de contributions! ?
Ce projet utilise ANTD comme bibliothèque d'interface utilisateur primitive.
Pourquoi
L'un des inconvénients de l'utiliser, c'est qu'il augmentera la taille de votre bundle. Voir ici pour une solution
Vous devrez ajouter css et less de règles de test dans votre paramètre 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"
}
]
}
]
. . .Ces projets contient actuellement plus de 47 modules NPM , toutes les fonctionnalités sont emballées dans des modules NPM, tels que des icônes, des aides, des plugins, des utils, etc ..., ce qui permet aux développeurs de choisir des modules à assembler en vos propres usages.
Un autre éditeur de texte riche utilisant Slate Framework, avec un beau design
$ npm install --save canner-slate-editorVous devrez également installer
$ npm install antd slate slate-react
Un éditeur de Markdown, qui vous permet de modifier en direct avec Hot Keys Support!
$ npm install --save slate-md-editorVous devrez également installer
$ npm install antd slate slate-react
20+ Icônes en ardoise partagée et assistants pour les éditeurs en ardoise.
Caractéristiques prises en charge:
En savoir plus sur les icônes d'ardoise
Sélecteurs en ardoise partagés pour les éditeurs en ardoise.
Sélecteurs pris en charge:
En savoir plus sur les sélecteurs d'ardoise
Icônes Extrait de Quill Editor avec emballage des composants React, Prise en charge des icônes de 65+!
$ npm install --save quill-iconsUn ensemble de plugins en ardoise.
Un ensemble de modifications et de fonctions utilitaires pour les éditeurs en ardoise
Un ensemble de composants utilitaires d'éditeur.
Partagez les constantes par le biais de repos.
En savoir plus sur l'ardoise
Nous utilisons l'espace de travail yarn pour gérer tous les repos, en savoir plus sur l'espace de travail de Yarn
Pour installer des packages
yarn
Voir les démos
npm start
Vous devez créer des fichiers JS via Babel en entrant
yarn run build:watch
yarn jest <...path/to/pkg> [--coverage]
Slate est un framework d'éditeur puissant bien conçu qui vous aide à gérer des pièces difficiles lors de la construction d'un éditeur, tel que la modélisation des données, la mise à jour des états, le rendu, les schémas d'éditeur, la sérialisation ... (vous pourriez en savoir plus ici), pendant que vous essayez de construire vos propres éditeurs, il a toujours besoin de beaucoup d'efforts pour construire un simple magnifique éditeur avec le cadre.
Ce référentiel vise à fournir des éditeurs et des solutions de plugins complets qui vous permet de l'utiliser immédiatement, au lieu de creuser des documentations en ardoise et d'utiliser nos composants de haut niveau, vous pouvez presque créer des éditeurs sans aucune connaissance du cadre en ardoise à utiliser.
canner-slate-editor utilise une bibliothèque React impressionnante appelée Ant Design, la bibliothèque fournit de nombreux composants REACT couramment utilisés tels que l'influence, la table, le modal, etc ... qui est largement utilisé pour rendre nos éditeurs. L'un des inconvénients de l'utilisation de la bibliothèque est sa taille de faisceau. Si vous essayez de résoudre le problème de la taille, nous vous recommandons de suivre les solutions:
