This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

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

old
宇天 2017-09-29 01:30:04 +08:00
parent 6ab1adb31c
commit d70bb13ad6
11 changed files with 224 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/basic-elem.css
View File

File diff suppressed because one or more lines are too long

4
css/basic-elem.scss
View File

@ -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;

31
js/lib/marked/main.js
View File

@ -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': {
var body = '';
while (this.next().type !== 'mark_end') {
body += this.tok();
}
return this.renderer.mark(body, this.token.mark);
case 'mark': {
return this.renderer.mark(this.token.text, 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() {

1
js/lib/marked/theme.css Normal file
View File

@ -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}

60
js/lib/marked/theme.scss Normal file
View File

@ -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;}
}

26
js/lib/meditor/addon/base.js
View File

@ -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">'
+ '<section><span class="label">链接文字</span>'
+ '<input class="input" :duplex="linkName" />'
content: '<div class="do-meditor-common do-meditor-font">'
+ '<section class="input"><span class="label">链接文字</span>'
+ '<input class="txt" :duplex="linkName" />'
+ '</section>'
+ '<section><span class="label">链接地址</span>'
+ '<input class="input" :duplex="link"/>'
+ '<section class="input"><span class="label">链接地址</span>'
+ '<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">'
+ '<section><span class="label">图片描述</span>'
+ '<input class="input" :duplex="imgAlt" />'
content: '<div class="do-meditor-common do-meditor-font">'
+ '<section class="input"><span class="label">图片描述</span>'
+ '<input class="txt" :duplex="imgAlt" />'
+ '</section>'
+ '<section><span class="label">图片地址</span>'
+ '<input class="input" :duplex="img"/>'
+ '<section class="input"><span class="label">图片地址</span>'
+ '<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'

11
js/lib/meditor/main.js
View File

@ -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" '
+ ':visible="editorVisible" '
$template: '<div class="do-meditor do-meditor-font" :visible="editorVisible"'
+ ' :class="{fullscreen: fullscreen, preview: preview}">'
+ '<div class="tool-bar do-fn-noselect">{toolbar}</div>'
+ '<div class="tool-bar do-ui-font 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){

BIN
js/lib/meditor/skin/iconfont.eot
View File

Binary file not shown.

BIN
js/lib/meditor/skin/iconfont.ttf
View File

Binary file not shown.

155
js/lib/meditor/skin/main.css
View File

File diff suppressed because one or more lines are too long

127
js/lib/meditor/skin/main.scss Normal file
View File

@ -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%}
}