优化基础样式;marked组件增加主题样式;重构MEditor

css/basic-elem.scss

@@ -201,10 +201,10 @@
 }
 
 /* 提醒文本 */
-.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3);word-break: break-all;
+.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 nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
     
     p {margin:0!important;}
-    &::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
+    &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
 }
 .do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
 

js/lib/marked/main.js

@@ -19,7 +19,7 @@ var block = {
     nptable: noop,
     lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
     blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
-    mark: /^( *;;;([\!]?)[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
+    mark: /^ *;;;([\!]?) ([^\n]+)/,
     task: /^ *- *\[([ x]?)\] *([^\n]*)/,
     list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
     html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
@@ -44,9 +44,7 @@ block.list = replace(block.list)
 block.blockquote = replace(block.blockquote)
     ('def', block.def)
     ();
-block.mark = replace(block.mark)
+
-('def', block.def)
-();
 
 block._tag = '(?!(?:'
     + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
@@ -289,9 +287,11 @@ Lexer.prototype.token = function(src, top, bq) {
             src = src.substring(cap[0].length);
 
             this.tokens.push({
-                type: 'mark_start'
+                type: 'mark',
+                mark: cap[1] === '!',
+                text: cap[2]
             });
-            var sign = cap[2] === '!'
+/*            var sign = cap[2] === '!'
             cap = cap[0].replace(/^ *;;;[\!]? ?/gm, '');
 
             this.token(cap, top, true);
@@ -299,7 +299,7 @@ Lexer.prototype.token = function(src, top, bq) {
             this.tokens.push({
                 type: 'mark_end',
                 mark: sign
-            });
+            });*/
 
             continue;
         }
@@ -849,10 +849,10 @@ Renderer.prototype.code = function(code, lang, escaped) {
 };
 
 Renderer.prototype.blockquote = function(quote) {
-    return '<blockquote>\n' + quote + '</blockquote>\n';
+    return '<blockquote class="md-quote">\n' + quote + '</blockquote>\n';
 };
 Renderer.prototype.mark = function(mark, t) {
-    return '<mark class="' + (t ? 'do-ui-warn' : 'do-ui-mark') + '">\n' + mark + '</mark>\n';
+    return '<section><mark class="' + (t ? 'md-warn' : 'md-mark') + '">\n' + mark + '</mark></section>\n';
 };
 
 Renderer.prototype.task = function(task, t) {
@@ -868,7 +868,7 @@ Renderer.prototype.heading = function(text, level, raw) {
     raw = text.replace(/<[^>]+>|<\/[^>]+>/g, '')
     return '<h'
         + level
-        + ' class="md-hd" id="'
+        + ' class="md-head" id="'
         + raw
         + '"><a href="#'
         + raw
@@ -1120,13 +1120,8 @@ Parser.prototype.tok = function() {
 
             return this.renderer.blockquote(body);
         }
-        case 'mark_start': {
+        case 'mark': {
-            var body = '';
+            return this.renderer.mark(this.token.text, this.token.mark);
-
-            while (this.next().type !== 'mark_end') {
-                body += this.tok();
-            }
-            return this.renderer.mark(body, this.token.mark);
         }
         case 'task': {
             return this.renderer.task(this.token.text, this.token.mark)
@@ -1374,7 +1369,7 @@ this.marked = marked;
 if (typeof module !== 'undefined' && typeof exports === 'object') {
     module.exports = marked;
 } else if (typeof define === 'function' && define.amd) {
-    define(function() { return marked; });
+    define(['css!./theme'], function() { return marked; });
 }
 
 }).call(function() {

js/lib/marked/theme.css

@@ -0,0 +1 @@
+.do-marked-theme{position:relative}.do-marked-theme .md-head{position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px}.do-marked-theme h1.md-head{padding-left:0}.do-marked-theme .md-head a{position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}.do-marked-theme .md-head a:hover{text-decoration:none}.do-marked-theme h1.md-head a{padding-left:0;color:#000}.do-marked-theme h2.md-head a{color:#000}.do-marked-theme h1.md-head{margin:0 0 30px;font-size:25px}.do-marked-theme h2.md-head{margin:20px 0;font-size:23px}.do-marked-theme h3.md-head{margin:20px 0 15px;font-size:20px}.do-marked-theme h1:after{display:block;width:100%;content:" ";border-bottom:1px solid #ddd}.do-marked-theme h2:before,.do-marked-theme h3:before,.do-marked-theme h4:before,.do-marked-theme h5:before,.do-marked-theme h6:before{display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd}.do-marked-theme a{text-decoration:none}.do-marked-theme a:hover{text-decoration:underline}.do-marked-theme p{margin:15px 0}.do-marked-theme blockquote.md-quote{margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}.do-marked-theme blockquote.md-quote p{margin:0}.do-marked-theme .md-warn,.do-marked-theme .md-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-marked-theme .md-warn p,.do-marked-theme .md-mark p{margin:0 !important}.do-marked-theme .md-warn::before,.do-marked-theme .md-mark::before{position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:#ff5722;content:"\e6f6"}.do-marked-theme .md-mark{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-marked-theme .md-mark::before{color:#16a085;content:"\e657"}.do-marked-theme table{width:100%}.do-marked-theme table thead tr{height:45px;line-height:45px;background:#f7f7f7}.do-marked-theme table thead th{padding:0 8px;border:0}.do-marked-theme table tbody tr{height:43px;line-height:42px;transition:all .3s ease-in-out}.do-marked-theme table tbody tr:hover{background:#ecf6fd}.do-marked-theme table tbody td{padding:0 8px;border-bottom:1px solid #e9e9e9}.do-marked-theme hr{margin:30px 0;border-bottom:0}.do-marked-theme ol{margin-left:2em;list-style:decimal outside none}.do-marked-theme ul{margin-left:2em;list-style:disc outside none}.do-marked-theme li ol{margin-left:2em}.do-marked-theme li ul{margin-left:2em;list-style-type:circle}.do-marked-theme li ol ul,.do-marked-theme li ul ul{list-style-type:square}

js/lib/marked/theme.scss

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2017-09-29 00:05:45
+ * @version $Id$
+ */
+@import "../../../css/var.scss";
+
+.do-marked-theme {position:relative;
+
+    .md-head {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
+    h1.md-head {padding-left:0;}
+    .md-head a {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
+    .md-head a:hover {text-decoration:none;}
+    h1.md-head a {padding-left:0;color:#000;}
+    h2.md-head a {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:none;}
+    a:hover {text-decoration:underline;}
+    p {margin:15px 0;}
+    blockquote.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid #6bb294;background:#f7f7f7}
+    blockquote.md-quote p {margin:0;}
+    /* 提醒文本 */
+    .md-warn,.md-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
+    
+        p {margin:0!important;}
+        &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
+    }
+    .md-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
+
+        &::before {color:nth($ct, 3);content:"\e657";}
+    }
+    table {width:100%;
+        thead tr {height:45px;line-height:45px;background:#f7f7f7}
+        thead th {padding:0 8px;border:0;}
+        tbody tr {height:43px;line-height:42px;@include ts(all, .3s);
+            &:hover {background:#ecf6fd}
+        }
+        tbody td {padding:0 8px;border-bottom:1px solid #e9e9e9}
+    }
+
+    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;}
+}

js/lib/meditor/addon/base.js

@@ -43,7 +43,7 @@ define(['lib/layer/base'], function(){
                         layer.close(h1ID)
                     },
                     offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
-                    content: '<ul class="do-meditor-h1 do-fn-noselect meditor-font">'
+                    content: '<ul class="do-meditor-h1 do-fn-noselect do-meditor-font">'
                         + '<li :click="$insert(1)" class="h1">一级标题</li>'
                         + '<li :click="$insert(2)" class="h2">二级标题</li>'
                         + '<li :click="$insert(3)" class="h3">三级标题</li>'
@@ -122,12 +122,12 @@ define(['lib/layer/base'], function(){
                         layer.close(layid)
                     },
                     offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
-                    content: '<div class="do-meditor-common meditor-font">'
+                    content: '<div class="do-meditor-common do-meditor-font">'
-                        + '<section><span class="label">链接文字</span>'
+                        + '<section class="input"><span class="label">链接文字</span>'
-                            + '<input class="input" :duplex="linkName" />'
+                            + '<input class="txt" :duplex="linkName" />'
                         + '</section>'
-                        + '<section><span class="label">链接地址</span>'
+                        + '<section class="input"><span class="label">链接地址</span>'
-                            + '<input class="input" :duplex="link"/>'
+                            + '<input class="txt" :duplex="link"/>'
                         + '</section>'
                         + '<section>'
                             + '<label><input name="link" type="radio" class="radio" :duplex-number="linkTarget" value="1"/> 新窗口打开</label>'
@@ -240,12 +240,12 @@ define(['lib/layer/base'], function(){
                         layer.close(layid)
                     },
                     offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
-                    content: '<div class="do-meditor-common meditor-font">'
+                    content: '<div class="do-meditor-common do-meditor-font">'
-                        + '<section><span class="label">图片描述</span>'
+                        + '<section class="input"><span class="label">图片描述</span>'
-                            + '<input class="input" :duplex="imgAlt" />'
+                            + '<input class="txt" :duplex="imgAlt" />'
                         + '</section>'
-                        + '<section><span class="label">图片地址</span>'
+                        + '<section class="input"><span class="label">图片地址</span>'
-                            + '<input class="input" :duplex="img"/>'
+                            + '<input class="txt" :duplex="img"/>'
                         + '</section>'
                         + '<section>'
                             + '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
@@ -310,7 +310,7 @@ define(['lib/layer/base'], function(){
                         ME.insert(vm.$editor, val, false)
                         layer.close(layid)
                     },
-                    content: '<div class="do-meditor-codeblock meditor-font">'
+                    content: '<div class="do-meditor-codeblock do-meditor-font">'
                         + '<section><span class="label">语言类型</span>'
                             + '<select :duplex="lang">'
                                 + '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
@@ -341,7 +341,7 @@ define(['lib/layer/base'], function(){
                 type: 7,
                 title: '关于编辑器',
                 offset: [offset.top + 37 - ME.doc.scrollTop()],
-                content: '<div class="do-meditor-about meditor-font">'
+                content: '<div class="do-meditor-about do-meditor-font">'
                     + '<pre>'
                     + ' __  __ _____    _ _ _\n'             
                     + '|  \\/  | ____|__| (_) |_ ___  _ __\n' 

js/lib/meditor/main.js

@@ -141,7 +141,7 @@ define([
                         return vm.$htmlTxt
                     },
                     setVal: function(txt){
-                        vm.plainTxt = txt
+                        vm.plainTxt = txt || ''
                     },
                     show: function(){
                         vm.editorVisible = true
@@ -295,7 +295,7 @@ define([
         function tool(name){
             name = (name + '').trim().toLowerCase()
             name = '|' === name ? 'pipe' : name
-            return '<span title="' + ME.toolbar[name] + '" class="edicon icon-' + name+ '" '
+            return '<span title="' + ME.toolbar[name] + '" class="icon-' + name+ '" '
                 + (name !== 'pipe' ? (':click="$onToolbarClick(\'' + name + '\')"') : '')
                 + '></span>'
         }
@@ -303,14 +303,13 @@ define([
 
 
         yua.component('meditor', {
-            $template: '<div class="do-meditor meditor-font" '
+            $template: '<div class="do-meditor do-meditor-font" :visible="editorVisible"'
-                + ':visible="editorVisible" '
+                + ' :class="{fullscreen: fullscreen, preview: preview}">'
-                + ':class="{fullscreen: fullscreen, preview: preview}">'
+                + '<div class="tool-bar do-ui-font do-fn-noselect">{toolbar}</div>'
-                + '<div class="tool-bar do-fn-noselect">{toolbar}</div>'
                 + '<div class="editor-body">'
                     + '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
                 + '</div>'
-                + '<content class="md-preview" :visible="preview" :html="htmlTxt"></content>'
+                + '<content class="md-preview do-marked-theme" :visible="preview" :html="htmlTxt"></content>'
             + '</div>',
             $$template: function(txt){
                 

js/lib/meditor/skin/main.scss

@@ -0,0 +1,127 @@
+@charset "UTF-8";
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2017-04-17 16:43:22
+ * 
+ */
+
+@import "../../../../css/var.scss";
+
+::-webkit-scrollbar {width:5px;height:5px;background:#ebeeec;}
+::-webkit-scrollbar:hover {background:rgba(0,0,0,.05);}
+::-webkit-scrollbar-button {display:none;}
+::-webkit-scrollbar-thumb {background:nth($ct, 1);}
+::-webkit-scrollbar-thumb:hover {background:nth($ct, 3);}
+
+.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,.2);}
+
+
+/*表情模块*/
+.do-meditor-face {float:left;;width:241px;height:241px;margin:10px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;
+
+    li {float:left;width:40px;height:40px;padding:8px;border:1px solid #e2e2e2;border-top:0;border-left:0}
+    li img {width:100%;@include ts();}
+    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;
+
+    li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;}
+    li:hover {background:#f2f2f2;}
+    li::before {font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
+    li.h1 {font-size:23px;}
+    li.h2 {font-size:21px;}
+    li.h1::before {content:"\e62b  "}
+    li.h2::before {content:"\e625  "}
+    li.h3::before {content:"\e626  "}
+    li.h4::before {content:"\e629  "}
+    li.h5::before {content:"\e62a  "}
+    li.h6::before {content:"\e624  "}
+}
+
+/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
+.do-meditor-common {width:360px;height:auto;padding:15px 20px;
+    section {width:100%;height: 35px;margin:10px 0;line-height:35px;
+
+        &.input {line-height:33px;border:1px solid #e9e9e9;}
+        .label {float: left;width:30%;text-align:center;background:#f7f7f7;}
+        label {float: left;width:50%;}
+        .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;}
+    }
+}
+
+.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;
+
+        span {display:inline-block;width:30px;height:32px;line-height:32px;text-align:center;font-size:20px;}
+        .edicon:hover {background:#e5e5e5;}
+        .icon-pipe {width:20px;}
+        .icon-pipe:hover {background:none;}
+        .icon-pipe::before {content:"\e62c"}
+        .icon-h1::before {content:"\e62b"}
+        .icon-bold::before {content:"\e62f"}
+        .icon-italic::before {content:"\e639"}
+        .icon-through::before {content:"\e619"}
+        .icon-link::before {content:"\e61c"}
+        .icon-inlinecode::before {content:"\e63a"}
+        .icon-blockcode::before {content:"\e632"}
+        .icon-quote::before {content:"\e61b"}
+        .icon-hr::before {content:"\e614"}
+        .icon-time::before {content:"\e636"}
+        .icon-face::before {content:"\e630"}
+        .icon-image::before {content:"\e637"}
+        .icon-file::before {content:"\e618"}
+        .icon-preview::before {content:"\e61f"}
+        .icon-fullscreen::before {content:"\e621"}
+        .icon-table::before {content:"\e617"}
+        .icon-ordered::before {content:"\e638"}
+        .icon-unordered::before {content:"\e633"}
+        .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;}
+
+
+
+    /*全屏模式*/
+    &.fullscreen {position:fixed;left:0;top:0;z-index:999;}
+
+    &.preview .editor-body,
+    &.fullscreen .editor-body {width:50%}
+
+}