2
0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-09-24 16:40:55 -06:00

Added status texts

Signed-off-by: Dmitry Mazurov <dimabzz@gmail.com>
This commit is contained in:
Dmitry Mazurov 2020-03-18 17:02:17 +03:00
parent 3096bbe291
commit 8eed8634ee
3 changed files with 60 additions and 21 deletions

View File

@ -122,6 +122,7 @@ easyMDE.value('New input for **EasyMDE**');
- **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s). - **delay**: Delay between saves, in milliseconds. Defaults to `10000` (10s).
- **submit_delay**: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to `autosave.delay` or `10000` (10s). - **submit_delay**: Delay before assuming that submit of the form failed and saving the text, in milliseconds. Defaults to `autosave.delay` or `10000` (10s).
- **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website. - **uniqueId**: You must set a unique string identifier so that EasyMDE can autosave. Something that separates this from other instances of EasyMDE elsewhere on your website.
- **timeFormat**: Time format 12/24. Defaults to 12.
- **blockStyles**: Customize how certain buttons that style blocks of text behave. - **blockStyles**: Customize how certain buttons that style blocks of text behave.
- **bold**: Can be set to `**` or `__`. Defaults to `**`. - **bold**: Can be set to `**` or `__`. Defaults to `**`.
- **code**: Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````. - **code**: Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````.
@ -186,6 +187,7 @@ easyMDE.value('New input for **EasyMDE**');
- **nativeSpellcheck**: If set to `false`, disable native spell checker. Defaults to `true`. - **nativeSpellcheck**: If set to `false`, disable native spell checker. Defaults to `true`.
- **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items. - **status**: If set to `false`, hide the status bar. Defaults to the array of built-in status bar items.
- Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items. - Optionally, you can set an array of status bar items to include, and in what order. You can even define your own custom status bar items.
- **statusTexts**: Customize the text used to status bar.
- **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`. - **styleSelectedText**: If set to `false`, remove the `CodeMirror-selectedtext` class from selected lines. Defaults to `true`.
- **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`. - **syncSideBySidePreviewScroll**: If set to `false`, disable syncing scroll in side by side mode. Defaults to `true`.
- **tabSize**: If set, customize the tab size. Defaults to `2`. - **tabSize**: If set, customize the tab size. Defaults to `2`.
@ -206,6 +208,7 @@ var editor = new EasyMDE({
uniqueId: "MyUniqueID", uniqueId: "MyUniqueID",
delay: 1000, delay: 1000,
submit_delay: 5000, submit_delay: 5000,
timeFormat: 24,
}, },
blockStyles: { blockStyles: {
bold: "__", bold: "__",
@ -274,6 +277,11 @@ var editor = new EasyMDE({
el.innerHTML = ++this.keystrokes + " Keystrokes"; el.innerHTML = ++this.keystrokes + " Keystrokes";
}, },
}], // Another optional usage, with a custom status bar item that counts keystrokes }], // Another optional usage, with a custom status bar item that counts keystrokes
statusTexts: {
lines: "lines",
words: "words",
autosave: "Autosaved: ",
},
styleSelectedText: false, styleSelectedText: false,
syncSideBySidePreviewScroll: false, syncSideBySidePreviewScroll: false,
tabSize: 4, tabSize: 4,

View File

@ -202,11 +202,11 @@
} }
.editor-statusbar .lines:before { .editor-statusbar .lines:before {
content: 'lines: ' content: attr(data-status-bar-before) ': ';
} }
.editor-statusbar .words:before { .editor-statusbar .words:before {
content: 'words: ' content: attr(data-status-bar-before) ': ';
} }
.editor-statusbar .characters:before { .editor-statusbar .characters:before {

View File

@ -1479,6 +1479,12 @@ var promptTexts = {
image: 'URL of the image:', image: 'URL of the image:',
}; };
var statusTexts = {
lines: 'lines',
words: 'words',
autosave: 'Autosaved: '
};
var blockStyles = { var blockStyles = {
'bold': '**', 'bold': '**',
'code': '```', 'code': '```',
@ -1614,6 +1620,9 @@ function EasyMDE(options) {
// Merging the promptTexts, with the given options // Merging the promptTexts, with the given options
options.promptTexts = extend({}, promptTexts, options.promptTexts || {}); options.promptTexts = extend({}, promptTexts, options.promptTexts || {});
// Merging the statusTexts, with the given options
options.statusTexts = extend({}, statusTexts, options.statusTexts || {});
// Merging the blockStyles, with the given options // Merging the blockStyles, with the given options
options.blockStyles = extend({}, blockStyles, options.blockStyles || {}); options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
@ -2004,6 +2013,12 @@ EasyMDE.prototype.autosave = function () {
var m = d.getMinutes(); var m = d.getMinutes();
var dd = 'am'; var dd = 'am';
var h = hh; var h = hh;
var html = '';
var save = this.options.statusTexts.autosave;
m = m < 10 ? '0' + m : m;
if (this.options.autosave.timeFormat == undefined || this.options.autosave.timeFormat == 12) {
if (h >= 12) { if (h >= 12) {
h = hh - 12; h = hh - 12;
dd = 'pm'; dd = 'pm';
@ -2011,9 +2026,14 @@ EasyMDE.prototype.autosave = function () {
if (h == 0) { if (h == 0) {
h = 12; h = 12;
} }
m = m < 10 ? '0' + m : m;
el.innerHTML = 'Autosaved: ' + h + ':' + m + ' ' + dd; html = save + h + ':' + m + ' ' + dd;
}
if (this.options.autosave.timeFormat == 24) {
html = save + h + ':' + m;
}
el.innerHTML = html;
} }
this.autosaveTimeoutId = setTimeout(function () { this.autosaveTimeoutId = setTimeout(function () {
@ -2358,18 +2378,20 @@ EasyMDE.prototype.createStatusbar = function (status) {
// Set up the built-in items // Set up the built-in items
var items = []; var items = [];
var i, onUpdate, defaultValue; var i, onUpdate, defaultValue, dataSet;
for (i = 0; i < status.length; i++) { for (i = 0; i < status.length; i++) {
// Reset some values // Reset some values
onUpdate = undefined; onUpdate = undefined;
defaultValue = undefined; defaultValue = undefined;
dataSet = undefined;
// Handle if custom or not // Handle if custom or not
if (typeof status[i] === 'object') { if (typeof status[i] === 'object') {
items.push({ items.push({
className: status[i].className, className: status[i].className,
dataSet: status[i].dataSet,
defaultValue: status[i].defaultValue, defaultValue: status[i].defaultValue,
onUpdate: status[i].onUpdate, onUpdate: status[i].onUpdate,
}); });
@ -2377,6 +2399,8 @@ EasyMDE.prototype.createStatusbar = function (status) {
var name = status[i]; var name = status[i];
if (name === 'words') { if (name === 'words') {
dataSet = options.statusTexts[name];
defaultValue = function (el) { defaultValue = function (el) {
el.innerHTML = wordCount(cm.getValue()); el.innerHTML = wordCount(cm.getValue());
}; };
@ -2384,6 +2408,8 @@ EasyMDE.prototype.createStatusbar = function (status) {
el.innerHTML = wordCount(cm.getValue()); el.innerHTML = wordCount(cm.getValue());
}; };
} else if (name === 'lines') { } else if (name === 'lines') {
dataSet = options.statusTexts[name];
defaultValue = function (el) { defaultValue = function (el) {
el.innerHTML = cm.lineCount(); el.innerHTML = cm.lineCount();
}; };
@ -2412,6 +2438,7 @@ EasyMDE.prototype.createStatusbar = function (status) {
items.push({ items.push({
className: name, className: name,
dataSet: dataSet,
defaultValue: defaultValue, defaultValue: defaultValue,
onUpdate: onUpdate, onUpdate: onUpdate,
}); });
@ -2434,6 +2461,10 @@ EasyMDE.prototype.createStatusbar = function (status) {
var el = document.createElement('span'); var el = document.createElement('span');
el.className = item.className; el.className = item.className;
if (item.dataSet != undefined) {
el.dataset.statusBarBefore = item.dataSet;
}
// Ensure the defaultValue is a function // Ensure the defaultValue is a function
if (typeof item.defaultValue === 'function') { if (typeof item.defaultValue === 'function') {