tui.editor TOLUDING - TUIDER tui.editor CODE SOURCE Téléchargement

tui.editor

Autres ressources

[email protected]

Télécharger

GFM Markdown et éditeur WYSIWYG - Productif et extensible

Table des matières

Packages
Pourquoi Toast UI Editor?
Caractéristiques
Exemples
Support de navigateur
Étapes de demande de tirage
Contributif
Famille d'interface utilisateur
Utilisé par
Licence

? Packages

Éditeur d'interface utilisateur de toast

Nom	Description
`@toast-ui/editor`	Composant JavaScript ordinaire

Les emballages de l'éditeur d'interface utilisateur de toast

Nom	Description
`@toast-ui/react-editor`	Composant React Wrapper
`@toast-ui/vue-editor`	Vue Wrapper Component

Plugins de l'éditeur d'interface utilisateur de toast

Nom	Description
`@toast-ui/editor-plugin-chart`	Plugin to Render Chart
`@toast-ui/editor-plugin-code-syntax-highlight`	Plugin pour mettre en surbrillance la syntaxe du code
`@toast-ui/editor-plugin-color-syntax`	Plugin to Color l'édition de texte
`@toast-ui/editor-plugin-table-merged-cell`	Plugin pour fusionner les colonnes de table
`@toast-ui/editor-plugin-uml`	Plugin pour rendre UML

? Pourquoi Toast UI Editor?

L'éditeur d'interface utilisateur Toast fournit le mode Markdown et le mode WYSIWYG . Selon le type d'utilisation que vous souhaitez comme la production de Markdown ou peut-être simplement modifier la marque . L'éditeur d'interface utilisateur de toast peut être utile à la fois pour l'utilisation. Il propose le mode Markdown et le mode WYSIWYG , qui peut être commuté n'importe quel point dans le temps.

Mode Markdown productif

réduction

Commonmark + GFM Spécifications

Aujourd'hui, Commonmark est la norme de marque de facto. GFM (Markdown aromatisé GitHub) est une autre spécification populaire basée sur Commonmark - entretenu par GitHub , qui est la marque principalement utilisée. L'éditeur d'interface utilisateur de toast suit les spécifications Commonmark et GFM . Écrivez des documents avec facilité en utilisant des outils productifs fournis par Toast UI Editor et vous pouvez facilement ouvrir le document produit partout où les spécifications sont prises en charge.

Aperçu en direct : modifiez la marque tout en gardant un œil sur le HTML rendu. Vos modifications seront appliquées immédiatement.
Scroll Sync : défilement synchrone entre Markdown et Aperçu. Vous n'avez pas besoin de faire défiler chacun séparément.
Piltant de syntaxe : vous pouvez vérifier immédiatement la syntaxe de Markdown.

Mode wysiwyg facile

wysiwyg

Tableau : Grâce au menu contextuel de la table, vous pouvez ajouter ou supprimer des colonnes ou des lignes de la table, et vous pouvez également organiser du texte dans les cellules.
Éditeur de bloc personnalisé : la zone de bloc personnalisée peut être modifiée via l'éditeur interne.
Copier et coller : collez n'importe quoi à partir du navigateur, de la capture d'écran, d'excel, de PowerPoint, etc.

Ui

Barre d'outils : via la barre d'outils, vous pouvez styliser ou ajouter des éléments au document que vous modifiez.
Thème sombre : vous pouvez utiliser le thème sombre.

Utilisation de diverses fonctions étendues - Plugins

plugin

Le COMMONMARK et le GFM sont excellents, mais nous avons souvent besoin de plus d'abstraction. L'éditeur d'interface utilisateur Toast est livré avec des plugins puissants conformément à la syntaxe de Markdown.

Cinq plugins de base sont fournis comme suit, et peuvent être téléchargés et utilisés avec NPM.

chart : Un bloc de code marqué en «graphique» rendra le graphique UI de toast.
code-syntax-highlight : mettez en surbrillance la zone de bloc de code correspondant à la langue fournie par Prism.js.
color-syntax : Utilisation de Toast UI ColorPicker, vous pouvez modifier la couleur du texte d'édition avec l'interface graphique.
table-merged-cell : Vous pouvez fusionner les colonnes de l'en-tête de la table et de la zone du corps.
uml : Un bloc de code marqué en «UML» rendra les diagrammes UML.

? Caractéristiques

Visionneuse: prend en charge un mode pour afficher uniquement les données de marque sans zone d'édition.
Internationalisation (i18n): soutient l'anglais, le néerlandais, le coréen, le japonais, le chinois, l'espagnol, l'allemand, le russe, le français, l'Ukrainien, le turc, le finlandais, le tchèque, l'arabe, le polonais, le galicien, le suédois, l'italien, la langue norvégienne, la langue croate + et vous pouvez étendre.
Widget: Cette fonctionnalité vous permet de configurer les règles qui remplacent la chaîne correspondant à un RegExp spécifique par le nœud du widget.
Bloc personnalisé: les nœuds non pris en charge par Markdown peuvent être définis via un bloc personnalisé. Vous pouvez afficher le nœud ce que vous voulez en écrivant la logique d'analyse avec un bloc personnalisé.

? Exemples

Basique
Téléspectateur
Utilisation de tous les plugins
Création du plugin de l'utilisateur
Personnalisation des boutons Toobar
Internationalisation (I18N)

Voici plus d'exemples et jouez avec Toast UI Editor!

? Support de navigateur

Chrome	Internet Explorer	Bord	Safari	Incendier
Oui	11+	Oui	Oui	Oui

? Étapes de demande de tirage

Les produits d'interface utilisateur de toast sont open source, vous pouvez donc créer une demande de traction (PR) après avoir résolu les problèmes. Exécutez des scripts NPM et développez-vous avec le processus suivant.

Installation

Fork main de la branche dans votre référentiel personnel. Connez-le à l'ordinateur local. Installez les modules de nœud. Avant de commencer le développement, vous devez vérifier s'il y a des erreurs.

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

L'éditeur d'interface utilisateur Toast utilise NPM Workspace, vous devez donc définir l'environnement en fonction de NPM7. Si la subversion est utilisée, les dépendances doivent être installées en déplaçant des chemins directs par package.

Développer

Vous pouvez voir votre code reflété dès que vous enregistrez le code en exécutant un serveur. Ne manquez pas d'ajout de cas de test, puis faites des droits verts.

Exécutez Snowpack-DEV-Server

Snowpack vous permet d'exécuter un serveur de développement sans regroupement.

$ npm run serve editor

Exécuter webpack-dev-server

Si des tests de navigateurs hérités sont nécessaires, le serveur de développement peut toujours être exécuté à l'aide d'un webpack.

$ npm run serve:ie editor

Test d'exécution

$ npm test editor

Projeter

Avant de télécharger votre PR, exécutez le test une dernière fois pour vérifier s'il y a des erreurs. S'il n'a pas d'erreurs, engagez-le puis poussez-le!

Pour plus d'informations sur les étapes de PR, veuillez consulter les liens dans la section contributive.