mirror of
https://dl.bcrjl.com/ghg/HaoOuBa/Joe.git
synced 2026-02-17 13:10:05 +08:00
更新
This commit is contained in:
haoouba
2
typecho/write/css/joe.write.min.css
vendored
2
typecho/write/css/joe.write.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -206,214 +206,6 @@ body.fullscreen {
|
||||
border-radius: 3px;
|
||||
background: #c0c4cc;
|
||||
}
|
||||
.cm-preview-content {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
color: #606266;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #303133;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
h1 {
|
||||
padding: 0 15px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8.5px;
|
||||
left: 0;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
border-radius: 50%;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
padding: 0 15px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
padding: 0 15px 0 20px;
|
||||
&::before {
|
||||
content: '#';
|
||||
color: #409eff;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
&::before {
|
||||
content: '「';
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&::after {
|
||||
content: '」';
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
padding: 0 15px 0 28px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0 15px 0 28px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: #e4e7ed;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
p {
|
||||
line-height: 26px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
line-height: 26px;
|
||||
margin-bottom: 15px;
|
||||
background: #ecf8ff;
|
||||
border-left: 5px solid #50bfff;
|
||||
color: #50bfff;
|
||||
padding: 8px 15px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: #c0c4cc;
|
||||
}
|
||||
}
|
||||
p code {
|
||||
display: inline-block;
|
||||
min-height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background: #fdf6ec;
|
||||
padding: 0 8px;
|
||||
color: #e6a23c;
|
||||
vertical-align: top;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 36px;
|
||||
li {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
ol li {
|
||||
list-style: decimal;
|
||||
}
|
||||
ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
color: #909399;
|
||||
margin-bottom: 15px;
|
||||
font-size: 13px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-left: 1px solid #ebeef5;
|
||||
border-collapse: collapse;
|
||||
td,
|
||||
th {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
font-weight: 500;
|
||||
background: #ebeef5;
|
||||
}
|
||||
}
|
||||
}
|
||||
img:not(.owo) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.35s, box-shadow 0.35s;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.owo {
|
||||
max-height: 26px;
|
||||
vertical-align: top;
|
||||
}
|
||||
a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
|
||||
display: inline-block;
|
||||
line-height: 26px;
|
||||
color: #409eff;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cm-autosave {
|
||||
position: absolute;
|
||||
@@ -468,6 +260,215 @@ body.fullscreen {
|
||||
}
|
||||
}
|
||||
|
||||
.cm-preview-content {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
white-space: normal;
|
||||
overflow-wrap: break-word;
|
||||
color: #606266;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #303133;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
}
|
||||
h1 {
|
||||
padding: 0 15px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8.5px;
|
||||
left: 0;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
border-radius: 50%;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
padding: 0 15px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
bottom: 10%;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background: #409eff;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
padding: 0 15px 0 20px;
|
||||
&::before {
|
||||
content: '#';
|
||||
color: #409eff;
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
&::before {
|
||||
content: '「';
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
&::after {
|
||||
content: '」';
|
||||
color: #409eff;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
padding: 0 15px 0 28px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0 15px 0 28px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: #e4e7ed;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
p {
|
||||
line-height: 26px;
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
line-height: 26px;
|
||||
margin-bottom: 15px;
|
||||
background: #ecf8ff;
|
||||
border-left: 5px solid #50bfff;
|
||||
color: #50bfff;
|
||||
padding: 8px 15px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #fff;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background: #c0c4cc;
|
||||
}
|
||||
}
|
||||
p code {
|
||||
display: inline-block;
|
||||
min-height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background: #fdf6ec;
|
||||
padding: 0 8px;
|
||||
color: #e6a23c;
|
||||
vertical-align: top;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 36px;
|
||||
li {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
ol li {
|
||||
list-style: decimal;
|
||||
}
|
||||
ul li {
|
||||
list-style: disc;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
color: #909399;
|
||||
margin-bottom: 15px;
|
||||
font-size: 13px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-left: 1px solid #ebeef5;
|
||||
border-collapse: collapse;
|
||||
td,
|
||||
th {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
font-weight: 500;
|
||||
background: #ebeef5;
|
||||
}
|
||||
}
|
||||
}
|
||||
img:not(.owo) {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.35s, box-shadow 0.35s;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.owo {
|
||||
max-height: 26px;
|
||||
vertical-align: top;
|
||||
}
|
||||
a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
|
||||
display: inline-block;
|
||||
line-height: 26px;
|
||||
color: #409eff;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -350,15 +350,15 @@ export default class JoeAction {
|
||||
}
|
||||
handleNetease(cm, type) {
|
||||
this._openModal({
|
||||
title: type ? '网易云歌单' : '网抑云单首',
|
||||
title: type ? '网易云歌单' : '网易云单首',
|
||||
innerHtml: `
|
||||
<div class="fitem">
|
||||
<label>歌${type ? '单' : '曲'} ID</label>
|
||||
<input autocomplete="off" name="id" placeholder="请输入歌${type ? '单' : '曲'}ID"/>
|
||||
</div>
|
||||
<div class="fitem">
|
||||
<label>显示宽度</label>
|
||||
<input autocomplete="off" value="100%" name="width" placeholder="请输入宽度（百分比/像素）"/>
|
||||
<label>主题色彩</label>
|
||||
<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#1989fa" name="color" type="color"/>
|
||||
</div>
|
||||
<div class="fitem">
|
||||
<label>自动播放</label>
|
||||
@@ -370,9 +370,9 @@ export default class JoeAction {
|
||||
`,
|
||||
confirm: () => {
|
||||
const id = $(".cm-modal input[name='id']").val();
|
||||
const width = $(".cm-modal input[name='width']").val() || '100%';
|
||||
const color = $(".cm-modal input[name='color']").val();
|
||||
const autoplay = $(".cm-modal select[name='autoplay']").val();
|
||||
const str = `\n{${type ? 'music-list' : 'music'} id="${id}" width="${width}" ${autoplay === '1' ? 'autoplay="autoplay"' : ''}/}\n\n`;
|
||||
const str = `\n{${type ? 'music-list' : 'music'} id="${id}" color="${color}" ${autoplay === '1' ? 'autoplay="autoplay"' : ''}/}\n\n`;
|
||||
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
|
||||
else this._replaceSelection(cm, str);
|
||||
cm.focus();
|
||||
@@ -679,4 +679,45 @@ export default class JoeAction {
|
||||
}
|
||||
});
|
||||
}
|
||||
handleMp3(cm) {
|
||||
this._openModal({
|
||||
title: '插入音乐',
|
||||
innerHtml: `
|
||||
<div class="fitem">
|
||||
<label>音频名称</label>
|
||||
<input autocomplete="off" name="name" placeholder="请输入音频名称"/>
|
||||
</div>
|
||||
<div class="fitem">
|
||||
<label>音频地址</label>
|
||||
<input autocomplete="off" name="url" placeholder="请输入音频地址"/>
|
||||
</div>
|
||||
<div class="fitem">
|
||||
<label>音频封面</label>
|
||||
<input autocomplete="off" name="cover" placeholder="请输入图片地址"/>
|
||||
</div>
|
||||
<div class="fitem">
|
||||
<label>主题色彩</label>
|
||||
<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#f0ad4e" name="theme" type="color"/>
|
||||
</div>
|
||||
<div class="fitem">
|
||||
<label>自动播放</label>
|
||||
<select name="autoplay">
|
||||
<option value="1" selected>是</option>
|
||||
<option value="0">否</option>
|
||||
</select>
|
||||
</div>
|
||||
`,
|
||||
confirm: () => {
|
||||
const name = $(".cm-modal input[name='name']").val();
|
||||
const url = $(".cm-modal input[name='url']").val();
|
||||
const cover = $(".cm-modal input[name='cover']").val();
|
||||
const theme = $(".cm-modal input[name='theme']").val();
|
||||
const autoplay = $(".cm-modal select[name='autoplay']").val();
|
||||
const str = `\n{mp3 name="${name}" url="${url}" cover="${cover}" theme="${theme}" ${autoplay === '1' ? 'autoplay="autoplay"' : ''}/}\n\n`;
|
||||
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
|
||||
else this._replaceSelection(cm, str);
|
||||
cm.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,38 @@
|
||||
const parser = new HyperDown();
|
||||
const player = window.JoeConfig.playerAPI;
|
||||
const div = document.createElement('div');
|
||||
|
||||
export default function createPreviewHtml(str) {
|
||||
str = str.replace(/ /g, ' ');
|
||||
str = str.replace(/ /g, ' ');
|
||||
|
||||
/* 生成HTML元素 */
|
||||
str = parser.makeHtml(str);
|
||||
str = parser.makeHtml(str);
|
||||
|
||||
str = str.replace(/{x}/g, '<input type="checkbox" class="joe_detail__article-checkbox" checked disabled></input>');
|
||||
str = str.replace(/{ }/g, '<input type="checkbox" class="joe_detail__article-checkbox" disabled></input>');
|
||||
str = str.replace(/\:\:\(\s*(呵呵|哈哈|吐舌|太开心|笑眼|花心|小乖|乖|捂嘴笑|滑稽|你懂的|不高兴|怒|汗|黑线|泪|真棒|喷|惊哭|阴险|鄙视|酷|啊|狂汗|what|疑问|酸爽|呀咩爹|委屈|惊讶|睡觉|笑尿|挖鼻|吐|犀利|小红脸|懒得理|勉强|爱心|心碎|玫瑰|礼物|彩虹|太阳|星星月亮|钱币|茶杯|蛋糕|大拇指|胜利|haha|OK|沙发|手纸|香蕉|便便|药丸|红领巾|蜡烛|音乐|灯泡|开心|钱|咦|呼|冷|生气|弱|吐血|狗头)\s*\)/g, function ($0, $1) {
|
||||
$1 = encodeURI($1).replace(/%/g, '');
|
||||
return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/paopao/${$1}_2x.png" />`;
|
||||
});
|
||||
str = str.replace(/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/g, function ($0, $1) {
|
||||
$1 = encodeURI($1).replace(/%/g, '');
|
||||
return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/aru/${$1}_2x.png" />`;
|
||||
});
|
||||
str = str.replace(/{mtitle([^}]*)\/}/g, '<joe-mtitle $1></joe-mtitle>');
|
||||
str = str.replace(/{dplayer([^}]*)\/}/g, '<joe-dplayer player="' + player + '" $1></joe-dplayer>');
|
||||
str = str.replace(/{bilibili([^}]*)\/}/g, '<joe-bilibili $1></joe-bilibili>');
|
||||
str = str.replace(/{music-list([^}]*)\/}/g, '<joe-mlist $1></joe-mlist>');
|
||||
str = str.replace(/{music([^}]*)\/}/g, '<joe-music $1></joe-music>');
|
||||
str = str.replace(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>');
|
||||
str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>');
|
||||
str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
|
||||
str = str.replace(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>');
|
||||
str = str.replace(/{progress([^}]*)\/}/g, '<joe-progress $1></joe-progress>');
|
||||
str = str.replace(/{hide[^}]*}([\s\S]*?){\/hide}/g, '<joe-hide></joe-hide>');
|
||||
str = str.replace(/{card-default([^}]*)}([\s\S]*?){\/card-default}/g, '<section style="margin-bottom: 15px"><joe-card-default $1><span class="_temp" style="display: none">$2</span></joe-card-default></section>');
|
||||
str = str.replace(/{callout([^}]*)}([\s\S]*?){\/callout}/g, '<section style="margin-bottom: 15px"><joe-callout $1><span class="_temp" style="display: none">$2</span></joe-callout></section>');
|
||||
str = str.replace(/{x}/g, '<input type="checkbox" class="joe_detail__article-checkbox" checked disabled></input>');
|
||||
str = str.replace(/{ }/g, '<input type="checkbox" class="joe_detail__article-checkbox" disabled></input>');
|
||||
str = str.replace(/\:\:\(\s*(呵呵|哈哈|吐舌|太开心|笑眼|花心|小乖|乖|捂嘴笑|滑稽|你懂的|不高兴|怒|汗|黑线|泪|真棒|喷|惊哭|阴险|鄙视|酷|啊|狂汗|what|疑问|酸爽|呀咩爹|委屈|惊讶|睡觉|笑尿|挖鼻|吐|犀利|小红脸|懒得理|勉强|爱心|心碎|玫瑰|礼物|彩虹|太阳|星星月亮|钱币|茶杯|蛋糕|大拇指|胜利|haha|OK|沙发|手纸|香蕉|便便|药丸|红领巾|蜡烛|音乐|灯泡|开心|钱|咦|呼|冷|生气|弱|吐血|狗头)\s*\)/g, function ($0, $1) {
|
||||
$1 = encodeURI($1).replace(/%/g, '');
|
||||
return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/paopao/${$1}_2x.png" />`;
|
||||
});
|
||||
str = str.replace(/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/g, function ($0, $1) {
|
||||
$1 = encodeURI($1).replace(/%/g, '');
|
||||
return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/aru/${$1}_2x.png" />`;
|
||||
});
|
||||
str = str.replace(/{mtitle([^}]*)\/}/g, '<joe-mtitle $1></joe-mtitle>');
|
||||
str = str.replace(/{dplayer([^}]*)\/}/g, '<joe-dplayer player="' + player + '" $1></joe-dplayer>');
|
||||
str = str.replace(/{bilibili([^}]*)\/}/g, '<joe-bilibili $1></joe-bilibili>');
|
||||
str = str.replace(/{music-list([^}]*)\/}/g, '<joe-mlist $1></joe-mlist>');
|
||||
str = str.replace(/{music([^}]*)\/}/g, '<joe-music $1></joe-music>');
|
||||
str = str.replace(/{mp3([^}]*)\/}/g, '<joe-mp3 $1></joe-mp3>');
|
||||
str = str.replace(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>');
|
||||
str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>');
|
||||
str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
|
||||
str = str.replace(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>');
|
||||
str = str.replace(/{progress([^}]*)\/}/g, '<joe-progress $1></joe-progress>');
|
||||
str = str.replace(/{hide[^}]*}([\s\S]*?){\/hide}/g, '<joe-hide></joe-hide>');
|
||||
str = str.replace(/{card-default([^}]*)}([\s\S]*?){\/card-default}/g, '<section style="margin-bottom: 15px"><joe-card-default $1><span class="_temp" style="display: none">$2</span></joe-card-default></section>');
|
||||
str = str.replace(/{callout([^}]*)}([\s\S]*?){\/callout}/g, '<section style="margin-bottom: 15px"><joe-callout $1><span class="_temp" style="display: none">$2</span></joe-callout></section>');
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = str;
|
||||
div.innerHTML = div.innerHTML.replace(/<p><\/p>/g, '');
|
||||
const _ = div.innerHTML;
|
||||
$('.cm-preview-content').html(_);
|
||||
$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));
|
||||
$('.cm-preview-content').html(str);
|
||||
$('.cm-preview-content p:empty').remove();
|
||||
$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));
|
||||
}
|
||||
|
||||
@@ -180,6 +180,11 @@ export default [
|
||||
title: '标注',
|
||||
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M842.13 910h-72.36c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.36c19.88 0 36 16.12 36 36s-16.11 36-36 36zm-177.69 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.57 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.11 36-36 36zm-177.56 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zM150 878.02c-19.88 0-36-16.1-36-35.98V769.8c0-19.88 16.12-36 36-36s36 16.12 36 36V842c0 19.88-16.12 36.02-36 36.02zm724-55.2c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zM150 700.47c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zm724-55.22c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.89-16.12 36-36 36zM150 522.91c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zm724-55.22c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zM150 345.34c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.89-16.12 36-36 36zm724-55.21c-19.88 0-36-16.12-36-36V182c0-19.88 16.12-36.05 36-36.05s36 16.07 36 35.95v72.23c0 19.88-16.12 36-36 36zM786.85 186h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.56 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.56 0H359.5c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.57 0H182c-19.88 0-36.03-16.12-36.03-36s16.08-36 35.97-36h72.23c19.88 0 36 16.12 36 36s-16.13 36-36.01 36z"/><path d="M213 120v784c0 4.42-3.58 8-8 8h-84c-4.42 0-8-3.58-8-8V120c0-4.42 3.58-8 8-8h84c4.42 0 8 3.58 8 8z"/></svg>'
|
||||
},
|
||||
{
|
||||
type: 'mp3',
|
||||
title: '外部音乐',
|
||||
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M736 249.6c-12.8-6.4-32-6.4-44.8 6.4-12.8 12.8-6.4 32 6.4 44.8C761.6 352 800 428.8 800 512c0 76.8-32 153.6-89.6 204.8-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0C825.6 697.6 864 608 864 512c-6.4-102.4-51.2-198.4-128-262.4z"/><path d="M640 345.6c-12.8-6.4-32-6.4-44.8 6.4-12.8 12.8-6.4 32 6.4 44.8 38.4 25.6 57.6 70.4 57.6 115.2s-19.2 83.2-44.8 108.8c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0 44.8-38.4 64-96 64-153.6-6.4-64-38.4-128-83.2-166.4zM499.2 211.2L288 345.6H185.6c-12.8 0-19.2 6.4-19.2 19.2v313.6c0 12.8 12.8 25.6 19.2 25.6H288l211.2 115.2H512c12.8 0 19.2-6.4 19.2-19.2V230.4c0-6.4 0-6.4-6.4-12.8 0-6.4-19.2-12.8-25.6-6.4z"/></svg>'
|
||||
},
|
||||
/* --------------------------- 短代码结束 --------------------------- */
|
||||
{
|
||||
type: 'clean',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -10,27 +10,27 @@ import JoeAction from './_actions';
|
||||
import createPreviewHtml from './_create';
|
||||
|
||||
class Joe extends JoeAction {
|
||||
constructor() {
|
||||
super();
|
||||
this.plugins = [history(), classHighlightStyle, bracketMatching(), closeBrackets()];
|
||||
this._isPasting = false;
|
||||
this.init_ViewPort();
|
||||
this.init_Editor();
|
||||
this.init_Preview();
|
||||
this.init_Tools();
|
||||
this.init_Insert();
|
||||
this.init_AutoSave();
|
||||
}
|
||||
constructor() {
|
||||
super();
|
||||
this.plugins = [history(), classHighlightStyle, bracketMatching(), closeBrackets()];
|
||||
this._isPasting = false;
|
||||
this.init_ViewPort();
|
||||
this.init_Editor();
|
||||
this.init_Preview();
|
||||
this.init_Tools();
|
||||
this.init_Insert();
|
||||
this.init_AutoSave();
|
||||
}
|
||||
|
||||
/* 已测 √ */
|
||||
init_ViewPort() {
|
||||
if ($('meta[name="viewport"]').length > 0) $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover');
|
||||
else $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">');
|
||||
}
|
||||
/* 已测 √ */
|
||||
init_ViewPort() {
|
||||
if ($('meta[name="viewport"]').length > 0) $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover');
|
||||
else $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">');
|
||||
}
|
||||
|
||||
/* 已测 √ */
|
||||
init_Editor() {
|
||||
$('#text').before(`
|
||||
/* 已测 √ */
|
||||
init_Editor() {
|
||||
$('#text').before(`
|
||||
<div class="cm-container">
|
||||
<div class="cm-tools"></div>
|
||||
<div class="cm-mainer">
|
||||
@@ -42,315 +42,322 @@ class Joe extends JoeAction {
|
||||
<div class="cm-progress-right"></div>
|
||||
</div>
|
||||
`);
|
||||
createPreviewHtml($('#text').val());
|
||||
const cm = new EditorView({
|
||||
state: EditorState.create({
|
||||
doc: $('#text').val(),
|
||||
extensions: [
|
||||
...this.plugins,
|
||||
keymap.of([defaultTabBinding, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
|
||||
EditorView.updateListener.of(update => {
|
||||
if (!update.docChanged) return;
|
||||
if (window.requestAnimationFrame) window.requestAnimationFrame(() => createPreviewHtml(update.state.doc.toString()));
|
||||
else createPreviewHtml(update.state.doc.toString());
|
||||
}),
|
||||
EditorView.domEventHandlers({
|
||||
paste: e => {
|
||||
const clipboardData = e.clipboardData;
|
||||
if (!clipboardData || !clipboardData.items) return;
|
||||
const items = clipboardData.items;
|
||||
if (!items.length) return;
|
||||
let blob = null;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
e.preventDefault();
|
||||
blob = items[i].getAsFile();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!blob) return;
|
||||
let api = window.JoeConfig.uploadAPI;
|
||||
if (!api) return;
|
||||
const cid = $('input[name="cid"]').val();
|
||||
cid && (api = api + '&cid=' + cid);
|
||||
if (this._isPasting) return;
|
||||
this._isPasting = true;
|
||||
const fileName = Date.now().toString(36) + '.png';
|
||||
let formData = new FormData();
|
||||
formData.append('name', fileName);
|
||||
formData.append('file', blob, fileName);
|
||||
$.ajax({
|
||||
url: api,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
dataType: 'json',
|
||||
xhr: () => {
|
||||
const xhr = $.ajaxSettings.xhr();
|
||||
if (!xhr.upload) return;
|
||||
xhr.upload.addEventListener(
|
||||
'progress',
|
||||
e => {
|
||||
let percent = (e.loaded / e.total) * 100;
|
||||
$('.cm-progress-left').width(percent / 2 + '%');
|
||||
$('.cm-progress-right').width(percent / 2 + '%');
|
||||
},
|
||||
false
|
||||
);
|
||||
return xhr;
|
||||
},
|
||||
success: res => {
|
||||
$('.cm-progress-left').width(0);
|
||||
$('.cm-progress-right').width(0);
|
||||
this._isPasting = false;
|
||||
const str = `${super._getLineCh(cm) ? '\n' : ''}![${res[1].title}](${res[0]})\n`;
|
||||
super._replaceSelection(cm, str);
|
||||
cm.focus();
|
||||
},
|
||||
error: () => {
|
||||
$('.cm-progress-left').width(0);
|
||||
$('.cm-progress-right').width(0);
|
||||
this._isPasting = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
],
|
||||
tabSize: 4
|
||||
})
|
||||
});
|
||||
$('.cm-mainer').prepend(cm.dom);
|
||||
$('#text')[0].form && $('#text')[0].form.addEventListener('submit', () => $('#text').val(cm.state.doc.toString()));
|
||||
this.cm = cm;
|
||||
}
|
||||
createPreviewHtml($('#text').val());
|
||||
let _temp = null;
|
||||
const cm = new EditorView({
|
||||
state: EditorState.create({
|
||||
doc: $('#text').val(),
|
||||
extensions: [
|
||||
...this.plugins,
|
||||
keymap.of([defaultTabBinding, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
|
||||
EditorView.updateListener.of(update => {
|
||||
if (!update.docChanged) return;
|
||||
if (_temp !== update.state.doc.toString()) {
|
||||
_temp = update.state.doc.toString();
|
||||
if (window.requestAnimationFrame) window.requestAnimationFrame(() => createPreviewHtml(update.state.doc.toString()));
|
||||
else createPreviewHtml(update.state.doc.toString());
|
||||
}
|
||||
}),
|
||||
EditorView.domEventHandlers({
|
||||
paste: e => {
|
||||
const clipboardData = e.clipboardData;
|
||||
if (!clipboardData || !clipboardData.items) return;
|
||||
const items = clipboardData.items;
|
||||
if (!items.length) return;
|
||||
let blob = null;
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
if (items[i].type.indexOf('image') !== -1) {
|
||||
e.preventDefault();
|
||||
blob = items[i].getAsFile();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!blob) return;
|
||||
let api = window.JoeConfig.uploadAPI;
|
||||
if (!api) return;
|
||||
const cid = $('input[name="cid"]').val();
|
||||
cid && (api = api + '&cid=' + cid);
|
||||
if (this._isPasting) return;
|
||||
this._isPasting = true;
|
||||
const fileName = Date.now().toString(36) + '.png';
|
||||
let formData = new FormData();
|
||||
formData.append('name', fileName);
|
||||
formData.append('file', blob, fileName);
|
||||
$.ajax({
|
||||
url: api,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
dataType: 'json',
|
||||
xhr: () => {
|
||||
const xhr = $.ajaxSettings.xhr();
|
||||
if (!xhr.upload) return;
|
||||
xhr.upload.addEventListener(
|
||||
'progress',
|
||||
e => {
|
||||
let percent = (e.loaded / e.total) * 100;
|
||||
$('.cm-progress-left').width(percent / 2 + '%');
|
||||
$('.cm-progress-right').width(percent / 2 + '%');
|
||||
},
|
||||
false
|
||||
);
|
||||
return xhr;
|
||||
},
|
||||
success: res => {
|
||||
$('.cm-progress-left').width(0);
|
||||
$('.cm-progress-right').width(0);
|
||||
this._isPasting = false;
|
||||
const str = `${super._getLineCh(cm) ? '\n' : ''}![${res[1].title}](${res[0]})\n`;
|
||||
super._replaceSelection(cm, str);
|
||||
cm.focus();
|
||||
},
|
||||
error: () => {
|
||||
$('.cm-progress-left').width(0);
|
||||
$('.cm-progress-right').width(0);
|
||||
this._isPasting = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
],
|
||||
tabSize: 4
|
||||
})
|
||||
});
|
||||
$('.cm-mainer').prepend(cm.dom);
|
||||
$('#text')[0].form && $('#text')[0].form.addEventListener('submit', () => $('#text').val(cm.state.doc.toString()));
|
||||
this.cm = cm;
|
||||
}
|
||||
|
||||
/* 已测 √ */
|
||||
init_Preview() {
|
||||
const move = (nowClientX, nowWidth, clientX) => {
|
||||
let moveX = nowClientX - clientX;
|
||||
let moveWidth = nowWidth + moveX;
|
||||
if (moveWidth <= 0) moveWidth = 0;
|
||||
if (moveWidth >= $('.cm-mainer').outerWidth() - 16) moveWidth = $('.cm-mainer').outerWidth() - 16;
|
||||
$('.cm-preview').width(moveWidth);
|
||||
};
|
||||
$('.cm-resize').on({
|
||||
mousedown: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const nowWidth = $('.cm-preview').outerWidth();
|
||||
const nowClientX = e.clientX;
|
||||
$('.cm-preview').addClass('move');
|
||||
document.onmousemove = _e => {
|
||||
if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.clientX));
|
||||
else move(nowClientX, nowWidth, _e.clientX);
|
||||
};
|
||||
document.onmouseup = () => {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
$('.cm-preview').removeClass('move');
|
||||
};
|
||||
return false;
|
||||
},
|
||||
touchstart: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const nowWidth = $('.cm-preview').outerWidth();
|
||||
const nowClientX = e.originalEvent.targetTouches[0].clientX;
|
||||
$('.cm-preview').addClass('move');
|
||||
document.ontouchmove = _e => {
|
||||
if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.targetTouches[0].clientX));
|
||||
else move(nowClientX, nowWidth, _e.targetTouches[0].clientX);
|
||||
};
|
||||
document.ontouchend = () => {
|
||||
document.ontouchmove = null;
|
||||
document.ontouchend = null;
|
||||
$('.cm-preview').removeClass('move');
|
||||
};
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
/* 已测 √ */
|
||||
init_Preview() {
|
||||
const move = (nowClientX, nowWidth, clientX) => {
|
||||
let moveX = nowClientX - clientX;
|
||||
let moveWidth = nowWidth + moveX;
|
||||
if (moveWidth <= 0) moveWidth = 0;
|
||||
if (moveWidth >= $('.cm-mainer').outerWidth() - 16) moveWidth = $('.cm-mainer').outerWidth() - 16;
|
||||
$('.cm-preview').width(moveWidth);
|
||||
};
|
||||
$('.cm-resize').on({
|
||||
mousedown: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const nowWidth = $('.cm-preview').outerWidth();
|
||||
const nowClientX = e.clientX;
|
||||
$('.cm-preview').addClass('move');
|
||||
document.onmousemove = _e => {
|
||||
if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.clientX));
|
||||
else move(nowClientX, nowWidth, _e.clientX);
|
||||
};
|
||||
document.onmouseup = () => {
|
||||
document.onmousemove = null;
|
||||
document.onmouseup = null;
|
||||
$('.cm-preview').removeClass('move');
|
||||
};
|
||||
return false;
|
||||
},
|
||||
touchstart: e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const nowWidth = $('.cm-preview').outerWidth();
|
||||
const nowClientX = e.originalEvent.targetTouches[0].clientX;
|
||||
$('.cm-preview').addClass('move');
|
||||
document.ontouchmove = _e => {
|
||||
if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.targetTouches[0].clientX));
|
||||
else move(nowClientX, nowWidth, _e.targetTouches[0].clientX);
|
||||
};
|
||||
document.ontouchend = () => {
|
||||
document.ontouchmove = null;
|
||||
document.ontouchend = null;
|
||||
$('.cm-preview').removeClass('move');
|
||||
};
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* 已测 √ */
|
||||
init_Tools() {
|
||||
tools.forEach(item => {
|
||||
if (item.type === 'title') {
|
||||
super.handleTitle(this.cm, item);
|
||||
} else {
|
||||
const el = $(`<div class="cm-tools-item" title="${item.title}">${item.innerHTML}</div>`);
|
||||
el.on('click', e => {
|
||||
e.preventDefault();
|
||||
switch (item.type) {
|
||||
case 'fullScreen':
|
||||
super.handleFullScreen(el);
|
||||
break;
|
||||
case 'publish':
|
||||
super.handlePublish();
|
||||
break;
|
||||
case 'undo':
|
||||
super.handleUndo(this.cm);
|
||||
break;
|
||||
case 'redo':
|
||||
super.handleRedo(this.cm);
|
||||
break;
|
||||
case 'time':
|
||||
super.handleTime(this.cm);
|
||||
break;
|
||||
case 'bold':
|
||||
super._insetAmboText(this.cm, '**');
|
||||
break;
|
||||
case 'italic':
|
||||
super._insetAmboText(this.cm, '*');
|
||||
break;
|
||||
case 'delete':
|
||||
super._insetAmboText(this.cm, '~~');
|
||||
break;
|
||||
case 'code-inline':
|
||||
super._insetAmboText(this.cm, '`');
|
||||
break;
|
||||
case 'indent':
|
||||
super.handleIndent(this.cm);
|
||||
break;
|
||||
case 'hr':
|
||||
super.handleHr(this.cm);
|
||||
break;
|
||||
case 'clean':
|
||||
super.handleClean(this.cm);
|
||||
break;
|
||||
case 'ordered-list':
|
||||
super.handleOrdered(this.cm);
|
||||
break;
|
||||
case 'unordered-list':
|
||||
super.handleUnordered(this.cm);
|
||||
break;
|
||||
case 'quote':
|
||||
super.handleQuote(this.cm);
|
||||
break;
|
||||
case 'download':
|
||||
super.handleDownload(this.cm);
|
||||
break;
|
||||
case 'link':
|
||||
super.handleLink(this.cm);
|
||||
break;
|
||||
case 'image':
|
||||
super.handleImage(this.cm);
|
||||
break;
|
||||
case 'table':
|
||||
super.handleTable(this.cm);
|
||||
break;
|
||||
case 'code-block':
|
||||
super.handleCodeBlock(this.cm);
|
||||
break;
|
||||
case 'about':
|
||||
super.handleAbout();
|
||||
break;
|
||||
case 'character':
|
||||
super._createTableLists(this.cm, JoeConfig.characterAPI, '星星符号', '字符大全');
|
||||
break;
|
||||
case 'emoji':
|
||||
super._createTableLists(this.cm, JoeConfig.emojiAPI, '表情', '符号表情（需数据库支持）');
|
||||
break;
|
||||
case 'task-no':
|
||||
super.handleTask(this.cm, false);
|
||||
break;
|
||||
case 'task-yes':
|
||||
super.handleTask(this.cm, true);
|
||||
break;
|
||||
case 'netease-list':
|
||||
super.handleNetease(this.cm, true);
|
||||
break;
|
||||
case 'netease-single':
|
||||
super.handleNetease(this.cm, false);
|
||||
break;
|
||||
case 'bilibili':
|
||||
super.handleBilibili(this.cm);
|
||||
break;
|
||||
case 'dplayer':
|
||||
super.handleDplayer(this.cm);
|
||||
break;
|
||||
case 'draft':
|
||||
super.handleDraft();
|
||||
break;
|
||||
case 'expression':
|
||||
super.handleExpression(this.cm);
|
||||
break;
|
||||
case 'mtitle':
|
||||
super.handleMtitle(this.cm);
|
||||
break;
|
||||
case 'html':
|
||||
super.handleHtml(this.cm);
|
||||
break;
|
||||
case 'abtn':
|
||||
super.handleAbtn(this.cm);
|
||||
break;
|
||||
case 'anote':
|
||||
super.handleAnote(this.cm);
|
||||
break;
|
||||
case 'dotted':
|
||||
super.handleDotted(this.cm);
|
||||
break;
|
||||
case 'hide':
|
||||
super.handleHide(this.cm);
|
||||
break;
|
||||
case 'card-default':
|
||||
super.handleCardDefault(this.cm);
|
||||
break;
|
||||
case 'message':
|
||||
super.handleMessage(this.cm);
|
||||
break;
|
||||
case 'progress':
|
||||
super.handleProgress(this.cm);
|
||||
break;
|
||||
case 'callout':
|
||||
super.handleCallout(this.cm);
|
||||
break;
|
||||
}
|
||||
});
|
||||
$('.cm-tools').append(el);
|
||||
}
|
||||
});
|
||||
}
|
||||
/* 已测 √ */
|
||||
init_Tools() {
|
||||
tools.forEach(item => {
|
||||
if (item.type === 'title') {
|
||||
super.handleTitle(this.cm, item);
|
||||
} else {
|
||||
const el = $(`<div class="cm-tools-item" title="${item.title}">${item.innerHTML}</div>`);
|
||||
el.on('click', e => {
|
||||
e.preventDefault();
|
||||
switch (item.type) {
|
||||
case 'fullScreen':
|
||||
super.handleFullScreen(el);
|
||||
break;
|
||||
case 'publish':
|
||||
super.handlePublish();
|
||||
break;
|
||||
case 'undo':
|
||||
super.handleUndo(this.cm);
|
||||
break;
|
||||
case 'redo':
|
||||
super.handleRedo(this.cm);
|
||||
break;
|
||||
case 'time':
|
||||
super.handleTime(this.cm);
|
||||
break;
|
||||
case 'bold':
|
||||
super._insetAmboText(this.cm, '**');
|
||||
break;
|
||||
case 'italic':
|
||||
super._insetAmboText(this.cm, '*');
|
||||
break;
|
||||
case 'delete':
|
||||
super._insetAmboText(this.cm, '~~');
|
||||
break;
|
||||
case 'code-inline':
|
||||
super._insetAmboText(this.cm, '`');
|
||||
break;
|
||||
case 'indent':
|
||||
super.handleIndent(this.cm);
|
||||
break;
|
||||
case 'hr':
|
||||
super.handleHr(this.cm);
|
||||
break;
|
||||
case 'clean':
|
||||
super.handleClean(this.cm);
|
||||
break;
|
||||
case 'ordered-list':
|
||||
super.handleOrdered(this.cm);
|
||||
break;
|
||||
case 'unordered-list':
|
||||
super.handleUnordered(this.cm);
|
||||
break;
|
||||
case 'quote':
|
||||
super.handleQuote(this.cm);
|
||||
break;
|
||||
case 'download':
|
||||
super.handleDownload(this.cm);
|
||||
break;
|
||||
case 'link':
|
||||
super.handleLink(this.cm);
|
||||
break;
|
||||
case 'image':
|
||||
super.handleImage(this.cm);
|
||||
break;
|
||||
case 'table':
|
||||
super.handleTable(this.cm);
|
||||
break;
|
||||
case 'code-block':
|
||||
super.handleCodeBlock(this.cm);
|
||||
break;
|
||||
case 'about':
|
||||
super.handleAbout();
|
||||
break;
|
||||
case 'character':
|
||||
super._createTableLists(this.cm, JoeConfig.characterAPI, '星星符号', '字符大全');
|
||||
break;
|
||||
case 'emoji':
|
||||
super._createTableLists(this.cm, JoeConfig.emojiAPI, '表情', '符号表情（需数据库支持）');
|
||||
break;
|
||||
case 'task-no':
|
||||
super.handleTask(this.cm, false);
|
||||
break;
|
||||
case 'task-yes':
|
||||
super.handleTask(this.cm, true);
|
||||
break;
|
||||
case 'netease-list':
|
||||
super.handleNetease(this.cm, true);
|
||||
break;
|
||||
case 'netease-single':
|
||||
super.handleNetease(this.cm, false);
|
||||
break;
|
||||
case 'bilibili':
|
||||
super.handleBilibili(this.cm);
|
||||
break;
|
||||
case 'dplayer':
|
||||
super.handleDplayer(this.cm);
|
||||
break;
|
||||
case 'draft':
|
||||
super.handleDraft();
|
||||
break;
|
||||
case 'expression':
|
||||
super.handleExpression(this.cm);
|
||||
break;
|
||||
case 'mtitle':
|
||||
super.handleMtitle(this.cm);
|
||||
break;
|
||||
case 'html':
|
||||
super.handleHtml(this.cm);
|
||||
break;
|
||||
case 'abtn':
|
||||
super.handleAbtn(this.cm);
|
||||
break;
|
||||
case 'anote':
|
||||
super.handleAnote(this.cm);
|
||||
break;
|
||||
case 'dotted':
|
||||
super.handleDotted(this.cm);
|
||||
break;
|
||||
case 'hide':
|
||||
super.handleHide(this.cm);
|
||||
break;
|
||||
case 'card-default':
|
||||
super.handleCardDefault(this.cm);
|
||||
break;
|
||||
case 'message':
|
||||
super.handleMessage(this.cm);
|
||||
break;
|
||||
case 'progress':
|
||||
super.handleProgress(this.cm);
|
||||
break;
|
||||
case 'callout':
|
||||
super.handleCallout(this.cm);
|
||||
break;
|
||||
case 'mp3':
|
||||
super.handleMp3(this.cm);
|
||||
break;
|
||||
}
|
||||
});
|
||||
$('.cm-tools').append(el);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* 已测 √ */
|
||||
init_Insert() {
|
||||
Typecho.insertFileToEditor = (file, url, isImage) => {
|
||||
const str = `${super._getLineCh(this.cm) ? '\n' : ''}${isImage ? '!' : ''}[${file}](${url})\n`;
|
||||
super._replaceSelection(this.cm, str);
|
||||
this.cm.focus();
|
||||
};
|
||||
}
|
||||
/* 已测 √ */
|
||||
init_Insert() {
|
||||
Typecho.insertFileToEditor = (file, url, isImage) => {
|
||||
const str = `${super._getLineCh(this.cm) ? '\n' : ''}${isImage ? '!' : ''}[${file}](${url})\n`;
|
||||
super._replaceSelection(this.cm, str);
|
||||
this.cm.focus();
|
||||
};
|
||||
}
|
||||
|
||||
/* 已测 √ */
|
||||
init_AutoSave() {
|
||||
if (window.JoeConfig.autoSave !== 1) return;
|
||||
const formEl = $('#text')[0].form;
|
||||
let cid = $('input[name="cid"]').val();
|
||||
let temp = null;
|
||||
const saveFn = () => {
|
||||
$('input[name="cid"]').val(cid);
|
||||
$('#text').val(this.cm.state.doc.toString());
|
||||
let data = $(formEl).serialize();
|
||||
if (data !== temp) {
|
||||
$('.cm-autosave').addClass('active');
|
||||
$.ajax({
|
||||
url: formEl.action,
|
||||
type: 'POST',
|
||||
data: data + '&do=save',
|
||||
dataType: 'json',
|
||||
success: res => {
|
||||
cid = res.cid;
|
||||
temp = data;
|
||||
let timer = setTimeout(() => {
|
||||
$('.cm-autosave').removeClass('active');
|
||||
clearTimeout(timer);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
setInterval(saveFn, 5000);
|
||||
}
|
||||
/* 已测 √ */
|
||||
init_AutoSave() {
|
||||
if (window.JoeConfig.autoSave !== 1) return;
|
||||
const formEl = $('#text')[0].form;
|
||||
let cid = $('input[name="cid"]').val();
|
||||
let temp = null;
|
||||
const saveFn = () => {
|
||||
$('input[name="cid"]').val(cid);
|
||||
$('#text').val(this.cm.state.doc.toString());
|
||||
let data = $(formEl).serialize();
|
||||
if (data !== temp) {
|
||||
$('.cm-autosave').addClass('active');
|
||||
$.ajax({
|
||||
url: formEl.action,
|
||||
type: 'POST',
|
||||
data: data + '&do=save',
|
||||
dataType: 'json',
|
||||
success: res => {
|
||||
cid = res.cid;
|
||||
temp = data;
|
||||
let timer = setTimeout(() => {
|
||||
$('.cm-autosave').removeClass('active');
|
||||
clearTimeout(timer);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
setInterval(saveFn, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => new Joe());
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
"@codemirror/history": "^0.18.1",
|
||||
"@codemirror/matchbrackets": "^0.18.0",
|
||||
"@codemirror/state": "^0.18.6",
|
||||
"@codemirror/view": "^0.18.7",
|
||||
"@codemirror/view": "^0.18.8",
|
||||
"@rollup/plugin-node-resolve": "^11.2.1",
|
||||
"rollup-plugin-uglify": "^6.0.4"
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { nodeResolve } from '@rollup/plugin-node-resolve';
|
||||
import { uglify } from 'rollup-plugin-uglify';
|
||||
export default {
|
||||
input: './js/joe.write.js',
|
||||
output: {
|
||||
file: './js/joe.write.chunk.js',
|
||||
format: 'iife'
|
||||
},
|
||||
plugins: [nodeResolve(), uglify()]
|
||||
input: './js/joe.write.js',
|
||||
output: {
|
||||
file: './js/joe.write.chunk.js',
|
||||
format: 'iife'
|
||||
},
|
||||
plugins: [nodeResolve(), uglify()]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user