re editor

rééditeur ·

Un éditeur de texte riche en réactif hors de la boîte

• Comment utiliser
  • Out of the Box - Fournir une barre d'outils de style Antd
  • Custom - introduit uniquement l'éditeur Core, personnalise la barre d'outils
• Questions fréquemment posées
• Fonctionnalités prises en charge

Caractéristiques

• Hors de la boîte, aucune configuration requise
• Personnalisés, vous pouvez développer des barres d'outils de n'importe quel style et formulaire par vous-même [API ACHETION]
• Paramètres de la fonction d'élément de support, tels que la modification de la taille de l'image
• Support Syntaxe de Markdown
• Voir plus

Comment utiliser

Pour s'adapter à différents besoins de développement, l'éditeur fournit les deux méthodes d'utilisation suivantes.

Utiliser la boîte

Le rééditeur est un composant encapsulé qui peut être utilisé après l'installation. Il contient @ Rediteur / Core et @ Rediteur / Barre d'outils-ANTD. La barre d'outils utilise le style Antd par défaut. Si vous souhaitez utiliser d'autres barres d'outils, veuillez vous référer au document personnalisé suivant

Dépendances d'installation

$ npm install re-editor

Introduire les styles

Introduit dans js

 import 're-editor/lib/styles/index.css'

Il peut également être introduit dans CSS (nécessite un support de prétraitement CSS)

 @import 're-editor/lib/styles/index.css'

Accessoires

propriété	illustrer	taper
valeur	Valeur de l'éditeur	objet
floconneux	Le rappel pour l'éditeur modifie le contenu	(valeur: valeur) => void
espace réservé	Texte d'espace réservé	chaîne
lire en lecture	Mode en lecture seule	booléen
onImageUpload	Lit photo personnalisée	(fichier: fichier) => promesse <url: chaîne>
outils	Définissez le contenu d'affichage de la barre d'outils	Tableau <tableau

Définissez la barre d'outils pour afficher le contenu

Formulaire d'achat de support tools props , s'il s'agit d'un tableau bidimensionnel, il sera affiché en groupe

 tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
  [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
  [ 'orderedlist' , 'unorderedlist' ]
] }

nom	Fonction
audacieux	Audacieux
Italique	Italique
souligner	Souligner
Strikethrough	Supprimer la ligne
liste ordonnée	Liste commandée
lish non ordonné	Liste non ordonnée
Titre	titre
aligner	Alignement
image	image
tableau	feuille
code	Code
défaire	Révoquer
refaire	Reprise
plein écran	plein écran

Personnaliser

L'éditeur est divisé en deux parties, la zone d'édition de contenu et la barre d'outils. Ce qui suit décrit comment personnaliser la barre d'outils

Installez le noyau de l'éditeur

$ npm install @re-editor/core

Créer une barre d'outils

Vous pouvez créer une barre d'outils d'éditeur de quelque manière que ce soit. Vous devez passer l'instance de l'éditeur à la barre d'outils. Vous pouvez vous référer à la mise en œuvre de Rediteur et @ Rediteur / Barre d'outils-ANTD pour afficher la documentation de l'API pour plus de détails (cette partie du document n'a pas encore été écrite, sera-t-elle achevée dans un avenir proche?)

Par exemple, implémentez une fonction audacieuse:

 import { command } from '@re-editor/core' ;

const Demo = ( props ) => {
  function handleClick ( ) {
    command ( props . editor ) ( 'bold' )
  }
  return < div onClick = { handleClick } > bold </ div >
}

Introduction aux packages

• rééditeur: un éditeur encapsulé avec barre d'outils
• @ Rediteur / Core: éditeur Core
• @ rediteur / barre d'outils-ANTD: barre d'outils basée sur ANT, par défaut
• @ Rediteur / Exemples: Projet de démonstration

FAQ

Quelle est la différence entre la comparaison avec Slate ou Draft-JS?

L'ardoise ou le brouillon n'est pas un éditeur pur, ils ressemblent plus à un cadre pour la construction des éditeurs. Le rééditeur est développé en fonction de l'ardoise, vous n'avez donc pas à prêter attention au processus de构建编辑器.

Comment modifier le style

Le style est divisé en deux parties, nœud (gras, h1, h2, etc.) et la barre d'outils. Ils peuvent tous réécrire le style de base via CSS, et la barre d'outils peut également réécrire complètement le style via CSS.

Que dois-je faire si la quantité de données enregistrées est trop grande à chaque fois?

À l'aide de la mise à jour incrémentielle, la valeur du rappel Onchange est dans le format immuable. Vous pouvez utiliser immuable-js-diff et autres méthodes pour obtenir le contenu de Diff pour une mise à jour incrémentielle

Comment spécifier un serveur d'images de téléchargement

L'image est enregistrée en base64 par défaut. Si vous devez télécharger l'image sur le serveur spécifié, vous pouvez utiliser la fonction onImageUpload , (fichier: fichier) => promesse <url: chaîne> Exemple de code

Fonction

Décoration de texte

斜体粗体下划线la下标删除线

Liste

有序列表无序列表

Alignement

左对齐le centre右对齐两端对齐居中对齐alignées

titre

h1 h2 h3 h4 h5 h6

autre

• 图片
  • Régler la taille
  • Copier à partir du presse-papiers
  • Prend en charge le téléchargement personnalisé d'adresses de serveur d'images
• 表格
  • Ajouter des lignes
  • Ajouter des colonnes
  • Supprimer les lignes
  • Supprimer les colonnes
• 代码高亮
  • js
  • CSS
  • html
• markdown
  • H1-H6: #
  • Citation: >
  • Liste commandée: -
  • Liste non ordonnée: 1.
• Édition pleine écran

D'autres fonctions continuent d'augmenter ...