Téléchargement pro editor - Téléchargement du code source pro editor

Proditeur

Le cadre et les composants de l'éditeur ultime

Anglais · 简体中文 · Changelog. RAPPORT BUG · Fonction de demande

Table des matières

? Installation

Important

Ce package est uniquement ESM.

Pour installer @ant-design/pro-editor , exécutez la commande suivante:

$ pnpm install @ant-design/pro-editor

Compiler avec next.js

Note

Par travail correct avec next.js ssr, ajoutez transpilePackages: ['@ant-design/pro-editor'] à next.config.js . Par exemple:

 const nextConfig = {
  transpilePackages : [ '@ant-design/pro-editor' , 'leva' , 'zustand' ] ,
} ;

? Usage

 import { SmileOutlined } from '@ant-design/icons' ;
import { ActionIcon } from '@ant-design/pro-editor' ;

export default ( ) => (
  < ActionIcon
    title = { 'Function button description' }
    icon = { < SmileOutlined /> }
    onClick = { ( ) => {
      alert ( 'Trigger action' ) ;
    } }
  />
) ;

Caractéristiques

Note

Les bibliothèques de composants frontaux ont révolutionné le développement, augmentant l'efficacité par ordres de grandeur et élevant l'expérience utilisateur. Pourtant, aussi mature que les bibliothèques comme Ant Design (ANTD) et les procompagants, on peut se demander s'il reste de la place pour l'innovation.

Autonomiser les caractéristiques de ProEditor

Note

Nous envisageons ProEditor comme la bibliothèque fondamentale des composants d'édition, semblables à ANTD, permettant aux développeurs de créer facilement des composants interactifs complexes avec une expérience utilisateur intrinsèquement supérieure. C'est la raison d'être du ProEditor .

Nos principes pour ProEditor:

? ️ Édition intuitive : prend en charge les interactions naturelles des utilisateurs comme les raccourcis multi-sélection, la désélection et les raccourcis clavier, assurant une expérience d'édition en douceur.
Ridé par défaut : améliore les composants de conception des fourmis pour offrir une expérience utilisateur supérieure avec plus de polonais et de raffinement.
? Flexibilité ouverte : offre des capacités au niveau atomique, offrant une large gamme de composants, de crochets et de fonctions utilitaires pour une personnalisation et une flexibilité approfondies.

Framework d'interface utilisateur et solutions de composants frontend dans le champ Editor:

Conseil

ProEditor se concentre sur l'élargissement des limites de la réalisation et l'augmentation de la gamme d'outils disponibles pour les développeurs pour la construction d'applications Web sophistiquées, interactives et axées sur l'utilisateur. Par exemple:

? DraggablePanel : permet des panneaux redonnables et mobiles, améliorant l'interactivité de l'interface utilisateur.
ColumnList : propose une liste de tri-sortable conviviale qui est gérable via des définitions de colonnes, simplifiant les interactions de liste complexe.
? FreeCanvas : fournit une toile zoomable similaire à des applications comme Sketch ou Figma, donnant aux utilisateurs un vaste espace pour la conception créative.
? IconPicker : un outil de sélection d'icônes compatible avec iconfont, ce qui facilite l'intégration d'une large gamme d'icônes dans la conception.
Collaboration en ligne : intègre des capacités multi-utilisateurs à l'aide de technologies comme YJS et Zustand Store, permettant l'édition et l'interaction collaboratives en temps réel.

Architecture du cadre

ProEditor est structuré pour faciliter efficacement ces principes.

? Vitrine

Montons certains des composants de signature de ProEditor:

DraggablePanel	Liste de colonnes
Pour les panneaux résidants et mobiles	Une liste de triable conviviale basée sur les définitions de colonnes

Freecanvas	Iconpicker
Une toile zoomable sans limite apparentée à Sketch ou Figma	Un outil de sélection d'icônes compatible avec iconfont

Collaboration en ligne
Capacités multi-utilisateurs enveloppées dans le magasin YJS et Zustand.

? Compatibilité du navigateur

Note

Browsers modernes et Explorer Internet 11 (avec des polyfills)
Électron

Ou le cloner pour le développement local:

$ git clone https://github.com/ant-design/pro-editor.git
$ cd pro-editor
$ pnpm install
$ pnpm dev

? Contributif

Important

Rejoignez notre écosystème collaboratif. Vos contributions sont le rythme cardiaque de notre projet. Voici comment faire partie intégrante de notre communauté dynamique:

Intégrez et innovez : incorporez Ant Design Pro, UMI et ProEditor dans vos projets. Votre utilisation et vos commentaires réels nous sont inestimables pour nous.
Exprimez vos idées : rencontrez un problème? Vous avez une requête? Vos perspectives comptent. Partagez-les en soumettant des problèmes et aidez-nous à améliorer l'expérience utilisateur.
Façonner l'avenir : avez-vous des améliorations de code ou des idées de fonctionnalités? Nous vous invitons à proposer des demandes de traction et à contribuer directement à l'évolution de notre base de code.

Chaque contribution, grande ou petite, est célébrée. Rejoignez-nous dans notre mission d'affiner et d'élever le monde des composants de l'interface utilisateur des entreprises open source. ?

«Ecosystème

Procosents - Conçu pour l'application au niveau de l'entreprise, utilisez la conception de fourmis comme un pro!.
ProEditor - Le cadre et composants de l'éditeur ultime.
Proflow - Une base de framework d'éditeur de flux sur React-Flow.
Prochat - Bibliothèque de composants pour construire rapidement les interfaces de chat LLM.