🐛 fix(导出): 导出图片标签拆分为一个个文字 #101

style/editor.css

@@ -31,7 +31,6 @@
     margin: 10px 0;
 }
 
-
 /* 1. 一级标题样式setup */
 .protyle-wysiwyg [data-node-id].h1,
 .b3-typography h1 {
@@ -74,7 +73,7 @@
     /* color: var(--custom-h3-color) !important; */
     color: var(--b3-card-info-color);
     background-color: #d1ecf7;
-    box-shadow: 2px 2px 2px var( --b3-table-border-color);
+    box-shadow: 2px 2px 2px var(--b3-table-border-color);
 }
 
 /* 三级标题前面添加竖线*/
@@ -123,9 +122,8 @@
     font-size: 1.2em !important;
     /* color: var(--custom-h4-color); */
     color: var(--b3-card-success-color);
-    background-color: #D8F9E6;
-    box-shadow: 2px 2px 2px var( --b3-table-border-color);
-
+    background-color: #d8f9e6;
+    box-shadow: 2px 2px 2px var(--b3-table-border-color);
 }
 /* 5. 五级标题样式setup */
 .protyle-wysiwyg [data-node-id].h5,
@@ -201,8 +199,8 @@
     word-wrap: break-word;
 }
 /* 设置表格每列默认宽度 */
-.protyle-wysiwyg div.table[data-node-id] table tr td{
-    max-width: 620px; 
+.protyle-wysiwyg div.table[data-node-id] table tr td {
+    max-width: 620px;
 }
 /* 表格默认居中 */
 .protyle-wysiwyg div.table {
@@ -234,7 +232,7 @@
 .protyle-wysiwyg [data-node-id].bq,
 .b3-typography blockquote {
     border: 1px solid var(--custom-blockquote-border-color);
-    border-radius:  10px  !important;
+    border-radius: 10px !important;
     color: #6a6969;
     background-color: var(--custom-blockquote-background-color);
     -webkit-box-sizing: border-box;
@@ -459,7 +457,6 @@ div[data-subtype='t'][data-type='NodeList'] {
 /* ------------------------------------块样式设置：End-------------------------------------- */
 /* --------------------------------------------------------------------------------------------- */
 
-
 /* --------------------------------------------------------------------------------------------- */
 /* ------------------------------------行内块字体样式-------------------------------------- */
 /* --------------------------------------------------------------------------------------------- */
@@ -478,7 +475,7 @@ mark {
     border-bottom: 2px solid var(--b3-font-color4);
 }
 /* -----------------------加粗----------------------- */
-.protyle-wysiwyg span[data-type~=strong]{
+.protyle-wysiwyg span[data-type~='strong'] {
     color: inherit;
 }
 
@@ -563,19 +560,14 @@ li[data-type='navigation-file'] .counter {
 
 /* ------------------------------标签  ------------------------------*/
 .protyle-wysiwyg [data-node-id] span[data-type~='tag']:not(:empty) {
-    display: inline-flex;
     border-bottom: 0px solid var(--b3-protyle-inline-tag-color);
     font-size: 85%;
     text-decoration: none !important;
     color: var(--b3-protyle-inline-tag-color);
     background-color: var(--b3-protyle-inline-tag-background);
     border-radius: 0.3em;
-    padding: 0em 0.375em 0.08em !important;
+    padding: 0em 0.375em 0.08em;
     margin: 0em 0.25em;
-    transform: translateY(-1.5px);
-    box-sizing: border-box;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
 }
 
 /* 标签#号 */
@@ -586,6 +578,26 @@ li[data-type='navigation-file'] .counter {
 .protyle-wysiwyg [data-node-id] span[data-type~='tag']:hover {
     background-color: var(--custom-tag-hover-color);
 }
+/* 标签图片导出 */
+.export-img .protyle-wysiwyg [data-node-id] span[data-type~='tag']:before {
+    content: '' !important;
+}
+.export-img .protyle-wysiwyg [data-node-id] span[data-type~='tag']:not(:empty) {
+    padding: 0em 0em 0.08em 0em;
+    margin: 0em;
+}
+.export-img .protyle-wysiwyg [data-node-id] span[data-type~='tag']:first-child::before {
+    content: '#' !important;
+}
+.export-img .protyle-wysiwyg [data-node-id] span[data-type~='tag']:first-child {
+    margin-left: 0.25em !important;
+    padding: 0em 0em 0.08em 0.375em !important;
+    border-radius: 0.3em 0em 0em 0.3em !important;
+}
+.export-img .protyle-wysiwyg [data-node-id] span[data-type~='tag']:last-child {
+    border-radius: 0em 0.3em 0.3em 0em !important;
+    padding: 0em 0.375em 0.08em 0em !important;
+}
 
 /* 文档标签 */
 .protyle-background__tags .item {
@@ -749,5 +761,3 @@ li[data-type='navigation-file'] .counter {
 /* --------------------------------------------------------------------------------------------- */
 /* ------------------------------------行内块字体样式：End-------------------------------------- */
 /* --------------------------------------------------------------------------------------------- */
-
-