Yoopta Editor
v4.9.3
Yoopta-Editor est un éditeur gratuit de texte riche en open source conçu pour les applications React. Il regorge de fonctionnalités qui vous permettent de construire un éditeur aussi puissant et convivial que la notion, l'artisanat, la coda, le milieu, etc.
Avec Yoopta-Editor, vous pouvez tout personnaliser pour s'adapter exactement à ce dont vous avez besoin. Vous souhaitez modifier le look, ajouter des fonctionnalités sympas ou élaborer une interface utilisateur complètement personnalisée? Aucun problème. Yoopta-Editor vous offre la flexibilité de tout faire, ce qui facilite la création de l'outil parfait pour votre projet. Tout cela est personnalisable, extensible et facile à installer!
Cœur
Plugins
Outils
Marques
Tout d'abord, installez les dépendances par les pairs et le package Yoopta Core avec au moins un plugin
# # slate, slate-react, react, react-dom - peer dependencies
# # @yoopta/editor - core package
yarn add slate slate-react @yoopta/editor @yoopta/paragraph
# or
npm install slate slate-react @yoopta/editor @yoopta/paragraphImporter à partir de Core Pack
import YooptaEditor , { createYooptaEditor } from '@yoopta/editor' ;
const plugins = [ ... ] ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
plugins = { plugins }
value = { value }
onChange = { onChange }
/>
</ div >
) ;
}Accessoires disponibles pour les composants de YooptaEditor
type YooptaEditor = {
/* editor instance */
editor : YooEditor ;
/* list of plugins */
plugins : YooptaPlugin [ ] ;
/* list of marks */
marks ?: YooptaMark < any > [ ] ;
/* Value. [Default] - undefined */
value ?: YooptaContentValue ;
/* Change handler */
onChange ?: ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => void ;
/* autoFocus. [Default] - true */
autoFocus ?: boolean ;
/* className - class name */
className ?: string ;
/* These props define the area for the selection box.
Good practice - passing parent element.
[Default] - document */
selectionBoxRoot ?: HTMLElement | React . MutableRefObject < HTMLElement | null > | false ;
children ?: React . ReactNode ;
/* Props for tools. You can get access to any passed tools using `useTools` hook from @yoopta/editor */
tools ?: Partial < Tools > ;
placeholder ?: string ;
readOnly ?: boolean ;
/* Width. [Default] - 400px. Will be DEPRECATED, use style object */
width ?: number | string ;
/* Style CSS Object. [Default] - { width: '400px', paddingBottom: '100px' } */
style ?: number | string ;
/* Id for your editor instance. Can be useful for multiple editors */
id ?: number | string ;
} ;Voici la liste des plugins disponibles
import YooptaEditor , { createYooptaEditor } from '@yoopta/editor' ;
import Paragraph from '@yoopta/paragraph' ;
import Blockquote from '@yoopta/blockquote' ;
const plugins = [ Paragraph , Blockquote ] ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
placeholder = "Type text.."
value = { value }
onChange = { onChange }
// here we go
plugins = { plugins }
/>
</ div >
) ;
}Vérifiez le code avec les plugins
Yoopta-Editor fournit des outils utiles qui peuvent vous aider lorsque vous travaillez avec l'éditeur
Voici une liste des outils disponibles
Vérifiez le code avec des outils
// IMPORT TOOLS
import LinkTool , { DefaultLinkToolRender } from '@yoopta/link-tool' ;
import ActionMenu , { DefaultActionMenuRender } from '@yoopta/action-menu-list' ;
import Toolbar , { DefaultToolbarRender } from '@yoopta/toolbar' ;
// Tools should be defined outside component
const TOOLS = {
Toolbar : {
tool : Toolbar ,
render : DefaultToolbarRender ,
} ,
ActionMenu : {
tool : ActionMenu ,
render : DefaultActionMenuRender ,
} ,
LinkTool : {
tool : LinkTool ,
render : DefaultLinkToolRender ,
} ,
} ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
plugins = { plugins }
placeholder = "Type text.."
value = { value }
onChange = { onChange }
// here we go
tools = { TOOLS }
/>
</ div >
) ;
}Les marques sont des formats de texte simples
Voici une liste des notes disponibles dans le package @ yoopta / marques
// IMPORT MARKS
import { Bold , Italic , CodeMark , Underline , Strike , Highlight } from '@yoopta/marks' ;
const MARKS = [ Bold , Italic , CodeMark , Underline , Strike , Highlight ] ;
export default function Editor ( ) {
const editor = useMemo ( ( ) => createYooptaEditor ( ) , [ ] ) ;
const [ value , setValue ] = useState < YooptaContentValue > ( ) ;
const onChange = ( value : YooptaContentValue , options : YooptaOnChangeOptions ) => {
setValue ( value ) ;
} ;
return (
< div >
< YooptaEditor
editor = { editor }
placeholder = "Type text.."
plugins = { plugins }
value = { value }
onChange = { onChange }
tools = { TOOLS }
// here we go
marks = { MARKS }
/>
</ div >
) ;
}Vérifiez le code avec des marques
Trouvez ci-dessous des exemples utiles d'utilisation de l'éditeur Yoopta dans vos projets. Ces exemples vous aideront à démarrer rapidement et à vous montrer à quel point il est facile d'intégrer et de personnaliser l'éditeur à vos besoins.
D'accord, allons-y!
Si vous trouvez que Yoopta-Editor utile et précieuse pour vos projets, je vous demande avec aimablement montrer votre soutien en donnant à ce repo ️ Star sur Github. Votre appréciation signifie beaucoup pour moi et m'aide à grandir et à continuer d'améliorer l'éditeur de la communauté. ?
Salut! Si vous trouvez ce projet utile ou vous aide dans votre travail, envisagez de le soutenir pour assurer des améliorations et un développement continus. Vos dons aident à maintenir le projet en vie et me permettent d'investir plus de temps et de ressources pour le maintenir et l'améliorer.
Vous pouvez soutenir le projet par:
Toute contribution, grande ou petite, est très appréciée et m'aide à maintenir le projet et à ajouter de nouvelles fonctionnalités passionnantes. Merci pour votre soutien!
packages/
├── core - core components of the editor
├── marks - text marks
├── plugins - editor plugin extensions
├── tools - tools packages
└── development - developer playground
Si vous êtes prêt à soutenir Yoopta-Editor, voici comment vous pouvez le faire:
Yoopta-Editor est libéré sous la licence du MIT. N'hésitez pas à l'utiliser et à le modifier pour vos projets.
