tiptap appmsg editor
1.0.0
온라인 예
vite+vue3 버전
vue-tiptap-appmsg-editor
텍스트 스타일 (글꼴 크기, 색상, 하이라이트, 대담한, 라인 높이 ...)
명확한 텍스트 스타일
내용 레이아웃 (정렬, 간격, 압입, 부동)
역사 실행 취소/레다
사진 삽입
코드 블록 컨텐츠
비디오 내용
나누기 라인
주문/반대되지 않은 목록
하이퍼 링크
사진 하이퍼 링크
Wechat 애플릿
표현 삽입
그래픽 스타일 라이브러리 개발을위한 사양
그래픽 스타일과 템플릿을 삽입하십시오
한 번의 클릭 복사
단어 수
연속 업데이트 ...
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 . 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
사용 가능한 유연성, 적응 형 구성 요소의 경우 특정 사양에 따라이를 개발해야합니다.
핵심 태그
섹션 : 구성 요소 컨텐츠 컨테이너, 스타일 모든 스타일 값을 허용합니다
P : 텍스트 단락, 텍스트-정렬 및 기타 단락 스타일 만 허용됩니다. 텍스트 내용이 P 태그에 포함되지 않으면 구문 분석 후 자동으로 추가됩니다.
SPAN : 텍스트 스타일 컨테이너, 색상, 글꼴 크기, 글꼴 패밀리 등과 같은 텍스트 스타일 만 허용됩니다.
IMG : 이미지 요소, 모든 스타일 값을 허용합니다
태그 태그
다음 태그는 삽입 콘텐츠가 구문 분석 한 후 자동으로 추가되는 발끝으로 추가됩니다.
컨텐츠를 삽입하는 경우
< 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 : 밑줄 노드
보다 합리적인 구성 요소 제안
컨텐츠 블록 사이의 거리 : 권장 마진 탑/마진 바닥 마진 (섹션 전면/단면 후면 거리)
텍스트 라인 거리 : 권장 라인 높이 라인 높이 (라인 간격)
보다 유연하고 적응하기 쉬운 라인 높이 값과 같은 PX 장치 대신 EM 장치를 사용하십시오.
BR을 사용하여 단락에서 텍스트를 수동으로 래핑하십시오
참조 스타일
135Editor, Yiban 등과 같은 다른 공식 계정 편집 플랫폼의 스타일을 참조 할 수 있습니다.
Yiban 공식 계정 스타일 플랫폼 : https://yiban.io/style_center/0_1_0
처지
발끝으로 문서화
발끝으로 확장 될 수 있습니다
팁-확장-이미지
발끝으로 확장-비디오
발끝으로 확장 -Iframe
발끝으로 확장 된 크기
발끝으로 확장 링크
발끝으로 확장-트레일링 노드
발끝으로 확장-이미지 링크
발끝으로 확장-롤레트리스트
발끝으로 확장 된 명령 목록
발끝까지 확장 선-높이
발끝으로 확장 된 플로트
팁-확장-마진
