tiptap appmsg editor Download - tiptap appmsg editor Source code download

tiptap appmsg editor

Other resources

1.0.0

Download

tiptap-appmsg-editor

Example of WeChat public account editor built on tiptap supports type-based copying to the WeChat public platform, and supports developers to develop style libraries and template libraries as content insertion; such as 135Editor, Yiban, etc.

Online examples

vite+vue3 version

vue-tiptap-appmsg-editor

List of function points

Text style (font size, color, highlight, bold, line height...)
Clear text style
Content layout (alignment, spacing, indentation, floating)
History undo/redo
Picture insertion
Code block content
Video content
Dividing line
Ordered/unordered list
Hyperlink
Picture hyperlink
WeChat applet
Expression insertion
Specifications for the development of graphic style library
Insert graphic styles and templates
One-click copying
Word count

Continuous update...

File Directory

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

Custom editor

Develop a custom style editor based on this example, you need to pay attention to content styles

Since the default style of the article content exists, in order to ensure that the following styles exist in the tiptap editing area and sidebar

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

For more content styles, you can see the default style file of the official account content: src/styles/editor.css

Style component development

For available, flexible, adaptive components, you need to develop them according to certain specifications

Core tags

section: component content container, allowing style all style values

p: Text paragraphs, only text-align and other paragraph styles are allowed. If the text content is not included in the p tag, it will be automatically added after parsing.

span: Text style container, only text styles such as color, font-size, font-family, etc. are allowed.

img: image element, allow all style values

Tag tags

The following tag is a tiptap tag style node, which is automatically added after the insert content is parsed, without additional attention

If insert content

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

Actual insertion result

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