From 5c5211e84f6e4df3de75f7572a010d5388c3b990 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Wed, 8 Aug 2018 20:23:37 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80button,input,select=E7=AD=89U?= =?UTF-8?q?I=E5=85=83=E7=B4=A0=E7=9A=84=E5=B0=BA=E5=AF=B8;=E4=BC=98?= =?UTF-8?q?=E5=8C=96markdown=E6=A0=B7=E5=BC=8F,=E5=90=8C=E6=97=B6=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E4=B8=80=E5=A5=97gfm=E4=B8=BB=E9=A2=98=E5=92=8C?= =?UTF-8?q?=E4=B8=80=E5=A5=97vue=E4=B8=BB=E9=A2=98;meditor=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E5=9D=97=E6=8F=92=E4=BB=B6=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/elem-ui.scss | 6 +- src/css/marked.scss | 149 ++++++++++++++++++++++++++++++-------- src/css/meditor.scss | 6 +- src/meditor/addon/base.js | 7 +- 4 files changed, 128 insertions(+), 40 deletions(-) diff --git a/src/css/elem-ui.scss b/src/css/elem-ui.scss index 0702ac7..54bee37 100644 --- a/src/css/elem-ui.scss +++ b/src/css/elem-ui.scss @@ -10,10 +10,10 @@ /*--------各种按钮---------*/ -.do-ui-button {display:inline-block;height:16px;padding:2px 5px;line-height:12px;border-radius:3px;text-align:center;font-size:12px;background:nth($cp, 2);color:nth($cgr, 1);cursor:pointer;@include ts; +.do-ui-button {display:inline-block;height:16px;padding:2px 5px;line-height:12px;border-radius:2px;text-align:center;font-size:12px;background:nth($cp, 2);color:nth($cgr, 1);cursor:pointer;@include ts; - &.medium {min-width:80px;height:30px;padding:0 8px;line-height:30px;border-radius:5px;font-size:14px} - &.large {min-width:130px;height:45px;padding:0 13px;line-height:45px;border-radius:5px;font-size:18px;} + &.medium {min-width:80px;height:30px;padding:0 8px;line-height:30px;font-size:14px} + &.large {min-width:130px;height:45px;padding:0 13px;line-height:45px;border-radius:3px;font-size:18px;} &:hover {background:nth($cp, 1);} &:active {background:nth($cp, 3);} diff --git a/src/css/marked.scss b/src/css/marked.scss index 1a0d96c..84b17b8 100644 --- a/src/css/marked.scss +++ b/src/css/marked.scss @@ -7,36 +7,26 @@ */ @import "var.scss"; -.do-marked-theme {position:relative; +.do-marked-theme, +.do-marked-theme-gfm, +.do-marked-theme-vue {position:relative;line-height:1.5;font-size:13px;color:nth($cd, 1); - .md-head {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;} - h1.md-head {padding-left:0;} - .md-head span {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545} - .md-head a {padding:0 3px;font-weight:bold;text-decoration:none;} - .md-head a:hover {transform:scale(1.2)} - h1.md-head span {padding-left:0;color:#000;} - h2.md-head span {color:#000;} - - h1.md-head {margin:0 0 30px;font-size:25px;} - h2.md-head {margin:20px 0;font-size:23px;} - h3.md-head {margin:20px 0 15px;font-size:20px;} - h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;} - h2:before, - h3:before, - h4:before, - h5:before, - h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;} - - a {text-decoration:underline;color:nth($cgr, 1)} - a:hover {color:nth($co, 2)} + a {text-decoration:underline;color:nth($cb, 2)} + a:hover {color:nth($cb, 1);text-decoration:none;} + em {color:nth($cgr, 3);} + strong {color:nth($cd, 3);} + em,strong,del {padding:0 3px;} p {margin:15px 0;} img {max-width:100%;} + blockquote { - &.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid nth($cp, 3);background:nth($cp, 1); + &.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid nth($cp, 3);background:nth($cp, 1);color:nth($cgr, 1); p {margin:0;} } } + + /* 提醒文本 */ .md-warn,.md-mark {display:inline-block;position:relative;min-height:35px;margin:3px 0;padding:3px 8px 3px 35px;line-height:27px;border:1px solid nth($co, 2);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all; @@ -54,20 +44,115 @@ .md-task__text {color:nth($cgr, 1);text-decoration:line-through;} } } + + hr {height:1px;margin:30px 0;line-height:1px;border:0;color:nth($cgr, 1);background-color:nth($cgr, 1);} + ol {margin-left:1em;list-style:decimal outside none;} + ul {margin-left:1em;list-style:disc outside none;} + li {margin:.5em 0;} + li ol {margin-left:1em;} + li ul {margin-left:1em;list-style-type: circle;} + li ol ul, + li ul ul {list-style-type: square;} + +} + +.do-marked-theme { + + h1,h2,h3,h4,h5,h6 {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:16px; + + span {position:relative;display:inline-block;padding:0 8px;background:#fff;color:nth($cd, 3);} + a {padding:0 3px;font-weight:bold;text-decoration:none;} + a:hover {transform:scale(1.2)} + } + h1 {margin:0 0 30px;padding-left:0;font-size:24px; + + &:after {display:block;width:100%;content:"";border-bottom:1px solid nth($cp, 3);} + span {padding-left:0;} + } + h2,h3,h4,h5,h6 { + &:before {display:block;position:absolute;left:0;top:50%;width:100%;content:"";border-bottom:1px solid nth($cp, 3);} + } + h2 {margin:20px 0;font-size:22px;} + h3 {margin:20px 0 15px;font-size:20px;} + h4 {font-size:18px;} + + + table {width:100%;line-height:25px; thead tr {height:45px;background:nth($cp, 1)} thead th {padding:10px 8px;border:0;} tbody tr {height:auto;@include ts(all, .3s); - &:hover {background:#ecf6fd} + &:hover {background:#fbfbfb;} } - tbody td {padding:9px 8px;border-bottom:1px solid nth($cp, 2)} + tbody td {padding:9px 8px;border-bottom:1px solid nth($cp, 1)} } - hr {margin:30px 0;border-bottom:0;} - ol {margin-left:2em;list-style:decimal outside none;} - ul {margin-left:2em;list-style:disc outside none;} - li ol {margin-left:2em;} - li ul {margin-left:2em;list-style-type: circle;} - li ol ul, - li ul ul {list-style-type: square;} -} \ No newline at end of file + +} + +.do-marked-theme-gfm, +.do-marked-theme-vue { + + h1,h2,h3,h4,h5,h6 {position:relative;margin:15px 0;font-weight:normal;font-size:16px; + + span {position:relative;display:inline-block;padding:0 5px;color:nth($cd, 3);} + a {visibility:hidden;position:absolute;left:-25px;width:25px;padding:0 3px;font-weight:bold;text-decoration:none;text-align:center;} + &:hover a {visibility:visible;} + &:after {display:block;width:100%;content:"";border-bottom:1px solid nth($cp, 3);} + } + h1 {margin:0 0 30px;font-size:24px;} + h2 {margin:20px 0;font-size:22px;} + h3 {margin:20px 0 15px;font-size:20px;} + h4 {font-size:18px;} + + table {overflow:auto;width:100%;border-spacing:0;border-collapse:collapse; + + tr {border-top:1px solid #ccc;background-color: #fff;} + th, td {padding:6px 13px;border:1px solid #ddd;} + th {font-weight:bold;} + tr:nth-child(2n) {background-color:#fbfbfb;} + } +} + +.do-marked-theme-gfm {color:nth($cd, 3); + + blockquote { + &.md-quote {background:none; + + } + } + + + .do-ui-blockcode,.do-ui-inlinecode {border:1px solid nth($cp, 3)} + .do-ui-inlinecode {color:inherit;} + +} + + + +.do-marked-theme-vue { + + a {color:nth($ct, 2)} + a:hover {color:nth($ct, 1);} + + blockquote { + &.md-quote {border-color:nth($ct, 1);background:#f2faf7; + + } + } + + h1,h2,h3,h4,h5,h6 {font-weight:bold; + span {color:inherit;} + &:after {display:none;} + } + + + table {display:table; + thead tr {background:nth($cp, 1)} + } + + .do-ui-blockcode,.do-ui-inlinecode {} + .do-ui-inlinecode {color:nth($co, 3);} + +} + diff --git a/src/css/meditor.scss b/src/css/meditor.scss index 356fb2b..e427df0 100644 --- a/src/css/meditor.scss +++ b/src/css/meditor.scss @@ -135,17 +135,17 @@ } } -.do-meditor-codeblock {width:780px;height:auto; +.do-meditor-codeblock {width:480px;height:auto; section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px; .label {float: left;width:80px;} - select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-radius:0;border-bottom:1px solid nth($cp, 3);background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 12px;color:nth($cd, 2);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; + select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-radius:0;border-bottom:1px solid nth($cp, 3);background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 12px;color:nth($cd, 2);outline:none;appearance: none;@include ts; &::-ms-expand {display:none;} &:focus {box-shadow:0 0 5px nth($ct, 1)} } - textarea {width:100%;height:300px;padding:5px 10px;border:0;border-radius:5px;background:nth($cp, 1);font-size:14px;resize:none;outline:none;color:nth($cd, 2); + textarea {width:100%;height:120px;padding:5px 10px;border:0;border-radius:5px;background:nth($cp, 1);font-size:14px;resize:none;outline:none;color:nth($cd, 2); &:focus {box-shadow:0 0 5px nth($ct, 1)} } diff --git a/src/meditor/addon/base.js b/src/meditor/addon/base.js index 31701db..0530f9b 100644 --- a/src/meditor/addon/base.js +++ b/src/meditor/addon/base.js @@ -384,10 +384,11 @@ const addon = { }, blockcode: function(elem) { let that = this + let offset = Anot(elem).offset() layer.open({ type: 7, title: '添加代码块', - $lang: [ + __lang__: [ { id: 'asp' }, { id: 'actionscript', name: 'ActionScript(3.0)/Flash/Flex' }, { id: 'bash', name: 'Bash/Shell/Bat' }, @@ -426,6 +427,8 @@ const addon = { lang: 'javascript', code: '', maskClose: true, + offset: [offset.top + 35 - $doc.scrollTop()], + shift: { top: offset.top - $doc.scrollTop() }, insert: function() { let val = `\n\`\`\`${this.lang}\n${this.code || '// 在此输入代码'}\n\`\`\`\n` @@ -437,7 +440,7 @@ const addon = {
语言类型