Netsyms
/
simplemde-markdown-editor
mirror of https://github.com/sparksuite/simplemde-markdown-editor.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Improved previewing of tables, Restructure

Browse Source
pull/1/head
Wes Cossick 9 years ago
parent 937433fa63
commit 383514762a
3 changed files with 601 additions and 553 deletions
Show Stats Download Patch File Download Diff File

136
sources files/codemirror/codemirror.css
Unescape Escape View File

@ -1,136 +0,0 @@
.CodeMirror {
height:auto;
min-height: 300px;
border:1px solid #ddd;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
padding:10px;
}
:-webkit-full-screen {
background: #f9f9f5;
padding: 0.5em 1em;
width: 100%;
height: 100%;
}
:-moz-full-screen {
padding: 0.5em 1em;
background: #f9f9f5;
width: 100%;
height: 100%;
}
.editor-wrapper {
font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
color: #2c3e50;
}
/* this is the title */
.editor-wrapper input.title {
font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
background: transparent;
padding: 4px;
width: 100%;
border: none;
outline: none;
opacity: 0.6;
}
.editor-toolbar {
position: relative;
opacity: 0.6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
padding:0 10px;
border-top:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.editor-toolbar:before, .editor-toolbar:after {
display: block;
content: ' ';
height: 1px;
}
.editor-toolbar:before {
margin-bottom: 8px;
}
.editor-toolbar:after {
margin-top: 8px;
}
.editor-wrapper input.title:hover, .editor-wrapper input.title:focus, .editor-toolbar:hover {
opacity: 0.8;
}
.editor-toolbar a {
display: inline-block;
text-align: center;
text-decoration: none !important;
color: #2c3e50 !important;
width:30px;
height:30px;
margin:0;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
}
.editor-toolbar a:hover, .editor-toolbar a.active {
background: #fcfcfc;
border-color: #95a5a6;
}
.editor-toolbar a:before {
line-height:30px;
}
.editor-toolbar i.separator {
display: inline-block;
width: 0;
border-left: 1px solid #d9d9d9;
border-right: 1px solid white;
color: transparent;
text-indent: -10px;
margin: 0 6px;
}
.editor-toolbar a.icon-fullscreen {
position: absolute;
right:10px;
}
.editor-statusbar {
padding: 8px 10px;
font-size: 12px;
color: #959694;
text-align: right;
}
.editor-statusbar span {
display: inline-block;
min-width: 4em;
margin-left: 1em;
}
.editor-statusbar .lines:before {
content: 'lines: ';
}
.editor-statusbar .words:before {
content: 'words: ';
}
.editor-preview {
padding:10px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 9999;
overflow: auto;
display:none;
}
.editor-preview-active {
display:block;
}
.editor-preview > p {
margin-top: 0;
}
.editor-preview pre{
background:#eee;
margin-bottom:10px;
}

88
sources files/markdownify.js
Unescape Escape View File

@ -1,4 +1,3 @@
var isMac = /Mac/.test(navigator.platform); var isMac = /Mac/.test(navigator.platform);
var shortcuts = { var shortcuts = {
@ -64,7 +63,8 @@ function getState(cm, pos) {
var types = stat.type.split(' '); var types = stat.type.split(' ');
var ret = {}, data, text; var ret = {},
data, text;
for (var i = 0; i < types.length; i++) { for (var i = 0; i < types.length; i++) {
data = types[i]; data = types[i];
if (data === 'strong') { if (data === 'strong') {
@ -236,7 +236,9 @@ function togglePreview(editor) {
* give some time for the transition from editor.css to fire and the view to slide from right to left, * give some time for the transition from editor.css to fire and the view to slide from right to left,
* instead of just appearing. * instead of just appearing.
*/ */
setTimeout(function() {preview.className += ' editor-preview-active'}, 1); setTimeout(function() {
preview.className += ' editor-preview-active'
}, 1);
toolbar.className += ' active'; toolbar.className += ' active';
} }
var text = cm.getValue(); var text = cm.getValue();
@ -251,7 +253,10 @@ function _replaceSelection(cm, active, start, end) {
text = cm.getLine(startPoint.line); text = cm.getLine(startPoint.line);
start = text.slice(0, startPoint.ch); start = text.slice(0, startPoint.ch);
end = text.slice(startPoint.ch); end = text.slice(startPoint.ch);
cm.replaceRange(start + end, {line: startPoint.line, ch: 0}); cm.replaceRange(start + end, {
line: startPoint.line,
ch: 0
});
} else { } else {
text = cm.getSelection(); text = cm.getSelection();
cm.replaceSelection(start + text + end); cm.replaceSelection(start + text + end);
@ -286,13 +291,19 @@ function _toggleLine(cm, name) {
} else { } else {
text = map[name] + text; text = map[name] + text;
} }
cm.replaceRange(text, {line: i, ch: 0}, {line: i, ch: 99999999999999}); cm.replaceRange(text, {
line: i,
ch: 0
}, {
line: i,
ch: 99999999999999
});
})(i); })(i);
} }
cm.focus(); cm.focus();
} }
function _toggleBlock(editor, type, start_chars, end_chars){ function _toggleBlock(editor, type, start_chars, end_chars) {
end_chars = (typeof end_chars === 'undefined') ? start_chars : end_chars; end_chars = (typeof end_chars === 'undefined') ? start_chars : end_chars;
var cm = editor.codemirror; var cm = editor.codemirror;
var stat = getState(cm); var stat = getState(cm);
@ -308,25 +319,29 @@ function _toggleBlock(editor, type, start_chars, end_chars){
text = cm.getLine(startPoint.line); text = cm.getLine(startPoint.line);
start = text.slice(0, startPoint.ch); start = text.slice(0, startPoint.ch);
end = text.slice(startPoint.ch); end = text.slice(startPoint.ch);
if(type == "bold"){ if (type == "bold") {
start = start.replace(/(\*\*|__)(?![\s\S]*(\*\*|__))/, ""); start = start.replace(/(\*\*|__)(?![\s\S]*(\*\*|__))/, "");
end = end.replace(/(\*\*|__)/, ""); end = end.replace(/(\*\*|__)/, "");
} } else if (type == "italic") {
else if(type == "italic"){
start = start.replace(/(\*|_)(?![\s\S]*(\*|_))/, ""); start = start.replace(/(\*|_)(?![\s\S]*(\*|_))/, "");
end = end.replace(/(\*|_)/, ""); end = end.replace(/(\*|_)/, "");
} }
cm.replaceRange(start + end, {line: startPoint.line, ch: 0}, {line: startPoint.line, ch: 99999999999999}); cm.replaceRange(start + end, {
line: startPoint.line,
ch: 0
}, {
line: startPoint.line,
ch: 99999999999999
});
startPoint.ch -= 2; startPoint.ch -= 2;
endPoint.ch -= 2; endPoint.ch -= 2;
} else { } else {
text = cm.getSelection(); text = cm.getSelection();
if(type == "bold"){ if (type == "bold") {
text = text.split("**").join(""); text = text.split("**").join("");
text = text.split("__").join(""); text = text.split("__").join("");
} } else if (type == "italic") {
else if(type == "italic"){
text = text.split("*").join(""); text = text.split("*").join("");
text = text.split("_").join(""); text = text.split("_").join("");
} }
@ -346,7 +361,7 @@ function wordCount(data) {
var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g; var pattern = /[a-zA-Z0-9_\u0392-\u03c9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
var m = data.match(pattern); var m = data.match(pattern);
var count = 0; var count = 0;
if( m === null ) return count; if (m === null) return count;
for (var i = 0; i < m.length; i++) { for (var i = 0; i < m.length; i++) {
if (m[i].charCodeAt(0) >= 0x4E00) { if (m[i].charCodeAt(0) >= 0x4E00) {
count += m[i].length; count += m[i].length;
@ -358,21 +373,48 @@ function wordCount(data) {
} }
var toolbar = [ var toolbar = [{
{name: 'bold', action: toggleBold, className: "fa fa-bold"}, name: 'bold',
{name: 'italic', action: toggleItalic, className: "fa fa-italic"}, action: toggleBold,
className: "fa fa-bold"
}, {
name: 'italic',
action: toggleItalic,
className: "fa fa-italic"
},
'|', '|',
{name: 'quote', action: toggleBlockquote, className: "fa fa-quote-left"}, {
{name: 'unordered-list', action: toggleUnOrderedList, className: "fa fa-list-ul"}, name: 'quote',
{name: 'ordered-list', action: toggleOrderedList, className: "fa fa-list-ol"}, action: toggleBlockquote,
className: "fa fa-quote-left"
}, {
name: 'unordered-list',
action: toggleUnOrderedList,
className: "fa fa-list-ul"
}, {
name: 'ordered-list',
action: toggleOrderedList,
className: "fa fa-list-ol"
},
'|', '|',
{name: 'link', action: drawLink, className: "fa fa-link"}, {
{name: 'image', action: drawImage, className: "fa fa-picture-o"}, name: 'link',
action: drawLink,
className: "fa fa-link"
}, {
name: 'image',
action: drawImage,
className: "fa fa-picture-o"
},
'|', '|',
{name: 'preview', action: togglePreview, className: "fa fa-eye"}, {
name: 'preview',
action: togglePreview,
className: "fa fa-eye"
},
]; ];
/** /**

142
sources files/markdownify-theme.css → sources files/theme.css
Unescape Escape View File

@ -227,3 +227,145 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
background:#eee; background:#eee;
border-radius:2px; border-radius:2px;
} }
.CodeMirror {
height:auto;
min-height: 300px;
border:1px solid #ddd;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
padding:10px;
}
:-webkit-full-screen {
background: #f9f9f5;
padding: 0.5em 1em;
width: 100%;
height: 100%;
}
:-moz-full-screen {
padding: 0.5em 1em;
background: #f9f9f5;
width: 100%;
height: 100%;
}
.editor-wrapper {
font: 16px/1.62 "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
color: #2c3e50;
}
/* this is the title */
.editor-wrapper input.title {
font: 18px "Helvetica Neue", "Xin Gothic", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
background: transparent;
padding: 4px;
width: 100%;
border: none;
outline: none;
opacity: 0.6;
}
.editor-toolbar {
position: relative;
opacity: 0.6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
padding:0 10px;
border-top:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.editor-toolbar:before, .editor-toolbar:after {
display: block;
content: ' ';
height: 1px;
}
.editor-toolbar:before {
margin-bottom: 8px;
}
.editor-toolbar:after {
margin-top: 8px;
}
.editor-wrapper input.title:hover, .editor-wrapper input.title:focus, .editor-toolbar:hover {
opacity: 0.8;
}
.editor-toolbar a {
display: inline-block;
text-align: center;
text-decoration: none !important;
color: #2c3e50 !important;
width:30px;
height:30px;
margin:0;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
}
.editor-toolbar a:hover, .editor-toolbar a.active {
background: #fcfcfc;
border-color: #95a5a6;
}
.editor-toolbar a:before {
line-height:30px;
}
.editor-toolbar i.separator {
display: inline-block;
width: 0;
border-left: 1px solid #d9d9d9;
border-right: 1px solid white;
color: transparent;
text-indent: -10px;
margin: 0 6px;
}
.editor-toolbar a.icon-fullscreen {
position: absolute;
right:10px;
}
.editor-statusbar {
padding: 8px 10px;
font-size: 12px;
color: #959694;
text-align: right;
}
.editor-statusbar span {
display: inline-block;
min-width: 4em;
margin-left: 1em;
}
.editor-statusbar .lines:before {
content: 'lines: ';
}
.editor-statusbar .words:before {
content: 'words: ';
}
.editor-preview {
padding:10px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 9999;
overflow: auto;
display:none;
}
.editor-preview-active {
display:block;
}
.editor-preview > p {
margin-top: 0;
}
.editor-preview pre{
background:#eee;
margin-bottom:10px;
}
.editor-preview table td, .editor-preview table th {
border: solid 1px #bbb;
padding: 5px;
}
Write Preview
Loading…
Cancel
Save