优化基础样式;marked组件增加主题样式;重构MEditor
parent
6ab1adb31c
commit
d70bb13ad6
File diff suppressed because one or more lines are too long
|
@ -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;}
|
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;
|
.do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@ var block = {
|
||||||
nptable: noop,
|
nptable: noop,
|
||||||
lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
|
lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
|
||||||
blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
|
blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
|
||||||
mark: /^( *;;;([\!]?)[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
|
mark: /^ *;;;([\!]?) ([^\n]+)/,
|
||||||
task: /^ *- *\[([ x]?)\] *([^\n]*)/,
|
task: /^ *- *\[([ x]?)\] *([^\n]*)/,
|
||||||
list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
|
list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
|
||||||
html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\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)
|
block.blockquote = replace(block.blockquote)
|
||||||
('def', block.def)
|
('def', block.def)
|
||||||
();
|
();
|
||||||
block.mark = replace(block.mark)
|
|
||||||
('def', block.def)
|
|
||||||
();
|
|
||||||
|
|
||||||
block._tag = '(?!(?:'
|
block._tag = '(?!(?:'
|
||||||
+ 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
|
+ '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);
|
src = src.substring(cap[0].length);
|
||||||
|
|
||||||
this.tokens.push({
|
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, '');
|
cap = cap[0].replace(/^ *;;;[\!]? ?/gm, '');
|
||||||
|
|
||||||
this.token(cap, top, true);
|
this.token(cap, top, true);
|
||||||
|
@ -299,7 +299,7 @@ Lexer.prototype.token = function(src, top, bq) {
|
||||||
this.tokens.push({
|
this.tokens.push({
|
||||||
type: 'mark_end',
|
type: 'mark_end',
|
||||||
mark: sign
|
mark: sign
|
||||||
});
|
});*/
|
||||||
|
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
@ -849,10 +849,10 @@ Renderer.prototype.code = function(code, lang, escaped) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Renderer.prototype.blockquote = function(quote) {
|
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) {
|
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) {
|
Renderer.prototype.task = function(task, t) {
|
||||||
|
@ -868,7 +868,7 @@ Renderer.prototype.heading = function(text, level, raw) {
|
||||||
raw = text.replace(/<[^>]+>|<\/[^>]+>/g, '')
|
raw = text.replace(/<[^>]+>|<\/[^>]+>/g, '')
|
||||||
return '<h'
|
return '<h'
|
||||||
+ level
|
+ level
|
||||||
+ ' class="md-hd" id="'
|
+ ' class="md-head" id="'
|
||||||
+ raw
|
+ raw
|
||||||
+ '"><a href="#'
|
+ '"><a href="#'
|
||||||
+ raw
|
+ raw
|
||||||
|
@ -1120,13 +1120,8 @@ Parser.prototype.tok = function() {
|
||||||
|
|
||||||
return this.renderer.blockquote(body);
|
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': {
|
case 'task': {
|
||||||
return this.renderer.task(this.token.text, this.token.mark)
|
return this.renderer.task(this.token.text, this.token.mark)
|
||||||
|
@ -1374,7 +1369,7 @@ this.marked = marked;
|
||||||
if (typeof module !== 'undefined' && typeof exports === 'object') {
|
if (typeof module !== 'undefined' && typeof exports === 'object') {
|
||||||
module.exports = marked;
|
module.exports = marked;
|
||||||
} else if (typeof define === 'function' && define.amd) {
|
} else if (typeof define === 'function' && define.amd) {
|
||||||
define(function() { return marked; });
|
define(['css!./theme'], function() { return marked; });
|
||||||
}
|
}
|
||||||
|
|
||||||
}).call(function() {
|
}).call(function() {
|
||||||
|
|
|
@ -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}
|
|
@ -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;}
|
||||||
|
}
|
|
@ -43,7 +43,7 @@ define(['lib/layer/base'], function(){
|
||||||
layer.close(h1ID)
|
layer.close(h1ID)
|
||||||
},
|
},
|
||||||
offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
|
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(1)" class="h1">一级标题</li>'
|
||||||
+ '<li :click="$insert(2)" class="h2">二级标题</li>'
|
+ '<li :click="$insert(2)" class="h2">二级标题</li>'
|
||||||
+ '<li :click="$insert(3)" class="h3">三级标题</li>'
|
+ '<li :click="$insert(3)" class="h3">三级标题</li>'
|
||||||
|
@ -122,12 +122,12 @@ define(['lib/layer/base'], function(){
|
||||||
layer.close(layid)
|
layer.close(layid)
|
||||||
},
|
},
|
||||||
offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
|
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>'
|
||||||
+ '<section><span class="label">链接地址</span>'
|
+ '<section class="input"><span class="label">链接地址</span>'
|
||||||
+ '<input class="input" :duplex="link"/>'
|
+ '<input class="txt" :duplex="link"/>'
|
||||||
+ '</section>'
|
+ '</section>'
|
||||||
+ '<section>'
|
+ '<section>'
|
||||||
+ '<label><input name="link" type="radio" class="radio" :duplex-number="linkTarget" value="1"/> 新窗口打开</label>'
|
+ '<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)
|
layer.close(layid)
|
||||||
},
|
},
|
||||||
offset: [offset.top + 37 - ME.doc.scrollTop(), 'auto', 'auto', offset.left - ME.doc.scrollLeft()],
|
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>'
|
||||||
+ '<section><span class="label">图片地址</span>'
|
+ '<section class="input"><span class="label">图片地址</span>'
|
||||||
+ '<input class="input" :duplex="img"/>'
|
+ '<input class="txt" :duplex="img"/>'
|
||||||
+ '</section>'
|
+ '</section>'
|
||||||
+ '<section>'
|
+ '<section>'
|
||||||
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
|
+ '<a href="javascript:;" class="submit" :click="$confirm">确定</a>'
|
||||||
|
@ -310,7 +310,7 @@ define(['lib/layer/base'], function(){
|
||||||
ME.insert(vm.$editor, val, false)
|
ME.insert(vm.$editor, val, false)
|
||||||
layer.close(layid)
|
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>'
|
+ '<section><span class="label">语言类型</span>'
|
||||||
+ '<select :duplex="lang">'
|
+ '<select :duplex="lang">'
|
||||||
+ '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
|
+ '<option :repeat="$lang" :attr-value="el.id">{{el.name || el.id}}</option>'
|
||||||
|
@ -341,7 +341,7 @@ define(['lib/layer/base'], function(){
|
||||||
type: 7,
|
type: 7,
|
||||||
title: '关于编辑器',
|
title: '关于编辑器',
|
||||||
offset: [offset.top + 37 - ME.doc.scrollTop()],
|
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>'
|
+ '<pre>'
|
||||||
+ ' __ __ _____ _ _ _\n'
|
+ ' __ __ _____ _ _ _\n'
|
||||||
+ '| \\/ | ____|__| (_) |_ ___ _ __\n'
|
+ '| \\/ | ____|__| (_) |_ ___ _ __\n'
|
||||||
|
|
|
@ -141,7 +141,7 @@ define([
|
||||||
return vm.$htmlTxt
|
return vm.$htmlTxt
|
||||||
},
|
},
|
||||||
setVal: function(txt){
|
setVal: function(txt){
|
||||||
vm.plainTxt = txt
|
vm.plainTxt = txt || ''
|
||||||
},
|
},
|
||||||
show: function(){
|
show: function(){
|
||||||
vm.editorVisible = true
|
vm.editorVisible = true
|
||||||
|
@ -295,7 +295,7 @@ define([
|
||||||
function tool(name){
|
function tool(name){
|
||||||
name = (name + '').trim().toLowerCase()
|
name = (name + '').trim().toLowerCase()
|
||||||
name = '|' === name ? 'pipe' : name
|
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 + '\')"') : '')
|
+ (name !== 'pipe' ? (':click="$onToolbarClick(\'' + name + '\')"') : '')
|
||||||
+ '></span>'
|
+ '></span>'
|
||||||
}
|
}
|
||||||
|
@ -303,14 +303,13 @@ define([
|
||||||
|
|
||||||
|
|
||||||
yua.component('meditor', {
|
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">'
|
+ '<div class="editor-body">'
|
||||||
+ '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
|
+ '<textarea spellcheck="false" :duplex="plainTxt" :attr="{disabled: disabled}" :on-paste="$paste($event)" id="{uuid}"></textarea>'
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
+ '<content class="md-preview" :visible="preview" :html="htmlTxt"></content>'
|
+ '<content class="md-preview do-marked-theme" :visible="preview" :html="htmlTxt"></content>'
|
||||||
+ '</div>',
|
+ '</div>',
|
||||||
$$template: function(txt){
|
$$template: function(txt){
|
||||||
|
|
||||||
|
|
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
@ -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%}
|
||||||
|
|
||||||
|
}
|
Reference in New Issue