Download tiptap appmsg editor - tiptap appmsg editor Código Fonte Download

tiptap appmsg editor

Outros recursos

1.0.0

Baixar

tiptap-appmsg-editor

Exemplo do editor de contas públicas do WeChat, construído no TIPTAP, suporta cópias baseadas em tipos para a plataforma pública do WeChat e apoia os desenvolvedores para desenvolver bibliotecas de estilo e bibliotecas de modelos como inserção de conteúdo; como 135Editor, Yiban, etc.

Exemplos online

Versão Vite+Vue3

vue-tippAp-appmsg-editor

Lista de pontos de função

Estilo de texto (tamanho da fonte, cor, destaque, negrito, altura da linha ...)
Estilo de texto claro
Layout de conteúdo (alinhamento, espaçamento, recuo, flutuação)
HISTÓRIA UNLAFA/REdo
Inserção da imagem
Conteúdo do bloco de código
Conteúdo de vídeo
Linha divisória
Lista ordenada/não ordenada
Hiperlink
Imagem hiperlink
Appleto WeChat
Inserção de expressão
Especificações para o desenvolvimento da biblioteca de estilo gráfico
Insira estilos e modelos gráficos
Cópia com um clique
Contagem de palavras

Atualização contínua ...

Diretório de arquivos

 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

Desenvolva um editor de estilo personalizado com base neste exemplo, você precisa prestar atenção aos estilos de conteúdo

Como existe o estilo padrão do conteúdo do artigo, a fim de garantir que os seguintes estilos existam na área de edição de tiptap e na 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 mais estilos de conteúdo, você pode ver o arquivo de estilo padrão do conteúdo oficial da conta: src/styles/editor.css

Desenvolvimento de componentes de estilo

Para componentes disponíveis, flexíveis e adaptativos, você precisa desenvolvê -los de acordo com determinadas especificações

Tags principais

Seção: contêiner de conteúdo do componente, permitindo o estilo todos os valores de estilo

P: Os parágrafos de texto, apenas os estilos de alinhamento de texto e outros parágrafos são permitidos. Se o conteúdo do texto não estiver incluído na tag P, ele será adicionado automaticamente após a análise.

Span: Recipiente de estilo de texto, apenas estilos de texto como cor, tamanho de fonte, família de fontes etc. são permitidos.

IMG: elemento da imagem, permita todos os valores de estilo

Tags de tags

A tag a seguir é um nó de estilo tippap tag, que é adicionado automaticamente após o conteúdo de inserção ser analisado, sem atenção adicional

Se inserir conteúdo

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

Resultado de inserção real

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