@2kog/pkg-editor 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@2kog/pkg-editor",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "Custom Tinymce、Article Renderer",
5
5
  "scripts": {
6
6
  "serve": "npm run dev",
@@ -0,0 +1,28 @@
1
+ .c-article-tinymce {
2
+ font-size: 1em;
3
+ line-height: 1.8;
4
+ color: @color;
5
+ max-width: 100%;
6
+ -webkit-font-smoothing: antialiased !important;
7
+ overflow-wrap: break-word;
8
+ word-wrap: break-word;
9
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Microsoft YaHei", Trebuchet MS, Calibri,
10
+ BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, sans-serif;
11
+ text-rendering: optimizelegibility;
12
+
13
+ * {
14
+ max-width: 100%;
15
+ box-sizing: border-box;
16
+ }
17
+ }
18
+ .c-article-editor {
19
+ margin: 8px;
20
+ }
21
+ .c-article-origin {
22
+ display: none;
23
+ }
24
+ @media print {
25
+ .c-article-tinymce {
26
+ -webkit-print-color-adjust: exact;
27
+ }
28
+ }
@@ -0,0 +1,11 @@
1
+ /* 链接 */
2
+ .c-article-tinymce {
3
+ a {
4
+ color: @primary;
5
+ text-decoration: none;
6
+ word-break: break-all;
7
+ &:hover {
8
+ box-shadow: 0 1px 0 @primary;
9
+ }
10
+ }
11
+ }
@@ -0,0 +1,159 @@
1
+ .c-article-tinymce {
2
+ //兼容旧代码
3
+ code {
4
+ font-family: Consolas, monospace, serif;
5
+ color: #dd0055;
6
+ // white-space: nowrap;
7
+ padding: 2px 4px;
8
+ border: 1px solid #dddddd;
9
+ border-radius: 3px;
10
+ background: #fafafa;
11
+ }
12
+
13
+ // pre {
14
+ // font-family: Consolas, Monaco, monospace;
15
+ // display: block;
16
+ // font-size: 15px;
17
+ // line-height: 1.5;
18
+
19
+ // padding: 10px;
20
+ // background: #fafafa;
21
+ // color: #444444;
22
+ // -moz-tab-size: 4;
23
+ // tab-size: 4;
24
+ // overflow: auto;
25
+ // border: 1px solid #dddddd;
26
+ // border-radius: 3px;
27
+ // white-space: pre-wrap;
28
+
29
+ // //兼容旧版
30
+ // code{
31
+ // display: block;
32
+ // white-space: pre-wrap;
33
+ // border:none;
34
+ // }
35
+ // }
36
+
37
+ // codesample
38
+ code[class*="language-"],
39
+ pre[class*="language-"] {
40
+ color: black;
41
+ background: none;
42
+ text-shadow: 0 1px white;
43
+ font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
44
+ font-size: 1em;
45
+ text-align: left;
46
+ white-space: pre;
47
+ word-spacing: normal;
48
+ word-break: normal;
49
+ word-wrap: normal;
50
+ line-height: 1.5;
51
+ -moz-tab-size: 4;
52
+ tab-size: 4;
53
+ -webkit-hyphens: none;
54
+ -ms-hyphens: none;
55
+ hyphens: none;
56
+
57
+ // 避免默认
58
+ border: none;
59
+ padding: 0;
60
+ border-radius: 0;
61
+ }
62
+ pre[class*="language-"]::-moz-selection,
63
+ pre[class*="language-"] ::-moz-selection,
64
+ code[class*="language-"]::-moz-selection,
65
+ code[class*="language-"] ::-moz-selection {
66
+ text-shadow: none;
67
+ background: #b3d4fc;
68
+ }
69
+ pre[class*="language-"]::selection,
70
+ pre[class*="language-"] ::selection,
71
+ code[class*="language-"]::selection,
72
+ code[class*="language-"] ::selection {
73
+ text-shadow: none;
74
+ background: #b3d4fc;
75
+ }
76
+ @media print {
77
+ code[class*="language-"],
78
+ pre[class*="language-"] {
79
+ text-shadow: none;
80
+ }
81
+ }
82
+ /* Code blocks */
83
+ pre[class*="language-"] {
84
+ padding: 1em;
85
+ margin: 0.5em 0;
86
+ overflow: auto;
87
+ }
88
+ :not(pre) > code[class*="language-"],
89
+ pre[class*="language-"] {
90
+ background: @bg-gray;
91
+ }
92
+ /* Inline code */
93
+ :not(pre) > code[class*="language-"] {
94
+ padding: 0.1em;
95
+ border-radius: 0.3em;
96
+ white-space: normal;
97
+ }
98
+ .token.comment,
99
+ .token.prolog,
100
+ .token.doctype,
101
+ .token.cdata {
102
+ color: slategray;
103
+ }
104
+ .token.punctuation {
105
+ color: #999;
106
+ }
107
+ .namespace {
108
+ opacity: 0.7;
109
+ }
110
+ .token.property,
111
+ .token.tag,
112
+ .token.boolean,
113
+ .token.number,
114
+ .token.constant,
115
+ .token.symbol,
116
+ .token.deleted {
117
+ color: #905;
118
+ }
119
+ .token.selector,
120
+ .token.attr-name,
121
+ .token.string,
122
+ .token.char,
123
+ .token.builtin,
124
+ .token.inserted {
125
+ color: #690;
126
+ }
127
+ .token.operator,
128
+ .token.entity,
129
+ .token.url,
130
+ .language-css .token.string,
131
+ .style .token.string {
132
+ color: #9a6e3a;
133
+ background: hsla(0, 0%, 100%, 0.5);
134
+ }
135
+ .token.atrule,
136
+ .token.attr-value,
137
+ .token.keyword {
138
+ color: #07a;
139
+ }
140
+ .token.function,
141
+ .token.class-name {
142
+ color: #dd4a68;
143
+ }
144
+ .token.regex,
145
+ .token.important,
146
+ .token.variable {
147
+ color: #e90;
148
+ }
149
+ .token.important,
150
+ .token.bold {
151
+ font-weight: bold;
152
+ }
153
+ .token.italic {
154
+ font-style: italic;
155
+ }
156
+ .token.entity {
157
+ cursor: help;
158
+ }
159
+ }
@@ -0,0 +1,69 @@
1
+ // 折叠文本
2
+ .c-article-tinymce {
3
+ .e-details,
4
+ .e-summary {
5
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
6
+ Segoe UI Emoji, Segoe UI Symbol;
7
+ white-space: pre-wrap;
8
+ margin: 0;
9
+ }
10
+ .e-summary {
11
+ cursor: pointer;
12
+ position: relative;
13
+ border: 1px solid #ddd;
14
+ background-color: @bg-light;
15
+ padding: 8px 10px 8px 26px;
16
+ display: block;
17
+ margin-bottom: 0;
18
+ border-radius: 4px;
19
+ line-height: 1.6;
20
+ font-size: 14px;
21
+ letter-spacing: 0.5px;
22
+
23
+ // color: @primary;
24
+ // font-size:14px;
25
+ &:before {
26
+ content: ">";
27
+ display: block;
28
+ position: absolute;
29
+ left: 10px;
30
+ top: 8px;
31
+ color: #aaa;
32
+ transform: rotate(0);
33
+ }
34
+ &:after {
35
+ content: "🌷";
36
+ display: block;
37
+ position: absolute;
38
+ right: 10px;
39
+ top: 8px;
40
+ }
41
+ &.on {
42
+ &:before {
43
+ transform: rotate(90deg);
44
+ }
45
+ &:after {
46
+ content: "🌸";
47
+ }
48
+ border-bottom-left-radius: 0;
49
+ border-bottom-right-radius: 0;
50
+ }
51
+ }
52
+
53
+ .e-details {
54
+ padding: 10px;
55
+ border: 1px dashed #ddd;
56
+ margin-top: 0;
57
+ background: none;
58
+ border-top: none;
59
+ display: none;
60
+ }
61
+ }
62
+ .c-article-editor {
63
+ .e-summary {
64
+ cursor: text;
65
+ }
66
+ .e-details {
67
+ display: block;
68
+ }
69
+ }
@@ -0,0 +1,58 @@
1
+ //标题
2
+ .c-article-tinymce {
3
+ h1,
4
+ h2,
5
+ h3,
6
+ h4,
7
+ h5,
8
+ h6 {
9
+ margin-top: 24px;
10
+ margin-bottom: 16px;
11
+ font-weight: 600;
12
+ line-height: 1.25;
13
+ }
14
+
15
+ h1,
16
+ h2 {
17
+ padding-bottom: 0.3em;
18
+ border-bottom: 1px solid #eaecef;
19
+ }
20
+
21
+ h1 {
22
+ font-size: 2em;
23
+ }
24
+
25
+ h2 {
26
+ font-size: 1.5em;
27
+ }
28
+
29
+ h3 {
30
+ font-size: 1.25em;
31
+ }
32
+
33
+ h4 {
34
+ font-size: 1em;
35
+ // border-left: 5px solid @primary;
36
+ // padding: 6px 10px;
37
+ // background-color: @bg-light;
38
+ }
39
+
40
+ h5 {
41
+ font-size: 14px;
42
+ padding: 8px 10px;
43
+ background-color: @bg-light;
44
+ border-radius: 4px;
45
+ }
46
+
47
+ h6 {
48
+ font-size: 13px;
49
+ padding: 5px 0 10px 0;
50
+ border-bottom: 1px dotted #ddd;
51
+ &:before {
52
+ content: ">";
53
+ color: #ccc;
54
+ margin-right: 10px;
55
+ font-family: "宋体", Consolas;
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,9 @@
1
+ /* 水平线 */
2
+ .c-article-tinymce {
3
+ hr {
4
+ margin-top: 22px;
5
+ margin-bottom: 22px;
6
+ border: 0;
7
+ border-top: 1px solid #eeeeee;
8
+ }
9
+ }
@@ -0,0 +1,16 @@
1
+ //图片
2
+ .c-article-tinymce {
3
+ img {
4
+ height: auto;
5
+ padding: 5px;
6
+ border: 1px solid #eee;
7
+ margin: 5px;
8
+ }
9
+
10
+ .t-emotion {
11
+ padding: 0 1px;
12
+ border: none;
13
+ margin: 0;
14
+ vertical-align: -3px;
15
+ }
16
+ }
@@ -0,0 +1,21 @@
1
+ .hevue-imgpreview-wrap {
2
+ .he-img-wrap {
3
+ background: rgba(0, 0, 0, 0.8);
4
+ }
5
+ .arrow,
6
+ .he-close-icon {
7
+ display: block !important;
8
+ text-align: center !important;
9
+ }
10
+ .he-close-icon {
11
+ &:hover {
12
+ transform: scale(1.2);
13
+ }
14
+ }
15
+ }
16
+
17
+ .el-image-viewer__canvas {
18
+ img {
19
+ border: none;
20
+ }
21
+ }
@@ -0,0 +1,47 @@
1
+ // 编辑器内样式
2
+ .c-article-tinymce {
3
+ .w-latex {
4
+ .pr;
5
+ font-family: Georgia, "Times New Roman", Times, serif;
6
+ // &:after {
7
+ // content: "Latex";
8
+ // position: absolute;
9
+ // right: 0;
10
+ // top: -30px;
11
+ // background-color: @bg-black;
12
+ // color: #fff;
13
+ // border-radius: 3px;
14
+ // padding: 0 8px;
15
+ // line-height: 28px;
16
+ // height: 28px;
17
+ // box-sizing: border-box;
18
+ // font-size: 14px;
19
+ // font-family: consolas;
20
+ // }
21
+ }
22
+ }
23
+ .c-article-editor {
24
+ .e-latex-area {
25
+ min-height: 24px;
26
+ border-radius: 4px;
27
+ padding: 10px;
28
+ font-size: 14px;
29
+ white-space: pre-wrap;
30
+ background-color: #f1f8ff;
31
+ border: 1px solid #c8e1ff;
32
+ color: darken(#c8e1ff, 20%);
33
+ font-family: Georgia, "Times New Roman", Times, serif;
34
+ .pr;
35
+ &:after {
36
+ content: "Latex";
37
+ position: absolute;
38
+ right: 10px;
39
+ top: 10px;
40
+ background-color: darken(#c8e1ff, 20%);
41
+ color: #fff;
42
+ border-radius: 3px;
43
+ padding: 0 8px;
44
+ font-family: consolas;
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,64 @@
1
+ /* 列表 */
2
+ .c-article-tinymce {
3
+ ul,
4
+ ol {
5
+ margin: 20px 0;
6
+ }
7
+ ul,
8
+ ol {
9
+ padding-left: 40px;
10
+ }
11
+
12
+ /* 旧版checklist,无创建逻辑,仅作留存显示 */
13
+ .e-checklist {
14
+ div {
15
+ position: relative;
16
+ padding-left: 1.4em;
17
+ }
18
+ div:before {
19
+ display: block;
20
+ position: absolute;
21
+ left: 0;
22
+ top: 0.7em;
23
+ content: "";
24
+ cursor: pointer;
25
+ height: 1em;
26
+ width: 1em;
27
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
28
+ background-size: 100%;
29
+ background-repeat: no-repeat;
30
+ background-position: 0 0;
31
+ }
32
+ div.on:before {
33
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
34
+ }
35
+ }
36
+
37
+ // 新版checklist
38
+ .tox-checklist > li {
39
+ line-height: 2.2;
40
+ margin: 0 !important;
41
+ }
42
+ .tox-checklist > li:not(.tox-checklist--hidden) {
43
+ list-style: none;
44
+ margin: 0.25em 0;
45
+ }
46
+ .tox-checklist > li:not(.tox-checklist--hidden)::before {
47
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
48
+ background-size: 100%;
49
+ content: "";
50
+ cursor: pointer;
51
+ height: 1em;
52
+ margin-left: -1.5em;
53
+ margin-top: 0.7em;
54
+ position: absolute;
55
+ width: 1em;
56
+ }
57
+ .tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
58
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
59
+ }
60
+ [dir="rtl"] .tox-checklist > li:not(.tox-checklist--hidden)::before {
61
+ margin-left: 0;
62
+ margin-right: -1.5em;
63
+ }
64
+ }
@@ -0,0 +1,59 @@
1
+ .c-article-editor {
2
+ .mce-pagebreak {
3
+ padding: 0;
4
+ outline: none;
5
+ border: none;
6
+ border-top: 1px dashed #aaa;
7
+ height: 10px !important;
8
+ margin: 20px auto;
9
+ }
10
+ }
11
+ .c-article-chunk {
12
+ display: none;
13
+ &.on {
14
+ display: block;
15
+ }
16
+ }
17
+ .c-article-all {
18
+ width: 100%;
19
+ margin: 10px auto !important;
20
+ display: block !important;
21
+ }
22
+ .c-article-pages {
23
+ margin: 10px;
24
+ max-width: 100%;
25
+ overflow-x: auto;
26
+ text-align: center;
27
+ justify-content: center;
28
+
29
+ .el-pager {
30
+ margin: 0;
31
+ padding: 0;
32
+ }
33
+ }
34
+
35
+ // 打印分页
36
+ .c-article {
37
+ .e-print-pagebreak {
38
+ .none;
39
+ }
40
+ }
41
+ .c-article-editor {
42
+ .e-print-pagebreak {
43
+ .db;
44
+ border: none;
45
+ border-bottom: 1px dotted #7ddcf9;
46
+ font-size: 0;
47
+ width: 100%;
48
+ height: 0;
49
+ box-sizing: border-box;
50
+ margin: 0 !important;
51
+ }
52
+ }
53
+ @media print {
54
+ .c-article {
55
+ .e-print-pagebreak {
56
+ page-break-after: always;
57
+ }
58
+ }
59
+ }
@@ -0,0 +1,8 @@
1
+ // 段落
2
+ .c-article-tinymce {
3
+ p,
4
+ div {
5
+ margin: 0;
6
+ line-height: 2.2;
7
+ }
8
+ }
File without changes
@@ -0,0 +1,12 @@
1
+ /* 引用 */
2
+ .c-article-tinymce {
3
+ blockquote {
4
+ border: 1px dashed @border-hr;
5
+ border-radius: 4px;
6
+ padding: 10px;
7
+ background-color: @bg-light;
8
+ font-size: 14px;
9
+ line-height: 2;
10
+ margin: 10px 0;
11
+ }
12
+ }
@@ -0,0 +1,51 @@
1
+ /* 表格 */
2
+ .c-article-tinymce {
3
+ table {
4
+ border-collapse: collapse;
5
+ width: 100%;
6
+ height: auto;
7
+ margin: 10px 0;
8
+ overflow-x: auto;
9
+ max-width: 100%;
10
+ border: none;
11
+
12
+ line-height: 2.2;
13
+ color: @color;
14
+
15
+ td,
16
+ th {
17
+ padding: 6px 10px;
18
+ }
19
+ td {
20
+ border: 1px solid #eee;
21
+ }
22
+ tr:nth-child(2n + 1) {
23
+ background-color: @bg-light;
24
+ }
25
+ tr:first-child {
26
+ background-color: @bg-light;
27
+ font-weight: 600;
28
+ }
29
+ }
30
+ }
31
+
32
+ @media screen and (max-width: @phone) {
33
+ .c-article-tinymce {
34
+ table {
35
+ display: block;
36
+ width: 100% !important;
37
+ height: auto !important;
38
+
39
+ th,
40
+ td {
41
+ white-space: nowrap;
42
+ }
43
+ }
44
+ }
45
+ }
46
+
47
+ @media print {
48
+ table {
49
+ page-break-inside: avoid !important;
50
+ }
51
+ }
@@ -0,0 +1,35 @@
1
+ .c-article-tinymce {
2
+ video {
3
+ background-color: #333;
4
+ width: 100%;
5
+ height: 800px;
6
+ display: block;
7
+ cursor: pointer;
8
+ }
9
+ }
10
+ .c-article-videox {
11
+ iframe,
12
+ iframe[allowfullscreen="allowfullscreen"] {
13
+ width: 100%;
14
+ height: 800px;
15
+ border: 1px solid #eee;
16
+ box-sizing: border-box;
17
+ }
18
+ }
19
+ .c-article-editor {
20
+ video,
21
+ iframe {
22
+ cursor: default;
23
+ }
24
+ iframe {
25
+ width: auto;
26
+ height: auto;
27
+ }
28
+ }
29
+ @media screen and (max-width: @ipad) {
30
+ .c-article video,
31
+ .c-article-videox iframe {
32
+ height: auto;
33
+ min-height: 200px;
34
+ }
35
+ }