Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-09-24 16:40:55 -06:00
Code Issues Releases Wiki Activity

add char counter + max length

Browse Source
This commit is contained in:
Théo Attali 2019-08-13 16:33:46 +02:00
parent 9796aaafef
commit acc01d1e4d
4 changed files with 290 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/easymde.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
dist/easymde.min.js vendored
View File

File diff suppressed because one or more lines are too long

60
src/css/easymde.css
View File

@ -32,7 +32,7 @@
}
.CodeMirror-placeholder {
opacity: .5;
opacity: 0.5;
}
.CodeMirror-focused .CodeMirror-selected {
@ -57,16 +57,16 @@
.editor-toolbar:after,
.editor-toolbar:before {
display: block;
content: ' ';
content: " ";
height: 1px;
}
.editor-toolbar:before {
margin-bottom: 8px
margin-bottom: 8px;
}
.editor-toolbar:after {
margin-top: 8px
margin-top: 8px;
}
.editor-toolbar.fullscreen {
@ -91,7 +91,13 @@
width: 20px;
height: 50px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 1)),
color-stop(100%, rgba(255, 255, 255, 0))
);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
@ -107,7 +113,13 @@
width: 20px;
height: 50px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(100%, rgba(255, 255, 255, 1))
);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
@ -160,7 +172,13 @@
width: 20px;
height: 50px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 1)),
color-stop(100%, rgba(255, 255, 255, 0))
);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
@ -176,7 +194,13 @@
width: 20px;
height: 50px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(100%, rgba(255, 255, 255, 1))
);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
@ -271,7 +295,7 @@
}
.editor-toolbar.disabled-for-preview button:not(.no-disable) {
opacity: .6;
opacity: 0.6;
pointer-events: none;
}
@ -295,15 +319,19 @@
}
.editor-statusbar .lines:before {
content: 'lines: '
content: "lines: ";
}
.editor-statusbar .words:before {
content: 'words: '
content: "words: ";
}
.editor-statusbar .characters:before {
content: 'characters: '
content: "characters: ";
}
.editor-statusbar .characters.max-length-exceeded .counter {
color: red;
}
.editor-preview-full {
@ -333,11 +361,11 @@
}
.editor-preview-active-side {
display: block
display: block;
}
.editor-preview-active {
display: block
display: block;
}
.editor-preview {
@ -346,7 +374,7 @@
}
.editor-preview > p {
margin-top: 0
margin-top: 0;
}
.editor-preview pre {
@ -393,7 +421,7 @@
}
.cm-s-easymde .cm-comment {
background: rgba(0, 0, 0, .05);
background: rgba(0, 0, 0, 0.05);
border-radius: 2px;
}

24
src/js/easymde.js
View File

@ -1240,6 +1240,23 @@ function wordCount(data) {
return count;
}
function maxLengthCount(el, value, options) {
el.innerHTML = '';
var counter = document.createElement('span');
counter.classList.add('counter');
counter.innerHTML = String(value.length);
el.append(counter);
if (undefined !== options.maxLength && options.maxLength > 0) {
var maxLength = document.createElement('span');
maxLength.classList.add('max-length');
if (value.length > options.maxLength) {
el.classList.add('max-length-exceeded');
}
maxLength.innerHTML = String(' / ' + options.maxLength);
el.append(maxLength);
}
}
var toolbarBuiltInButtons = {
'bold': {
name: 'bold',
@ -2362,6 +2379,13 @@ EasyMDE.prototype.createStatusbar = function (status) {
var pos = cm.getCursor();
el.innerHTML = pos.line + ':' + pos.ch;
};
} else if (name === 'characters') {
defaultValue = function (el) {
maxLengthCount(el, 0, options);
};
onUpdate = function (el) {
maxLengthCount(el, cm.getValue(), options);
};
} else if (name === 'autosave') {
defaultValue = function (el) {
if (options.autosave != undefined && options.autosave.enabled === true) {