mp html

mp-html

Un poderoso componente de texto rico en applet

Introducción funcional

• Admite el uso en múltiples plataformas de appletes convencionales y uni-app
• Admite etiquetas ricas (incluyendo table , video , svg , etc.)
• Admite ricos efectos de eventos (vista previa automática de imágenes, procesamiento de enlaces, etc.)
• Configuración de soporte de mapas de marcador de posición (carga, errores, vistas previas)
• Admite funciones ricas como el salto de punto de anclaje, prensa larga y copia
• Admite la mayoría de las entidades HTML
• Complementos ricos (búsqueda de palabras clave, edición de contenido, fórmulas latex , etc.)
• Alta eficiencia, fuerte tolerancia a fallas y peso ligero ( ≈25KB , 9KB gzipped )

Ver la introducción de la función para obtener más información

Cómo usar

Plataforma nativa

• Método npm

  1. Instale paquetes de componentes en el directorio del proyecto

     npm install mp-html

  2. Verifique使用npm 模块en la herramienta de desarrollador (si no hay opción, no es necesario) y haga clic en工具- 构建npm

  3. Agregue el archivo json que necesita usar la página

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

  4. Agregue el archivo wxml que necesita usar la página

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

  5. Agregue el archivo js que necesita usar la página

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

• Método del código fuente

  1. Copie el paquete de código ( dist/platform ) de la plataforma correspondiente en el código fuente al directorio components y cambie el nombre de mp-html

  2. Agregue el archivo json que necesita usar la página

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

  Los siguientes pasos son los mismos que anteriores

Echa un vistazo a Quick Comienza a obtener más información

uni-app

• Método del código fuente

  1. Copie el contenido en dist/uni-app en el código fuente al directorio raíz del proyecto y se puede introducir directamente a través del mercado de complementos.

  2. Agregue el archivo vue que necesita usar la página

     < 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étodo npm

  1. Instale paquetes de componentes en el directorio del proyecto

     npm install mp-html

  2. Agregue el archivo vue que necesita usar la página

     < 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 >

  Al introducir proyectos que se ejecutan utilizando cli a través de npm , debe configurar transpileDependencies en vue.config.js . Para más detalles, consulte #330
  Si se usa en nvue , copie el contenido en dist/uni-app/static al directorio static del proyecto, de lo contrario no se ejecutará

Echa un vistazo a Quick Comienza a obtener más información

Propiedades de componentes

propiedad	tipo	valor predeterminado	ilustrar
estilo contenedor	Cadena		Estilo de contenedor (2.1.0+)
contenido	Cadena		Cadena HTML para representar
enlace de copia	Booleano	verdadero	Si permitir la copia automática de enlaces externos cuando se hace clic
dominio	Cadena		Nombre de dominio principal (para costuras de enlace)
error-IMG	Cadena		Enlace del marcador de posición cuando se produce un error de imagen
cargada perezosa	Booleano	FALSO	Si habilitar la carga perezosa de imágenes
cargación-img	Cadena		Enlaces de marcador de posición durante la carga de imágenes
video de pausa	Booleano	verdadero	Si detener automáticamente otros videos al reproducir un video
vista previa-IMG	Booleano	verdadero	Si permitir que la imagen se presente automáticamente cuando se haga clic en
mesa de desplazamiento	Booleano	FALSO	Si agregar una capa de desplazamiento a cada mesa para que pueda desplazarse horizontalmente solo
seleccionable	Booleano	FALSO	Si habilitar el texto de la presión durante mucho tiempo para copiar
título de set	Booleano	verdadero	Si establecer el contenido de la etiqueta de título en el título de la página
show-img-menu	Booleano	verdadero	Si permitir que la imagen se presione durante mucho tiempo para mostrar el menú
estilo de etiqueta	Objeto		Establezca el estilo predeterminado de la etiqueta
uso	Booleano	FALSO	Si usar enlaces de anclaje

Ver propiedades para aprender más

Eventos componentes

nombre	Tiempo de activación
carga	Cuando el árbol dom está cargado
listo	Cuando se carga la imagen
error	Cuando ocurre un error de representación
imgtap	Cuando se hace clic en la imagen
linktap	Cuando se hace clic en el enlace

Vea eventos para obtener más información

API

Se proporcionan algunos métodos api en instancias de componentes para la llamada

nombre	efecto
en	Limite el rango de anclaje salta a una visión de desplazamiento
navegación	Salto de anclaje
getText	Obtener contenido de texto
getRect	Obtenga la ubicación y el tamaño del contenido de texto rico
setcontent	Establecer contenido de texto enriquecido
imglist	Obtenga una matriz de todas las imágenes
pausemedia	Pausa de reproducción de audio y video (2.2.2+)
setplaybackRate	Establezca la tasa de reproducción de audio y video (2.4.0+)

Mira la API para obtener más información

Extensiones de complemento

Además de las funciones básicas, este componente también proporciona extensiones ricas y puede seleccionarse según sea necesario.

nombre	efecto
audio	Reproductor de música
editable	Edición de texto enriquecida
emoji	Analizar emoji
Destacar	Destacación del bloque de código
reducción	Renderizar la reducción
Buscar	Búsqueda de palabras clave
estilo	Estilos de coincidencia en etiquetas de estilo
Video TXV	Usando video Tencent
IMG-CACHE	Caché de imágenes por @pentatea
látex	Renderiza la fórmula de látex por @zeng-j
tarjeta	Pantalla de tarjetas por @whoooami

Consulte el complemento para obtener más información

Casos de uso

Ejemplo oficial	Feliz centro comercial	Que vida	Verificación del método de alimentos	Weimu	Leer literatura clásica

Revisión de ciencias	Viaje tecnológico del programador	Blog de Diandian	Excelentes notas	365 preguntas	Libros compartidos en la misma ciudad

Fuente de tecnología compartir	Tu código es impresionante	Verdadero	Motton	Demostración de plantilla	Ai Wali

Las clasificaciones anteriores no están en ningún orden en particular, y se recopilan más casos de uso visible (agrégalo)

Licencia y apoyo

• Licencia de forma gratuita (incluido el uso comercial), copiar o modificar esta licencia de componente MIT
  Es necesario someterse a pruebas suficientes antes de ser utilizadas en un entorno de producción. No es responsable de las pérdidas causadas por bug de enchufe (puede modificar el código fuente usted mismo)

• Contáctenos y bienvenido a unirse al grupo de comunicación QQ :
  Grupo 1 (completo): 699734691
  Grupo 2 (completo): 778239129
  Grupo 3: 960265313
  

• apoyo
  

Registro de actualizaciones

• V2.5.0 (20240422)

  1. U evento play agrega src y otros detalles de información
  2. U atributo preview-img admite la configuración de all para habilitar los detalles de la vista previa de la imagen base64
  3. U El complemento editable agrega modo simple (haga clic en texto para editarlo directamente)
  4. U El complemento latex admite detalles de la fórmula a nivel de bloque
  5. F solucionó el problema de la pérdida de fondo en algunos casos de la tabla.
  6. F solucionó algunos problemas que svg no se puede mostrar en detalle
  7. F solucionó el problema de que el estilo no se puede reconocer en uni-app h5 y app finaliza.
  8. F solucionó el problema de la pantalla incorrecta en el complemento latex en algunos casos.
  9. F solucionó el problema de que la tabla de complementos editable no se puede eliminar
  10. F solucionó el problema del paquete uni-app de enchufe editable vue3 h5 haciendo clic en Error de imagen
  11. F solucionó el problema donde el paquete de uni-app de complemento editable hace clic en la tabla sin una barra de menú

• V2.4.3 (20240121)

  1. Detalles del complemento de tarjeta A por @whoooami
  2. F solucionó el problema de que foreignobject no puede mostrarse en detalles svg
  3. F Se corrigió el problema de la visualización incorrecta en el caso de las células fusionadas en la parte de la tabla de lo detallado
  4. F solucionó el problema de configurar object-fit en etiquetas img para inválidos
  5. F solucionó el problema de que la fórmula del complemento latex envolverá los detalles de la línea
  6. F solucionó el problema de que hacer clic en audio no se puede editar cuando se comparte el paquete uni-app editable y el complemento audio . Detalles de @whoooami
  7. F solucionó el problema de que el applet de Alipay ha establecido las imágenes de ancho y altura que pueden mostrarse anormalmente.
  8. F Se corrigió el problema de que uni-app informará un error en el replace of undefined en algunos casos.
  9. F Se solucionó el problema de que uni-app kuaishou mini programa no muestra detallado

  La guía de actualización se puede ver desde el método de actualización de 1.x

Consulte el registro de actualización para obtener más información