mp html

mp-html

Un puissant composant de texte riche en applet

Introduction fonctionnelle

• Prise en charge l'utilisation dans plusieurs plates-formes d'applet grand public et uni-app
• Prend en charge des étiquettes riches (y compris table , video , svg , etc.)
• Prend en charge des effets d'événements riches (aperçu automatique des images, traitement des liens, etc.)
• Prise en charge des cartes d'espace réservé (chargement, erreurs, aperçus)
• Prend en charge des fonctions riches telles que le saut de point d'ancrage, la longue presse et la copie
• Prend en charge la plupart des entités HTML
• Riches plug-ins (recherche de mots clés, montage de contenu, formules latex , etc.)
• Efficacité élevée, forte tolérance à la faille et poids léger ( ≈25KB , 9KB gzipped )

Voir la fonction Introduction pour en savoir plus

Comment utiliser

Plate-forme native

• Méthode npm

  1. Installez les packages de composants dans le répertoire du projet

     npm install mp-html

  2. Vérifiez使用npm 模块dans l'outil Développeur (s'il n'y a pas d'option, il n'est pas nécessaire) et cliquez sur工具- 构建npm

  3. Ajouter le fichier json qui doit utiliser la page

     {
       "usingComponents" : {
         "mp-html" : " mp-html "
       }
     }

  4. Ajouter le fichier wxml qui doit utiliser la page

      < mp-html content =" {{html}} " />

  5. Ajouter le fichier js qui doit utiliser la page

      Page ( {
       onLoad ( ) {
         this . setData ( {
           html : '<div>Hello World!</div>'
         } )
       }
     } )

• Méthode de code source

  1. Copiez le package de code ( dist/platform ) de la plate-forme correspondante dans le code source dans le répertoire components et renommez-le à mp-html

  2. Ajouter le fichier json qui doit utiliser la page

     {
       "usingComponents" : {
         "mp-html" : " /components/mp-html/index "
       }
     }

  Les étapes suivantes sont les mêmes que ci-dessus

Découvrez rapidement pour en savoir plus

apparition

• Méthode de code source

  1. Copiez le contenu dans dist/uni-app dans le code source du répertoire racine du projet et peut être directement introduit via le marché du plug-in.

  2. Ajouter un fichier vue qui doit utiliser la page

     < template >
       < view >
         < mp-html :content = " html " />
       </ view >
     </ template >
     < script >
       import mpHtml from ' @/components/mp-html/mp-html '
       export default {
         // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
         components : {
           mpHtml
         },
         data () {
           return {
             html : ' <div>Hello World!</div> '
           }
         }
       }
     </ script >

• Méthode npm

  1. Installez les packages de composants dans le répertoire du projet

     npm install mp-html

  2. Ajouter un fichier vue qui doit utiliser la page

     < template >
       < view >
         < mp-html :content = " html " />
       </ view >
     </ template >
     < script >
       import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
       export default {
         // 不可省略
         components : {
           mpHtml
         },
         data () {
           return {
             html : ' <div>Hello World!</div> '
           }
         }
       }
     </ script >

  Lors de l'introduction de projets en cours d'exécution à l'aide cli via npm , vous devez configurer transpileDependencies dans vue.config.js . Pour plus de détails, voir # 330
  Si vous êtes utilisé dans nvue , copiez le contenu dans dist/uni-app/static dans le répertoire static du projet, sinon il ne fonctionnera pas

Découvrez rapidement pour en savoir plus

Propriétés des composants

propriété	taper	valeur par défaut	illustrer
style conteneur	Chaîne		Style de conteneur (2.1.0+)
contenu	Chaîne		Chaîne HTML pour le rendu
liaison de copie	Booléen	vrai	S'il faut permettre la copie automatique des liens externes lorsque vous cliquez sur
domaine	Chaîne		Nom de domaine principal (pour les coutures de liaison)
erreur-IMG	Chaîne		Lien d'espace réservé lorsqu'une erreur d'image se produit
chargement paresseux	Booléen	FAUX	S'il faut permettre le chargement paresseux des images
Chargement-IMG	Chaîne		Liens d'espace réservé pendant le chargement de l'image
pause-video	Booléen	vrai	S'il faut une pause automatiquement d'autres vidéos lors de la lecture d'une vidéo
aperçu-IMG	Booléen	vrai	L'avoir permettre de permettre à l'image d'être automatiquement prévisual lorsqu'il est cliqué
rouleau	Booléen	FAUX	S'il faut ajouter une couche de défilement à chaque table afin qu'il puisse faire défiler horizontalement seul
sélectionnable	Booléen	FAUX	Souci d'activer le texte de la longue pression pour copier
set	Booléen	vrai	S'il faut définir le contenu de la balise de titre sur le titre de la page
show-iMg-menu	Booléen	vrai	L'avoir permis de permettre à l'image d'être enfoncée pendant longtemps pour afficher le menu
style tag	Objet		Définissez le style par défaut de la balise
use-ancor	Booléen	FAUX	Que ce soit pour utiliser des liens d'ancrage

Voir les propriétés pour en savoir plus

Événements composants

nom	Timing de déclenchement
charger	Lorsque l'arbre Dom est chargé
prêt	Lorsque l'image est chargée
erreur	Lorsqu'une erreur de rendu se produit
imgtap	Lorsque l'image est cliquée
linktap	Lorsque le lien est cliqué

Voir les événements pour en savoir plus

API

Certaines méthodes api sont fournies sur les instances de composants pour appeler

nom	effet
dans	Limitez la plage de sauts d'ancrage à une vue de défilement
navigationto	Saut d'ancrage
gettext	Obtenir du contenu texte
faire un coup de pied	Obtenez l'emplacement et la taille d'un contenu texte riche
continent set	Définir le contenu de texte riche
imglist	Obtenez un tableau de toutes les images
pausemedia	Pause audio et lecture vidéo (2.2.2+)
setPlayBackrate	Définir le taux de lecture audio et vidéo (2.4.0+)

Consultez l'API pour en savoir plus

Extensions de plugin

En plus des fonctions de base, ce composant fournit également des extensions riches et peut être sélectionné au besoin.

nom	effet
audio	Joueur de musique
modifiable	Édition de texte riche
emoji	Analyser les emoji
Souligner	Présentation du bloc de code.
réduction	Render Markdown
Recherche	Recherche de mots clés
style	Match Styles in Style Tags
TXV-video	Utilisation de la vidéo Tencent
iMg-cache	Cache d'image par @pentatea
latex	Rendre la formule de latex par @ zeng-j
carte	Affichage de la carte par @whooami

Découvrez le plugin pour en savoir plus

Cas d'utilisation

Exemple officiel	Happy Mall	Quelle vie	Vérification de la méthode des aliments	Weimu	Lire la littérature classique

Revue scientifique	Voyage technologique du programmeur	Blog Diandien	Excellentes notes	365 questions	Livres partagés dans la même ville

Source technologique Partage	Votre code est génial	Vrai	Mottoni	Démo de modèle	Ai Wali

Les classements ci-dessus ne sont pas dans un ordre particulier et des cas d'utilisation plus visibles sont collectés (veuillez l'ajouter)

Licence et soutien

• La licence vous permet d'utiliser (y compris une utilisation commerciale), de copier ou de modifier cette licence MIT composante gratuitement
  Il est nécessaire de subir des tests suffisants avant d'être utilisés dans un environnement de production. Vous n'êtes pas responsable des pertes causées par bug du plug-in (vous pouvez modifier le code source vous-même)

• Contactez-nous et bienvenue pour rejoindre le groupe de communication QQ :
  Groupe 1 (complet): 699734691
  Groupe 2 (complet): 778239129
  Groupe 3: 960265313
  

• soutien
  

Mettre à jour le journal

• v2.5.0 (20240422)

  1. U play Event ajoute src et d'autres détails d'information
  2. L'attribut U preview-img prend en charge le paramètre à all pour activer les détails de prévisualisation de l'image base64
  3. U Le plug-in editable ajoute un mode simple (cliquez sur le texte pour le modifier directement)
  4. U Plug-in latex prend en charge les détails de la formule au niveau des blocs
  5. F Correction du problème de la perte de fond dans certains cas du tableau.
  6. F Correction de certains problèmes que svg ne peut pas être affiché en détail
  7. F Correction du problème que le style ne peut pas être reconnu dans uni-app h5 et app se termine.
  8. F Correction du problème de l'affichage incorrect dans le plug-in latex dans certains cas.
  9. F Correction du problème que la table du plugin editable ne peut pas être supprimée
  10. F Correction du problème du package uni-app Plug- editable vue3 h5 Click Image Error
  11. F Correction du problème où le package uni-app plugin editable clique sur la table sans barre de menu

• v2.4.3 (20240121)

  1. Détails du plugin de carte A par @whooami
  2. F Correction de l'émission que foreignobject peut ne pas être affichée dans les détails svg
  3. F Correction du problème de l'affichage incorrect dans le cas des cellules fusionnées dans la partie du tableau du détail
  4. F Correction du problème de la définition object-fit dans les balises img pour invalide
  5. F Correction du problème que la formule de plug-in latex enveloppera les détails de la ligne
  6. F Correction du problème que le clic sur audio ne peut pas être modifié lorsque le package uni-app editable et le plug-in audio est partagé. Détails de @whoooami
  7. F Correction du problème que l'applet Alipay a défini les images de largeur et de hauteur qui peuvent afficher anormalement.
  8. F Correction du problème que uni-app Package rapportera une erreur dans le replace of undefined dans certains cas.
  9. F a résolu le problème que uni-app ne s'affiche pas détaillé

  Le guide de mise à jour peut être vu à partir de la méthode de mise à niveau de 1.x

Consultez le journal de mise à jour pour en savoir plus