wangEditor5 éditeur [version ZBLOG]

wangEditor5 éditeur, libre et open source (basé sur le protocole open source du MIT), l'auteur original Shuangyue professeur, le site officiel de l'auteur :https: //www.wangeditor.com/, soutenir le développement secondaire, tout le monde peut être sûr d'utiliser !

De plus, l'auteur d'origine met à jour l'éditeur wangEditor5, de sorte que nous pouvons également mettre à jour nos plugins avec la mise à jour de l'auteur d'origine.

Grâce à la documentation de développement complète de wangEditor5, nous avons pu le faire un plugin pour Z-blog PHP.

Il était une fois, nous voulions toujours trouver quelque chose de similaireCompte public WeChatUn éditeur de texte riche moderne si facile à utiliser, et maintenant il est là !

Remarque : ne peut pas être utilisé avec d'autres plugins d'éditeur en même temps, utilisez ce plug-in s'il vous plaît fermer d'autres plug-ins d'éditeur à l'avance (par exemple, Z-blog PHP est livré avec l'éditeur UEditor) !

L'éditeur wangEditor5 ne prend pas en charge l'utilisation sur les téléphones mobiles par défaut. En fait, indépendamment de tout plug-in d'éditeur, l'expérience utilisateur sur les téléphones mobiles est très mauvaise, de sorte que l'éditeur wangEditor5 a officiellement coupé cette fonction.

Bien sûr, cette fonction peut également être débloquée, il suffit de personnaliser la barre d'outils affichée sur le téléphone mobile pour améliorer l'expérience d'utilisation de l'utilisateur Non, les utilisateurs qui en ont besoin peuvent nous trouver pour personnaliser !

Voici une introduction à l'éditeur sur le site officiel de wangEditor

# avantages

# problèmes avec d'autres éditeurs de texte riche

Recherchez sur le Web « Web Rich Text Editor », vous obtiendrez beaucoup de résultats, tels que UEditor kindEditor à la maison, CKEditor TinyMCE Quill ProseMirror Draft Slate à l'étranger et ainsi de suite. Il y a aussi beaucoup de gens qui utilisent ces éditeurs, ou pour faire le développement secondaire.

Cependant, ils ont tous les problèmes suivants (taper au tableau noir ~), qui peuvent affecter considérablement votre efficacité de développement, votre coût de développement et la stabilité du produit.

La technologie vieille

Comme UEditor KindEditor, utilise toujours l'API document.execCommand. Cela affectera considérablement la stabilité et l'extensibilité du produit.

À ce moment-là, il n'y aura pas de problèmes partout, et il sera méprisé par le PM : "Comment peut-on faire xxx ?"

Le chinois n'est pas amicaux

Comme CKEditor TinyMCE Quill ProseMirror, il n'y a pas de documentation officielle en chinois. Cela affectera considérablement votre efficacité de développement (temps supplémentaires ce soir ~)

PS : Anglais spécial, s'il vous plaît sauter.

# nécessite beaucoup de développement secondaire

Comme ProseMirror Draft Slate, ils sont aussi des éditeurs de texte riche, mais ils ne sont qu 'un noyau ou un contrôleur, pas une fonctionnalité complète.

Un grand nombre de développement secondaire entraînera non seulement une augmentation considérable des coûts de R & D (fermé ce mois-ci ~), mais peut également apparaître des bugs sans fin en raison de tests imparfaits et tomber dans le bourbier.

PS : Sauf si vous avez un fort besoin de développement personnalisé.

# contraintes avec un cadre

Slate et Draft dépendent du framework React. Si vous voulez l'utiliser dans Vue, la charge de travail et la difficulté sont très importantes.

# Pas de composants officiels tels que React Vue

Certaines dépendances sans framework, comme ProseMirror, vous devez encapsuler vos propres composants si vous utilisez Vue React.

# Les nouveaux produits ne sont pas encore stabilisés

Les éditeurs énumérés ci-dessus sont des produits relativement matures avec un grand nombre d'utilisateurs. Vous pourriez également trouver d'autres produits, tels que les nouveaux développements, les utilisateurs peu nombreux.
Quoi qu 'il en soit, veuillez choisir avec prudence, car il y a vraiment trop de fosses dans l'éditeur de texte riche et il faut beaucoup de tests et d'utilisation pour s'établir lentement.

Sélectionnez des produits stables qui peuvent être référencés

github stars

Téléchargements npm

Temps et fréquence de publication de npm

Nombre de résultats pertinents pour les moteurs de recherche

S'il y a une grosse usine

Test unitaire / test e2e

Les avantages de # wangEditor

La valeur d'un produit réside dans la résolution des problèmes des utilisateurs, l'amélioration de l'efficacité, la réduction des coûts, l'augmentation de la stabilité et de l'évolutivité.

wangEditor ne fait pas pour le faire, ni n'imite simplement qui, mais après l'analyse des problèmes ci-dessus, donne une solution systématique. Conçu pour réellement résoudre les problèmes des utilisateurs et produire leur propre valeur.

# Utiliser la technologie mainstream

wangEditor a commencé avec la version V5 avec des mises à jour techniques importantes.

#1. Mise à niveau à la capacité L1

L'API document.execCommand a été abandonnée, avec slate.jsopen dans une nouvelle fenêtre (mais non dépendant de React) comme noyau, et la capacité L1 a été mise à niveau.

C'est également le schéma technique actuel des éditeurs de texte riche traditionnels, tels que le bien connu Quill ProseMirror Draft sont utilisés.

#2. Utilisation de vdom

Utilisez la technologie vdom (basée sur la fenêtre vdom.jsopen dans une nouvelle fenêtre) pour mettre à jour la vue, séparer le modèle et la vue, augmenter la stabilité.

#3. Extensibilité

Utilisez le mécanisme d'extension des plugins et des modules pour assurer l'extensibilité. D'autres fonctionnalités continueront d'être étendues à l'avenir.

En fait, maintenant les fonctions intégrées dans wangEditor sont également construites sous la forme de plugins et de modules étendus.

# Documents chinois

wangEditor dispose de documents détaillés en chinois et d'un environnement de communication chinois. Ouvrir dans une nouvelle fenêtre est un programmeur national.

# Feedback et communication en temps opportun

Vous pouvez également aller sur github pour soumettre un problème, l'équipe fournira des commentaires ou acceptera en temps opportun.

# Intégrer toutes les fonctionnalités sans développement secondaire

wangEditor est intégré avec toutes les fonctions de manipulation de texte riche courantes, ce qui peut répondre à la plupart des besoins d'utilisation. Il peut être configuré directement pour être utilisé sans développement secondaire.

// wangEditor a 50 + menus intégrés.getAllMenuKeys()[
  "bold","underline","italic","through","code","clearStyle","headerSelect","header1","header2","header3",
  "color","bgColor","insertLink","editLink","unLink","viewLink","insertImage","deleteImage","editImage",
  "viewImageLink","imageWidth30","imageWidth50","imageWidth100","blockquote","emotion","fontSize","fontFamily",
  "indent","delIndent","justifyLeft","justifyRight","justifyCenter","lineHeight","redo","undo","divider","codeBlock",
  "bulletedList","numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
  "deleteTableCol","tableHeader","tableFullWidth","insertVideo","deleteVideo","uploadImage","codeSelectLang"]

PS : En même temps, wangEditor a une API riche et suffisamment extensible pour vous permettre de personnaliser les menus de développement, les modules, les plugins, etc.

C'est très pratique pour Vue React.

wangEditor est basé sur le noyau slate, mais ne dépend pas de React, il est donc libre de framework.

En outre, nous avons officiellement encapsulé les composants Vue React, qui peuvent être facilement utilisés dans des frameworks tels que Vue React.
Nous continuerons à soutenir d'autres cadres, et vous pouvez également soumettre un problème.

J'ai marché sur 5000 trous

wangEditor est open source depuis de nombreuses années, avec un grand nombre d'utilisateurs utilisés et commentaires, et a résolu de nombreux problèmes ouvrir dans une nouvelle fenêtre. Ces problèmes ont également été testés à plusieurs reprises dans le processus de test de la version V5 afin d'assurer la stabilité dans la mesure maximale.

# Travail d'équipe, itération continue et mise à niveau

wangEditor n'est plus l'auteur seul. Nous avons une équipe de plusieurs personnes pour corriger les bugs, mettre à niveau les fonctions, suivre les problèmes et répondre aux questions de la communauté ensemble.