diff --git a/css/basic-elem.css b/css/basic-elem.css index 0c662a2..6d4fed6 100644 --- a/css/basic-elem.css +++ b/css/basic-elem.css @@ -1 +1 @@ -.do-ui-button{display:inline-block;padding:0 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.teal{border:0;background:#1abc9c;color:#fff}.do-ui-button.teal:hover{background:#48c9b0}.do-ui-button.teal:active{background:#16a085}.do-ui-button.green{border:0;background:#4caf50;color:#fff}.do-ui-button.green:hover{background:#81c784}.do-ui-button.green:active{background:#388e3c}.do-ui-button.blue{border:0;background:#2196f3;color:#fff}.do-ui-button.blue:hover{background:#64b5f6}.do-ui-button.blue:active{background:#1976d2}.do-ui-button.purple{border:0;background:#651fff;color:#fff}.do-ui-button.purple:hover{background:#7c4dff}.do-ui-button.purple:active{background:#6200ea}.do-ui-button.red{border:0;background:#ff5722;color:#fff}.do-ui-button.red:hover{background:#ff7043}.do-ui-button.red:active{background:#e64a19}.do-ui-button.orange{border:0;background:#ff9800;color:#fff}.do-ui-button.orange:hover{background:#ffa726}.do-ui-button.orange:active{background:#f57c00}.do-ui-button.plain{border:0;background:#e7e8eb;color:#546e7a}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{border:0;background:#546e7a;color:#fff}.do-ui-button.grey:hover{background:#607d8b}.do-ui-button.grey:active{background:#37474f}.do-ui-button.disabled{border-color:#e7e8eb;color:#bdc3c7;cursor:not-allowed}.do-ui-button.medium.with-style,.do-ui-button.large.with-style{position:relative;padding-right:43px}.do-ui-button.medium.with-style::after,.do-ui-button.large.with-style::after{position:absolute;right:0;top:0;width:35px;text-align:center;background:rgba(0,0,0,0.2);font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-button.large.with-style{padding-right:58px}.do-ui-button.large.with-style::after{width:50px}.do-ui-button.icon-del::after{content:"\e6f0"}.do-ui-button.icon-add::after{content:"\e64c"}.do-ui-button.icon-send::after{content:"\e64b"}.do-ui-button.icon-confirm::after{content:"\e60f"}.do-ui-button.icon-share::after{content:"\e631"}.do-ui-button.icon-bad::after{content:"\e8ee"}.do-ui-button.icon-good::after{content:"\e62d"}.do-ui-button.icon-download::after{content:"\e611"}.do-ui-button.icon-upload::after{content:"\e6f7"}.do-ui-button.icon-mac::after{content:"\e60a"}.do-ui-button.icon-ios::after{content:"\e609"}.do-ui-button.icon-windows::after{content:"\e601"}.do-ui-button.icon-linux::after{content:"\e602"}.do-ui-button.icon-android::after{content:"\e600"}.do-ui-input{position:relative;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#546e7a;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.area{padding:5px}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus,.do-ui-input:hover{border-color:#1abc9c}.do-ui-input.alert{border-color:#ff5722;color:#ff5722}.do-ui-input.alert input{color:#ff5722}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-input.with-style{display:inline-block;padding:0}.do-ui-input.with-style input{width:100%;height:100%;min-height:30px;padding:0 30px 0 5px;border:0;background:transparent}.do-ui-input.with-style::after{position:absolute;right:0;top:0;width:35px;height:30px;line-height:30px;text-align:center;font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-input.with-style.icon-user::after{content:"\e6f4"}.do-ui-input.with-style.icon-pwd::after{content:"\e655"}.do-ui-input.with-style.icon-mail::after{content:"\e66e"}.do-ui-input.with-style.icon-date::after{content:"\e650"}.do-ui-input.with-style.icon-phone::after{content:"\e651"}.do-ui-select{display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid #bdc3c7;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:#546e7a;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select.radius-3{border-radius:3px}.do-ui-select.radius-5{border-radius:5px}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#ff5722;color:#ff5722}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-radio,.do-ui-checkbox{display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;color:#546e7a}.do-ui-radio{padding-left:50px}.do-ui-radio>input{position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:#bdc3c7;-webkit-appearance:none;-moz-appearance:none}.do-ui-radio>input:checked{background:#bdc3c7}.do-ui-radio>input:disabled{background:#ecf0f1}.do-ui-radio>input:disabled:checked{background:#bdc3c7}.do-ui-radio>input::after{position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:#ecf0f1;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.do-ui-radio>input:checked::after{left:auto;right:-2px;background:#607d8b}.do-ui-radio>input:checked:disabled::after{background:#bdc3c7}.do-ui-radio.green>input:checked{background:#81c784}.do-ui-radio.green>input:checked::after{background:#388e3c}.do-ui-radio.teal>input:checked{background:#81c784}.do-ui-radio.teal>input:checked::after{background:#16a085}.do-ui-radio.blue>input:checked{background:#64b5f6}.do-ui-radio.blue>input:checked::after{background:#1976d2}.do-ui-radio.purple>input:checked{background:#64b5f6}.do-ui-radio.purple>input:checked::after{background:#6200ea}.do-ui-radio.red>input:checked{background:#ff7043}.do-ui-radio.red>input:checked::after{background:#e64a19}.do-ui-radio.orange>input:checked{background:#ffa726}.do-ui-radio.orange>input:checked::after{background:#f57c00}.do-ui-radio.grey>input:checked{background:#607d8b}.do-ui-radio.grey>input:checked::after{background:#37474f}.do-ui-radio.disabled{color:#bdc3c7}.do-ui-checkbox>input{position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid #bdc3c7;border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:none;-moz-appearance:none}.do-ui-checkbox>input:checked::after{content:"\e60f"}.do-ui-checkbox>input:disabled{border-color:#bdc3c7;color:#bdc3c7}.do-ui-checkbox.green>input{color:#4caf50 !important;border-color:#4caf50}.do-ui-checkbox.teal>input{color:#1abc9c !important;border-color:#1abc9c}.do-ui-checkbox.purple>input{color:#651fff !important;border-color:#651fff}.do-ui-checkbox.blue>input{color:#2196f3 !important;border-color:#2196f3}.do-ui-checkbox.red>input{color:#ff5722 !important;border-color:#ff5722}.do-ui-checkbox.orange>input{color:#ff9800 !important;border-color:#ff9800}.do-ui-checkbox.grey>input{color:#546e7a !important;border-color:#546e7a}.do-ui-checkbox.disabled{color:#bdc3c7}.do-ui-checkbox.with-style{padding-left:5px;padding-right:35px;line-height:26px;border:2px solid #e7e8eb;background:#e7e8eb;text-align:center}.do-ui-checkbox.with-style>input{left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:#607d8b}.do-ui-checkbox.with-style>input:disabled{color:#bdc3c7 !important}.do-ui-checkbox.with-style.green{border-color:#4caf50;background:#4caf50;color:#fff}.do-ui-checkbox.with-style.teal{border-color:#1abc9c;background:#1abc9c;color:#fff}.do-ui-checkbox.with-style.purple{border-color:#651fff;background:#651fff;color:#fff}.do-ui-checkbox.with-style.blue{border-color:#2196f3;background:#2196f3;color:#fff}.do-ui-checkbox.with-style.red{border-color:#ff5722;background:#ff5722;color:#fff}.do-ui-checkbox.with-style.orange{border-color:#ff9800;background:#ff9800;color:#fff}.do-ui-checkbox.with-style.grey{border-color:#546e7a;background:#546e7a;color:#fff}.do-ui-checkbox.with-style.disabled{border-color:#e7e8eb;background:#e7e8eb;color:#bdc3c7}.do-ui-quote{display:block;position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7;word-break:break-all}.do-ui-quote::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#bdc3c7;content:"\e61b"}.do-ui-warn,.do-ui-mark{display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid #ff9800;border-radius:5px;background:#fffbed;color:#f57c00;word-break:break-all}.do-ui-warn p,.do-ui-mark p{margin:0 !important}.do-ui-warn::before,.do-ui-mark::before{position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:#ff5722;content:"\e6f6"}.do-ui-mark{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-ui-mark::before{color:#16a085;content:"\e657"} +.do-ui-button{display:inline-block;padding:0 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.teal{border:0;background:#1abc9c;color:#fff}.do-ui-button.teal:hover{background:#48c9b0}.do-ui-button.teal:active{background:#16a085}.do-ui-button.green{border:0;background:#4caf50;color:#fff}.do-ui-button.green:hover{background:#81c784}.do-ui-button.green:active{background:#388e3c}.do-ui-button.blue{border:0;background:#2196f3;color:#fff}.do-ui-button.blue:hover{background:#64b5f6}.do-ui-button.blue:active{background:#1976d2}.do-ui-button.purple{border:0;background:#651fff;color:#fff}.do-ui-button.purple:hover{background:#7c4dff}.do-ui-button.purple:active{background:#6200ea}.do-ui-button.red{border:0;background:#ff5722;color:#fff}.do-ui-button.red:hover{background:#ff7043}.do-ui-button.red:active{background:#e64a19}.do-ui-button.orange{border:0;background:#ff9800;color:#fff}.do-ui-button.orange:hover{background:#ffa726}.do-ui-button.orange:active{background:#f57c00}.do-ui-button.plain{border:0;background:#e7e8eb;color:#546e7a}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{border:0;background:#546e7a;color:#fff}.do-ui-button.grey:hover{background:#607d8b}.do-ui-button.grey:active{background:#37474f}.do-ui-button.disabled{border-color:#e7e8eb;color:#bdc3c7;cursor:not-allowed}.do-ui-button.medium.with-style,.do-ui-button.large.with-style{position:relative;padding-right:43px}.do-ui-button.medium.with-style::after,.do-ui-button.large.with-style::after{position:absolute;right:0;top:0;width:35px;text-align:center;background:rgba(0,0,0,0.2);font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-button.large.with-style{padding-right:58px}.do-ui-button.large.with-style::after{width:50px}.do-ui-button.icon-del::after{content:"\e6f0"}.do-ui-button.icon-add::after{content:"\e64c"}.do-ui-button.icon-send::after{content:"\e64b"}.do-ui-button.icon-confirm::after{content:"\e60f"}.do-ui-button.icon-share::after{content:"\e631"}.do-ui-button.icon-bad::after{content:"\e8ee"}.do-ui-button.icon-good::after{content:"\e62d"}.do-ui-button.icon-download::after{content:"\e611"}.do-ui-button.icon-upload::after{content:"\e6f7"}.do-ui-button.icon-mac::after{content:"\e60a"}.do-ui-button.icon-ios::after{content:"\e609"}.do-ui-button.icon-windows::after{content:"\e601"}.do-ui-button.icon-linux::after{content:"\e602"}.do-ui-button.icon-android::after{content:"\e600"}.do-ui-input{position:relative;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#546e7a;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.area{padding:5px}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus,.do-ui-input:hover{border-color:#1abc9c}.do-ui-input.alert{border-color:#ff5722;color:#ff5722}.do-ui-input.alert input{color:#ff5722}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-input.with-style{display:inline-block;padding:0}.do-ui-input.with-style input{width:100%;height:100%;min-height:30px;padding:0 30px 0 5px;border:0;background:transparent}.do-ui-input.with-style::after{position:absolute;right:0;top:0;width:35px;height:30px;line-height:30px;text-align:center;font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-input.with-style.icon-user::after{content:"\e6f4"}.do-ui-input.with-style.icon-pwd::after{content:"\e655"}.do-ui-input.with-style.icon-mail::after{content:"\e66e"}.do-ui-input.with-style.icon-date::after{content:"\e650"}.do-ui-input.with-style.icon-phone::after{content:"\e651"}.do-ui-select{display:inline-block;min-height:30px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:#546e7a;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#ff5722;color:#ff5722}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-radio,.do-ui-checkbox{display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;color:#546e7a}.do-ui-radio{padding-left:50px}.do-ui-radio>input{position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:#bdc3c7;-webkit-appearance:none;-moz-appearance:none}.do-ui-radio>input:checked{background:#bdc3c7}.do-ui-radio>input:disabled{background:#ecf0f1}.do-ui-radio>input:disabled:checked{background:#bdc3c7}.do-ui-radio>input::after{position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:#ecf0f1;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.do-ui-radio>input:checked::after{left:auto;right:-2px;background:#607d8b}.do-ui-radio>input:checked:disabled::after{background:#bdc3c7}.do-ui-radio.green>input:checked{background:#81c784}.do-ui-radio.green>input:checked::after{background:#388e3c}.do-ui-radio.teal>input:checked{background:#81c784}.do-ui-radio.teal>input:checked::after{background:#16a085}.do-ui-radio.blue>input:checked{background:#64b5f6}.do-ui-radio.blue>input:checked::after{background:#1976d2}.do-ui-radio.purple>input:checked{background:#64b5f6}.do-ui-radio.purple>input:checked::after{background:#6200ea}.do-ui-radio.red>input:checked{background:#ff7043}.do-ui-radio.red>input:checked::after{background:#e64a19}.do-ui-radio.orange>input:checked{background:#ffa726}.do-ui-radio.orange>input:checked::after{background:#f57c00}.do-ui-radio.grey>input:checked{background:#607d8b}.do-ui-radio.grey>input:checked::after{background:#37474f}.do-ui-radio.disabled{color:#bdc3c7}.do-ui-checkbox>input{position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid #bdc3c7;border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:none;-moz-appearance:none}.do-ui-checkbox>input:checked::after{content:"\e60f"}.do-ui-checkbox>input:disabled{border-color:#bdc3c7;color:#bdc3c7}.do-ui-checkbox.green>input{color:#4caf50 !important;border-color:#4caf50}.do-ui-checkbox.teal>input{color:#1abc9c !important;border-color:#1abc9c}.do-ui-checkbox.purple>input{color:#651fff !important;border-color:#651fff}.do-ui-checkbox.blue>input{color:#2196f3 !important;border-color:#2196f3}.do-ui-checkbox.red>input{color:#ff5722 !important;border-color:#ff5722}.do-ui-checkbox.orange>input{color:#ff9800 !important;border-color:#ff9800}.do-ui-checkbox.grey>input{color:#546e7a !important;border-color:#546e7a}.do-ui-checkbox.disabled{color:#bdc3c7}.do-ui-checkbox.with-style{padding-left:5px;padding-right:35px;line-height:26px;border:2px solid #e7e8eb;background:#e7e8eb;text-align:center}.do-ui-checkbox.with-style>input{left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:#607d8b}.do-ui-checkbox.with-style>input:disabled{color:#bdc3c7 !important}.do-ui-checkbox.with-style.green{border-color:#4caf50;background:#4caf50;color:#fff}.do-ui-checkbox.with-style.teal{border-color:#1abc9c;background:#1abc9c;color:#fff}.do-ui-checkbox.with-style.purple{border-color:#651fff;background:#651fff;color:#fff}.do-ui-checkbox.with-style.blue{border-color:#2196f3;background:#2196f3;color:#fff}.do-ui-checkbox.with-style.red{border-color:#ff5722;background:#ff5722;color:#fff}.do-ui-checkbox.with-style.orange{border-color:#ff9800;background:#ff9800;color:#fff}.do-ui-checkbox.with-style.grey{border-color:#546e7a;background:#546e7a;color:#fff}.do-ui-checkbox.with-style.disabled{border-color:#e7e8eb;background:#e7e8eb;color:#bdc3c7}.do-ui-quote{display:block;position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7;word-break:break-all}.do-ui-quote::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#bdc3c7;content:"\e61b"}.do-ui-warn,.do-ui-mark{display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid #ff9800;border-radius:5px;background:#fffbed;color:#f57c00;word-break:break-all}.do-ui-warn p,.do-ui-mark p{margin:0 !important}.do-ui-warn::before,.do-ui-mark::before{position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:#ff5722;content:"\e6f6"}.do-ui-mark{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-ui-mark::before{color:#16a085;content:"\e657"} diff --git a/css/basic-elem.scss b/css/basic-elem.scss index 2c048f6..2f65fe9 100644 --- a/css/basic-elem.scss +++ b/css/basic-elem.scss @@ -109,11 +109,9 @@ /* select框 */ -.do-ui-select {display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid nth($cp, 3);background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; +.do-ui-select {display:inline-block;min-height:30px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; &::-ms-expand {display:none;} - &.radius-3 {border-radius:3px;} - &.radius-5 {border-radius:5px;} &:focus {border-color:nth($ct, 1);} &.alert {border-color:nth($cr, 1);color:nth($cr, 1)} diff --git a/js/lib/meditor/addon/attach.css b/js/lib/meditor/addon/attach.css index bb9adf3..32c3792 100644 --- a/js/lib/meditor/addon/attach.css +++ b/js/lib/meditor/addon/attach.css @@ -1,59 +1 @@ -@charset "UTF-8"; -/** - * - * @authors yutent (yutent@doui.cc) - * @date 2017-04-20 19:13:24 - * - */ - -.do-meditor-attach {width:630px;height:auto;background:#f7f7f7;cursor:default;} -.do-meditor-attach .attach-wrap {width:100%;height:auto;} - -.do-meditor-attach .tab-box {width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center;} -.do-meditor-attach .tab-box .item {position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer;} -.do-meditor-attach .tab-box .item.active {background:#fff;} -.do-meditor-attach .tab-box .item.active::after {position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""} -.do-meditor-attach .tab-box a.action-close {top:5px;width:40px;height:40px;line-height:40px;font-size:20px;} -.do-meditor-attach .tab-box a.action-close:hover {line-height:40px;border:0;} - -.do-meditor-attach .cont-box {position:relative;width:100%;height:auto;min-height:200px;background:#fff;} - -.do-meditor-attach .cont-box .remote, -.do-meditor-attach .cont-box .local {position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px;} -.do-meditor-attach .cont-box .local {width:96%;} - -.do-meditor-attach .cont-box .hide {display:none;} - -.do-meditor-attach .cont-box .section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px;} -.do-meditor-attach .cont-box .section::after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;} - -.do-meditor-attach .cont-box .section .label {float: left;width:30%;text-align:center;background:#e2e2e2;} -.do-meditor-attach .cont-box .section label {float: left;width:50%;} -.do-meditor-attach .cont-box .section .input {float: left;width:70%;height:35px;padding:0 8px;border:1px solid #e2e2e2;border-left:0;background:#fff;color:#666;} -.do-meditor-attach .cont-box .section .submit {float:right;width:30%;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;} -.do-meditor-attach .cont-box .section .submit:hover {border:1px solid #049789;} - - -.do-meditor-attach .cont-box .select-file {width:100%;height:35px;line-height:33px} -.do-meditor-attach .cont-box .select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;} -.do-meditor-attach .cont-box .select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;} -.do-meditor-attach .cont-box .upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;} -.do-meditor-attach .cont-box .upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;} -.do-meditor-attach .cont-box .upload-box .tr:hover {background:#fafafa} -.do-meditor-attach .cont-box .upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;} - -.do-meditor-attach .cont-box .upload-box .td {float:left;} -.do-meditor-attach .cont-box .upload-box .td.name {width:45%;} -.do-meditor-attach .cont-box .upload-box .td.progress {width:40%;} -.do-meditor-attach .cont-box .upload-box .td.option {width:15%;} -.do-meditor-attach .cont-box .upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;} -.do-meditor-attach .cont-box .upload-box .td .red {color:#f30;} - -.do-meditor-attach .cont-box .manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;} -.do-meditor-attach .cont-box .manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;} -.do-meditor-attach .cont-box .manager .item:hover {background:#f7f7f7;} -.do-meditor-attach .cont-box .manager .thumb {display:block;width:100%;height:100px;} -.do-meditor-attach .cont-box .manager .name {overflow:hidden;height:20px;line-height:30px;text-align:center;} -.do-meditor-attach .cont-box .manager img {width:100%;height:100%;} -.do-meditor-attach .cont-box .manager .attac-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "edicon" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} - +.do-meditor-attach{width:630px;height:auto;background:#f7f7f7;cursor:default}.do-meditor-attach .tab-box{width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center}.do-meditor-attach .tab-box .item{position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer}.do-meditor-attach .tab-box .item.active{background:#fff}.do-meditor-attach .tab-box .item.active::after{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""}.do-meditor-attach .tab-box a.action-close{top:5px;width:40px;height:40px;line-height:40px;font-size:20px}.do-meditor-attach .tab-box a.action-close:hover{line-height:40px;border:0}.do-meditor-attach .cont-box{position:relative;width:100%;height:auto;min-height:200px;background:#fff}.do-meditor-attach .cont-box .remote,.do-meditor-attach .cont-box .local{position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px}.do-meditor-attach .cont-box .local{width:96%}.do-meditor-attach .cont-box .hide{display:none}.do-meditor-attach .cont-box .section{display:block;width:100%;height:auto;margin:15px 0;line-height:35px}.do-meditor-attach .cont-box .section.input{line-height:33px;border:1px solid #e9e9e9}.do-meditor-attach .cont-box .section .label{float:left;width:30%;text-align:center;background:#f7f7f7}.do-meditor-attach .cont-box .section .txt{float:left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666}.do-meditor-attach .cont-box .section .submit{float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor-attach .cont-box .select-file{width:100%;height:35px;line-height:33px}.do-meditor-attach .cont-box .select-file span.file{float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer}.do-meditor-attach .cont-box .select-file span.tips{display:inline-block;padding:0 10px;line-height:35px;color:#666}.do-meditor-attach .cont-box .upload-box{width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2}.do-meditor-attach .cont-box .upload-box .tr{width:100%;height:35px;line-height:35px;text-align:center}.do-meditor-attach .cont-box .upload-box .tr:hover{background:#fafafa}.do-meditor-attach .cont-box .upload-box .thead{line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7}.do-meditor-attach .cont-box .upload-box .td{float:left}.do-meditor-attach .cont-box .upload-box .td.name{width:45%}.do-meditor-attach .cont-box .upload-box .td.progress{width:40%}.do-meditor-attach .cont-box .upload-box .td.option{width:15%}.do-meditor-attach .cont-box .upload-box .td.option a{display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666}.do-meditor-attach .cont-box .upload-box .td .red{color:#f30}.do-meditor-attach .cont-box .manager{overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px}.do-meditor-attach .cont-box .manager .item{float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px}.do-meditor-attach .cont-box .manager .item:hover{background:#f7f7f7}.do-meditor-attach .cont-box .manager .thumb{display:block;width:100%;height:100px}.do-meditor-attach .cont-box .manager .name{overflow:hidden;height:20px;line-height:30px;text-align:center}.do-meditor-attach .cont-box .manager img{width:100%;height:100%}.do-meditor-attach .cont-box .manager .attach-icon{display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "ui font" !important;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale} diff --git a/js/lib/meditor/addon/attach.js b/js/lib/meditor/addon/attach.js index 2d1946c..6ed893e 100644 --- a/js/lib/meditor/addon/attach.js +++ b/js/lib/meditor/addon/attach.js @@ -186,48 +186,46 @@ define([ file: [] }, fixCont = function(){ - return '
' - + '
' - + '
' - + '' + lang[openType][0] +'' - + '本地上传' - + '' + lang[openType][1] + '' - + '' - + '
' - + '
' - + '
' - + '
'+ lang[openType][2] + '' - + '' - + '
' - + '
'+ lang[openType][3] + '' - + '' - + '
' - + '
' - + '确定' - + '
' - + '
' - + '
' - + '
选择文件(上传大小限制:单文件最大' - + (ME.maxSize/1048576).toFixed(2) - + 'MB)
' - + '
    ' - + '
  • 文件名上传进度操作
    • ' - + '
  • ' - + '' - + '' - + '插入' - + '
    • ' - + '
' - + '
' - + '
    ' - + '
  • ' - + '' - + '

    ' + return '
    ' + + '
    ' + + '' + lang[openType][0] +'' + + '本地上传' + + '' + lang[openType][1] + '' + + '' + + '
    ' + + '
    ' + + '
    ' + + '
    '+ lang[openType][2] + '' + + '' + + '
    ' + + '
    '+ lang[openType][3] + '' + + '' + + '
    ' + + '
    ' + + '确定' + + '
    ' + + '
    ' + + '
    ' + + '
    选择文件(上传大小限制:单文件最大 ' + + ((ME.maxSize/1048576).toFixed(2) - 0) + + 'MB)
    ' + + '
      ' + + '
    • 文件名上传进度操作
      • ' + + '
    • ' + + '' + + '' + + '插入' + '
      • ' + '
    ' - + '
    ' - + '
    ' - + '
' + + '' + + '' + + '' + + '' }; /** @@ -243,7 +241,7 @@ define([ vm.uploadFile.push({name: it.name, progress: '0%(失败,不允许的文件类型)', url: ''}) continue } - if(it.size > ME.maxSize){ + if(ME.maxSize > 0 && it.size > ME.maxSize){ vm.uploadFile.push({name: it.name, progress: '0%(文件体积过大)', url: ''}) continue } @@ -332,7 +330,7 @@ define([ getAttach(vm, function(json){ if(json){ cache[openType] = json.data.list.map(function(it){ - it.thumb = openType === 'image' ? '' : '' + it.thumb = openType === 'image' ? '' : '' return it }) lvm.attachList = json.data.list diff --git a/js/lib/meditor/addon/attach.scss b/js/lib/meditor/addon/attach.scss new file mode 100644 index 0000000..e779163 --- /dev/null +++ b/js/lib/meditor/addon/attach.scss @@ -0,0 +1,62 @@ +@charset "UTF-8"; +/** + * + * @authors yutent (yutent@doui.cc) + * @date 2017-04-20 19:13:24 + * + */ + +.do-meditor-attach {width:630px;height:auto;background:#f7f7f7;cursor:default; + + .tab-box {width:100%;height:50px;line-height:49px;border-bottom:1px solid #e2e2e2;text-align:center; + + .item {position:relative;float:left;width:100px;height:49px;border-right:1px solid #ddd;cursor:pointer;} + .item.active {background:#fff;} + .item.active::after {position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#fff;content:""} + a.action-close {top:5px;width:40px;height:40px;line-height:40px;font-size:20px;} + a.action-close:hover {line-height:40px;border:0;} + } + + .cont-box {position:relative;width:100%;height:auto;min-height:200px;background:#fff; + + .remote, + .local {position:relative;width:60%;height:auto;margin:0 auto;padding:15px 0 30px;} + .local {width:96%;} + + .hide {display:none;} + + .section {display:block;width:100%;height:auto;margin:15px 0;line-height:35px; + + &.input {line-height:33px;border:1px solid #e9e9e9;} + + .label {float: left;width:30%;text-align:center;background:#f7f7f7;} + .txt {float: left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666;} + .submit {float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center;} + } + + + .select-file {width:100%;height:35px;line-height:33px} + .select-file span.file {float:left;width:100px;height:35px;border:1px solid #ddd;background:#f7f7f7;color:#666;text-align:center;cursor:pointer;} + .select-file span.tips {display:inline-block;padding:0 10px;line-height:35px;color:#666;} + .upload-box {width:100%;height:auto;min-height:190px;margin:10px 0;border:1px solid #e2e2e2;} + .upload-box .tr {width:100%;height:35px;line-height:35px;text-align:center;} + .upload-box .tr:hover {background:#fafafa} + .upload-box .thead {line-height:34px;border-bottom:1px solid #e2e2e2;background:#f7f7f7;} + + .upload-box .td {float:left;} + .upload-box .td.name {width:45%;} + .upload-box .td.progress {width:40%;} + .upload-box .td.option {width:15%;} + .upload-box .td.option a {display:inline-block;padding:3px 5px;line-height:13px;border:1px solid #e2e2e2;background:#f7f7f7;color:#666;} + .upload-box .td .red {color:#f30;} + + .manager {overflow:hidden;overflow-y:auto;width:100%;height:320px;padding:10px;} + .manager .item {float:left;width:22%;height:130px;margin:10px 1.5%;padding:5px;} + .manager .item:hover {background:#f7f7f7;} + .manager .thumb {display:block;width:100%;height:100px;} + .manager .name {overflow:hidden;height:20px;line-height:30px; text-align:center;} + .manager img {width:100%;height:100%;} + .manager .attach-icon {display:inline-block;width:100%;height:100px;text-align:center;font:50px/100px "ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} + } + +} \ No newline at end of file diff --git a/js/lib/meditor/addon/base.js b/js/lib/meditor/addon/base.js index 1153f6b..f53baec 100644 --- a/js/lib/meditor/addon/base.js +++ b/js/lib/meditor/addon/base.js @@ -257,8 +257,10 @@ define(['lib/layer/base'], function(){ this.link(elem, vm, false) }, inlinecode: function(elem, vm){ - var wrap = ME.selection(vm.$editor) || '在此输入文本' - wrap = '`' + wrap + '`' + var wrap = ME.selection(vm.$editor) || '在此输入文本', + wraped = trim(wrap, '`'); + + wrap = wrap === wraped ? ('`' + wrap + '`') : wraped ME.insert(vm.$editor, wrap, true) }, blockcode: function(elem, vm){ @@ -311,7 +313,7 @@ define(['lib/layer/base'], function(){ layer.close(layid) }, content: '
' - + '
语言类型' + + '
语言类型' + '' @@ -319,7 +321,7 @@ define(['lib/layer/base'], function(){ + '
' + '' + '
' - + '
' + + '
' + '确定' + '
' + '
' diff --git a/js/lib/meditor/main.js b/js/lib/meditor/main.js index de285db..33789c5 100644 --- a/js/lib/meditor/main.js +++ b/js/lib/meditor/main.js @@ -22,7 +22,7 @@ define([ }) var editorVM = [] - yua.ui.meditor = '0.0.1' + yua.ui.meditor = '1.0.0' //存放编辑器公共静态资源 window.ME = { version: yua.ui.meditor, @@ -225,7 +225,10 @@ define([ return new RegExp(exp, 'gi') } function html2md(str){ - str = decodeURIComponent(str).replace(/\t/g, ' ').replace(/]*>/, '') + try{ + str = decodeURIComponent(str) + }catch(err){} + str = str.replace(/\t/g, ' ').replace(/]*>/, '') for(var i in elems){ var cb = elems[i], @@ -306,9 +309,7 @@ define([ $template: '
' + '
{toolbar}
' - + '
' - + '' - + '
' + + '' + '' + '
', $$template: function(txt){ @@ -335,7 +336,6 @@ define([ return base }, $init: function(vm){ - vm.$watch('plainTxt', function(val){ vm.$compile() //只有开启实时预览,才会赋值给htmlTxt @@ -368,8 +368,9 @@ define([ vm.plainTxt = this.value } }, - $ready: function(vm){ - vm.$editor = document.querySelector('#' + vm.$id) + $ready: function(vm, elem){ + + vm.$editor = elem.children[1] editorVM.push(vm) //自动加载额外的插件 @@ -407,9 +408,11 @@ define([ $paste: yua.noop, $compile: function(){ var txt = this.plainTxt.trim() - txt = txt.replace(/]*?)>/g, '<script$1>') - .replace(/<\/script>/g, '</script>') - + + if(this.$safelyCompile){ + txt = txt.replace(/]*?)>/g, '<script$1>') + .replace(/<\/script>/g, '</script>') + } //只解析,不渲染 this.$htmlTxt = marked(txt) }, @@ -417,6 +420,7 @@ define([ $onSuccess: yua.noop, $onUpdate: yua.noop, $onFullscreen: yua.noop, + $safelyCompile: true, disabled: false, //禁用编辑器 fullscreen: false, //是否全屏 preview: false, //是否显示预览 diff --git a/js/lib/meditor/skin/main.css b/js/lib/meditor/skin/main.css index 42fa413..a9dc674 100644 --- a/js/lib/meditor/skin/main.css +++ b/js/lib/meditor/skin/main.css @@ -1 +1 @@ -::-webkit-scrollbar{width:5px;height:5px;background:#ebeeec}::-webkit-scrollbar:hover{background:rgba(0,0,0,0.05)}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#1abc9c}::-webkit-scrollbar-thumb:hover{background:#16a085}.do-meditor{position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666}.do-meditor-font{font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif}.do-meditor-about{width:400px;padding:10px 20px}.do-meditor-about pre{width:100%;padding-bottom:15px;line-height:1;font-size:14px}.do-meditor-about a{color:#049789}.do-meditor-about p{margin:0 auto 5px}.do-meditor-table{width:270px;height:270px;padding:10px}.do-meditor-table li{width:100%;height:25px}.do-meditor-table li span{float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2}.do-meditor-table li span.active{background:rgba(4,151,137,0.2)}.do-meditor-face{float:left;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2}.do-meditor-face li{float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0}.do-meditor-face li img{width:100%;transition:all .1s ease-in-out}.do-meditor-face li:hover img{-webkit-transform:scale(3);-moz-transform:scale(3);-ms-transform:scale(3);transform:scale(3)}.do-meditor-h1{width:150px;height:auto;padding:5px 0}.do-meditor-h1 li{width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default}.do-meditor-h1 li:hover{background:#f2f2f2}.do-meditor-h1 li::before{font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.do-meditor-h1 li.h1{font-size:23px}.do-meditor-h1 li.h2{font-size:21px}.do-meditor-h1 li.h1::before{content:"\e62b "}.do-meditor-h1 li.h2::before{content:"\e625 "}.do-meditor-h1 li.h3::before{content:"\e626 "}.do-meditor-h1 li.h4::before{content:"\e629 "}.do-meditor-h1 li.h5::before{content:"\e62a "}.do-meditor-h1 li.h6::before{content:"\e624 "}.do-meditor-common{width:360px;height:auto;padding:15px 20px}.do-meditor-common section{width:100%;height:35px;margin:10px 0;line-height:35px}.do-meditor-common section.input{line-height:33px;border:1px solid #e9e9e9}.do-meditor-common section .label{float:left;width:30%;text-align:center;background:#f7f7f7}.do-meditor-common section label{float:left;width:50%}.do-meditor-common section .txt{float:left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666}.do-meditor-common section .submit{float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor-codeblock{width:780px;height:auto;padding:15px 20px;background:#fafafa}.do-meditor-codeblock section{display:block;width:100%;height:auto;margin:10px 0;line-height:35px}.do-meditor-codeblock section::after{visibility:hidden;overflow:hidden;display:block;height:0;content:".";clear:both}.do-meditor-codeblock section .label{float:left;width:80px}.do-meditor-codeblock section select{float:left;width:200px;height:35px;border:1px solid #ddd;border-radius:5px;background:#fff}.do-meditor-codeblock section textarea{width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none}.do-meditor-codeblock section .submit{float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor .tool-bar{overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666}.do-meditor .tool-bar span{display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px}.do-meditor .tool-bar .edicon:hover{background:#e5e5e5}.do-meditor .tool-bar .icon-pipe{width:20px}.do-meditor .tool-bar .icon-pipe:hover{background:none}.do-meditor .tool-bar .icon-pipe::before{content:"\e62c"}.do-meditor .tool-bar .icon-h1::before{content:"\e62b"}.do-meditor .tool-bar .icon-bold::before{content:"\e62f"}.do-meditor .tool-bar .icon-italic::before{content:"\e639"}.do-meditor .tool-bar .icon-through::before{content:"\e619"}.do-meditor .tool-bar .icon-link::before{content:"\e61c"}.do-meditor .tool-bar .icon-inlinecode::before{content:"\e63a"}.do-meditor .tool-bar .icon-blockcode::before{content:"\e632"}.do-meditor .tool-bar .icon-quote::before{content:"\e61b"}.do-meditor .tool-bar .icon-hr::before{content:"\e614"}.do-meditor .tool-bar .icon-time::before{content:"\e636"}.do-meditor .tool-bar .icon-face::before{content:"\e630"}.do-meditor .tool-bar .icon-image::before{content:"\e637"}.do-meditor .tool-bar .icon-file::before{content:"\e618"}.do-meditor .tool-bar .icon-preview::before{content:"\e61f"}.do-meditor .tool-bar .icon-fullscreen::before{content:"\e621"}.do-meditor .tool-bar .icon-table::before{content:"\e617"}.do-meditor .tool-bar .icon-ordered::before{content:"\e638"}.do-meditor .tool-bar .icon-unordered::before{content:"\e633"}.do-meditor .tool-bar .icon-about::before{content:"\e700"}.do-meditor .editor-body{float:left;width:100%;height:100%;background:#fff}.do-meditor .editor-body>textarea{overflow:hidden;overflow-y:auto;width:100%;height:100%;padding:5px;border:0;outline:none;resize:none;color:#666;background:none}.do-meditor .md-preview{float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff}.do-meditor.fullscreen{position:fixed;left:0;top:0;z-index:999}.do-meditor.preview .editor-body,.do-meditor.fullscreen .editor-body{width:50%} +::-webkit-scrollbar{width:5px;height:5px;background:#ebeeec}::-webkit-scrollbar:hover{background:rgba(0,0,0,0.05)}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:#1abc9c}::-webkit-scrollbar-thumb:hover{background:#16a085}.do-meditor{position:relative;width:100%;height:100%;min-height:180px;padding-top:43px;border:1px solid #ddd;background:#fff;color:#666}.do-meditor-font{font-family:"PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei",sans-serif}.do-meditor-about{width:400px;padding:10px 20px}.do-meditor-about pre{width:100%;padding-bottom:15px;line-height:1;font-size:14px}.do-meditor-about a{color:#049789}.do-meditor-about p{margin:0 auto 5px}.do-meditor-table{width:270px;height:270px;padding:10px}.do-meditor-table li{width:100%;height:25px}.do-meditor-table li span{float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2}.do-meditor-table li span.active{background:rgba(4,151,137,0.2)}.do-meditor-face{float:left;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2}.do-meditor-face li{float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0}.do-meditor-face li img{width:100%;transition:all .1s ease-in-out}.do-meditor-face li:hover img{-webkit-transform:scale(3);-moz-transform:scale(3);-ms-transform:scale(3);transform:scale(3)}.do-meditor-h1{width:150px;height:auto;padding:5px 0}.do-meditor-h1 li{width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default}.do-meditor-h1 li:hover{background:#f2f2f2}.do-meditor-h1 li::before{font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.do-meditor-h1 li.h1{font-size:23px}.do-meditor-h1 li.h2{font-size:21px}.do-meditor-h1 li.h1::before{content:"\e62b "}.do-meditor-h1 li.h2::before{content:"\e625 "}.do-meditor-h1 li.h3::before{content:"\e626 "}.do-meditor-h1 li.h4::before{content:"\e629 "}.do-meditor-h1 li.h5::before{content:"\e62a "}.do-meditor-h1 li.h6::before{content:"\e624 "}.do-meditor-common{width:360px;height:auto;padding:15px 20px}.do-meditor-common section{width:100%;height:35px;margin:10px 0;line-height:35px}.do-meditor-common section.input{line-height:33px;border:1px solid #e9e9e9}.do-meditor-common section .label{float:left;width:30%;text-align:center;background:#f7f7f7}.do-meditor-common section label{float:left;width:50%}.do-meditor-common section .txt{float:left;width:70%;height:33px;padding:0 8px;border:0;border-left:1px solid #e9e9e9;background:#fff;color:#666}.do-meditor-common section .submit{float:right;width:30%;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor-codeblock{width:780px;height:auto;padding:15px 20px;background:#fafafa}.do-meditor-codeblock section{display:block;width:100%;height:auto;margin:10px 0;line-height:35px}.do-meditor-codeblock section .label{float:left;width:80px}.do-meditor-codeblock section select{float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:#546e7a;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-meditor-codeblock section select::-ms-expand{display:none}.do-meditor-codeblock section select:focus{border-color:#1abc9c}.do-meditor-codeblock section textarea{width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;outline:none}.do-meditor-codeblock section .submit{float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center}.do-meditor .tool-bar{overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666}.do-meditor .tool-bar span{display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px}.do-meditor .tool-bar span:hover{background:#e5e5e5}.do-meditor .tool-bar .icon-pipe{width:20px}.do-meditor .tool-bar .icon-pipe:hover{background:none}.do-meditor .tool-bar .icon-pipe::before{content:"\e62c"}.do-meditor .tool-bar .icon-h1::before{content:"\e62b"}.do-meditor .tool-bar .icon-bold::before{content:"\e62f"}.do-meditor .tool-bar .icon-italic::before{content:"\e639"}.do-meditor .tool-bar .icon-through::before{content:"\e619"}.do-meditor .tool-bar .icon-link::before{content:"\e61c"}.do-meditor .tool-bar .icon-inlinecode::before{content:"\e63a"}.do-meditor .tool-bar .icon-blockcode::before{content:"\e632"}.do-meditor .tool-bar .icon-quote::before{content:"\e61b"}.do-meditor .tool-bar .icon-hr::before{content:"\e614"}.do-meditor .tool-bar .icon-time::before{content:"\e636"}.do-meditor .tool-bar .icon-face::before{content:"\e630"}.do-meditor .tool-bar .icon-image::before{content:"\e637"}.do-meditor .tool-bar .icon-file::before{content:"\e618"}.do-meditor .tool-bar .icon-preview::before{content:"\e61f"}.do-meditor .tool-bar .icon-fullscreen::before{content:"\e621"}.do-meditor .tool-bar .icon-table::before{content:"\e617"}.do-meditor .tool-bar .icon-ordered::before{content:"\e638"}.do-meditor .tool-bar .icon-unordered::before{content:"\e633"}.do-meditor .tool-bar .icon-about::before{content:"\e700"}.do-meditor .editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;border:0;outline:none;resize:none;color:#666;background:#fff}.do-meditor .md-preview{float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff}.do-meditor.fullscreen{position:fixed;left:0;top:0;z-index:999}.do-meditor.preview .editor-body{width:50%} diff --git a/js/lib/meditor/skin/main.scss b/js/lib/meditor/skin/main.scss index 641753e..a2c683e 100644 --- a/js/lib/meditor/skin/main.scss +++ b/js/lib/meditor/skin/main.scss @@ -21,18 +21,20 @@ /* 关于编辑器模块*/ -.do-meditor-about {width:400px;padding:10px 20px;} -.do-meditor-about pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;} -.do-meditor-about a {color:#049789} -.do-meditor-about p {margin:0 auto 5px;} +.do-meditor-about {width:400px;padding:10px 20px; + pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;} + a {color:#049789} + p {margin:0 auto 5px;} +} /*表格模块*/ -.do-meditor-table {width:270px;height:270px;padding:10px;} -.do-meditor-table li {width:100%;height:25px;} -.do-meditor-table li span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;} -.do-meditor-table li span.active {background:rgba(4,151,137,.2);} - +.do-meditor-table {width:270px;height:270px;padding:10px; + li {width:100%;height:25px; + span {float:left;width:25px;height:25px;border:2px solid #fff;background:#f2f2f2;} + span.active {background:rgba(4,151,137,.2);} + } +} /*表情模块*/ .do-meditor-face {float:left;;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2; @@ -71,13 +73,20 @@ } } -.do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa;} -.do-meditor-codeblock section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;} -.do-meditor-codeblock section::after {visibility: hidden;overflow:hidden; display: block;height: 0;content: "."; clear: both;} -.do-meditor-codeblock section .label {float: left;width:80px;} -.do-meditor-codeblock section select {float:left;width:200px;height:35px;border:1px solid #ddd;border-radius:5px;background:#fff} -.do-meditor-codeblock section textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;} -.do-meditor-codeblock section .submit {float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center;} +.do-meditor-codeblock {width:780px;height:auto;padding:15px 20px;background:#fafafa; + 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-bottom:1px solid #e7e7e7;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts; + + &::-ms-expand {display:none;} + + &:focus {border-color:nth($ct, 1);} + } + textarea {width:100%;height:300px;padding:5px 10px;border:1px solid #ddd;background:#fff;resize:none;outline:none;} + .submit {float:right;width:80px;height:35px;background:#ddd;color:#666;text-align:center;} + } +} @@ -86,7 +95,7 @@ .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:43px;padding:5px 10px;border-bottom:1px solid #ddd;background:#f5f5f5;color:#666; span {display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px;} - .edicon:hover {background:#e5e5e5;} + span:hover {background:#e5e5e5;} .icon-pipe {width:20px;} .icon-pipe:hover {background:none;} .icon-pipe::before {content:"\e62c"} @@ -111,17 +120,14 @@ .icon-about::before {content:"\e700"} } - - .editor-body {float:left;width:100%;height:100%;background:#fff;} - .editor-body>textarea {overflow:hidden;overflow-y:auto;width:100%;height:100%;padding:5px;border:0;outline:none;resize:none;color:#666;background:none;} - .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;} + .editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;border:0;outline:none;resize:none;color:#666;background:#fff;} + .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;} /*全屏模式*/ &.fullscreen {position:fixed;left:0;top:0;z-index:999;} - &.preview .editor-body, - &.fullscreen .editor-body {width:50%} + &.preview .editor-body {width:50%} } \ No newline at end of file