tiptap appmsg editor

Tiptap-Appmsg-Editor

Пример редактора публичных аккаунтов WeChat, созданного на TiptAp, поддерживает копирование типов на общедоступной платформе WeChat, и поддерживает разработчиков для разработки библиотек стилей и библиотек шаблонов в качестве введения контента; такие как 135editor, Yiban и т. Д.

Онлайн -примеры

VITE+VUE3 версия

VUE-TIPTAP-APPMSG-EDITOR

---

Список функциональных баллов

• Стиль текста (размер шрифта, цвет, выделение, жирное жирный, высота линии ...)

• Чистый текстовый стиль

• Макет контента (выравнивание, расстояние, вдавливание, плавание)

• История отмены/повторно

• Вставка картин

• Содержимое блока кода

• Видеоконтент

• Разделительная линия

• Заказанный/неупорядоченный список

• Гиперссылка

• Картинка гиперссылка

• WeChat Applet

• Вставка выражения

• Технические характеристики для разработки библиотеки графического стиля

• Вставить графические стили и шаблоны

• Копирование одного клика

• Слово

Непрерывное обновление ...

Файл каталог

 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 // 点击外部关闭实现

Пользовательский редактор

Разработать редактор пользовательского стиля на основе этого примера, вам необходимо обратить внимание на стили контента

Поскольку существует стиль контента статьи по умолчанию, чтобы убедиться, что в области редактирования TiptAp существуют следующие стили

. 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 ;
}

Для получения дополнительных стилей контента вы можете увидеть файл стиля по умолчанию официального содержимого учетной записи: src/styles/editor.css

Разработка компонентов стиля

Для доступных, гибких, адаптивных компонентов вам необходимо разработать их в соответствии с определенными спецификациями

Основные теги

Раздел: контейнер содержимого компонента, позволяющий стиль All Style значения

P: Текстовые абзацы, разрешены только в виде текстовых и других стилей абзацев. Если текстовое содержимое не включено в тег P, он будет автоматически добавлен после анализа.

Пролет: контейнер в стиле текста, разрешены только стили текста, такие как цвет, размер шрифта, семейство шрифтов и т. Д.

IMG: элемент изображения, разрешить все значения стиля

Теги тегов

Следующий тег представляет собой узел стиля тега TiptAP, который автоматически добавляется после того, как содержание вставки анализируется, без дополнительного внимания

Если вставьте контент

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

Фактический результат вставки

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

Сильный: смелый узел

EM: курсивный узел

u: подчеркнутый узел

Более разумные предложения компонентов

Расстояние между блоками содержимого: рекомендуемое маржиновое мяч/маржиновой маржинал (спереди/секция заднего расстояния)

Расстояние текстовой линии: рекомендуемая высота линии линии (расстояние между линиями)

Используйте EM-единицы вместо единиц PX, такие как значения высоты линии, для более гибких и адаптируемых

Используйте BR, чтобы вручную обернуть текст в абзацах

Ссылочные стили

Вы можете обратиться к стилям других официальных платформ редактирования учетных записей, таких как 135Editor, Yiban и т. Д.

Официальная платформа стиля учетной записи Yiban: https://yiban.io/style_center/0_1_0

Отношения

TiptAp документация

TiptAp-Extension-Repizeable

Tiptap-Extension-Image

Tiptap-extension-video

tiptap-extension-iframe

TiptAp-Extension-Font-Size

Tiptap-Extension-Link

TiptAp-Extension-Trailing Unde

Tiptap-Extension-Image-Link

Tiptap-Extension-Bullet-List

TiptAP-Extension-List-List

Tiptap-Extension-Line-Hight

Tiptap-Extension-Float

Tiptap-Extension-Margin