Descargar tiptap appmsg editor - Descargar el código fuente tiptap appmsg editor

tiptap appmsg editor

Otros recursos

1.0.0

Descargar

tiptap-appmsg-editor

Ejemplo del editor de cuentas públicas de WeChat basada en TipTap admite la copia basada en el tipo a la plataforma pública WeChat, y admite a los desarrolladores para desarrollar bibliotecas de estilo y bibliotecas de plantillas como inserción de contenido; como 135Editor, Yiban, etc.

Ejemplos en línea

VITE+VUE3 Versión

vue-tiptap-appmsg-editor

Lista de puntos de función

Estilo de texto (tamaño de fuente, color, resaltado, en negrita, altura de línea ...)
Estilo de texto claro
Diseño de contenido (alineación, espacio, sangría, flotación)
Historia deshacer/rehacer
Inserción de imágenes
Contenido de bloque de código
Contenido de video
Línea divisoria
Lista ordenada/desordenada
Hiperenlace
Imagen hipervínculo
Applet de WeChat
Inserción de expresión
Especificaciones para el desarrollo de la biblioteca de estilo gráfico
Insertar estilos y plantillas gráficas
Copia de un solo clic
Recuento de palabras

Actualización continua ...

Directorio de archivos

 tiptap-appmsg-editorsrc
├─js
| ├─editor.js // tiptap编辑器实例
| ├─function.js // 编辑器功能实现
| ├─sidebar.js // 侧边栏实现
| ├─svg.js // svg图标插入
| ├─toolbar.js // 工具栏实现
├─images
|   ├─svg
|   ├─sprite
|   |   └emoji_sprite.png // 表情雪碧图
|   ├─icon
|   |  ├─icon-image-link.png // 图片超链接标识图
|   |  └icon-weapp-link.png // 小程序标识图
├─main.js
├─templates // 样式组件和内容模板
├─styles
|   ├─base.css
|   ├─editor.css  // 编辑器默认样式
|   ├─index.css // 页面主样式
|   └reset.css
├─plugins
|    ├─tabs // tab实现
|    ├─modal // 弹窗实现
|    ├─dropdown // 下拉菜单实现
|    ├─clickoutside // 点击外部关闭实现

Editor personalizado

Desarrollar un editor de estilo personalizado basado en este ejemplo, debe prestar atención a los estilos de contenido

Dado que existe el estilo predeterminado del contenido del artículo, para garantizar que existan los siguientes estilos en el área de edición de TipTap y la barra lateral

. tiptap . ProseMirror {
  min-height : 960 px ;
  outline : none;
  color : rgba ( 0 , 0 , 0 , 0.9 );
  font-size : 17 px ;
  line-height : 1.6 ;
  text-align : justify;
}

. ProseMirror * {
  max-width : 100 % ;
  margin : 0 ;
  padding : 0 ;
  box-sizing : border-box !important ;
  word-wrap : break-word !important ;
}

. ProseMirror p {
  clear : both;
  min-height : 1 em ;
}

. ProseMirror > p {
  margin-top : 0 ;
  margin-bottom : 24 px ;
}

Para obtener más estilos de contenido, puede ver el archivo de estilo predeterminado del contenido oficial de la cuenta: src/styles/editor.css

Desarrollo de componentes de estilo

Para componentes disponibles, flexibles y adaptativos, debe desarrollarlos de acuerdo con ciertas especificaciones

Etiquetas centrales

Sección: Contenedor de contenido de componentes, permitiendo estilo todos los valores de estilo

P: Párrafos de texto, solo se permiten alineación de texto y otros estilos de párrafo. Si el contenido de texto no está incluido en la etiqueta P, se agregará automáticamente después del análisis.

Span: Contenedor de estilo de texto, solo estilos de texto como color, tamaño de fuente, fuente de fuentes, etc. están permitidos.

IMG: Elemento de imagen, permita todos los valores de estilo

Etiquetas de etiqueta

La siguiente etiqueta es un nodo de estilo de etiqueta tiptap, que se agrega automáticamente después de que el contenido de inserción se analice, sin atención adicional

Si inserte contenido

 < section style =" color: grey; text-decoration: underline " >
  < p >
    < span style =" font-size: 12px " > COMPANY BROCHURE </ span >
  </ p >
</ section >

Resultado de inserción real

 < section style =" color: grey; text-decoration: underline " >
  < p >
    < u >
      < span style =" font-size: 12px " > COMPANY BROCHURE </ span >
    </ u >
  </ p >
</ section >