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
parent
3096bbe291
commit
8eed8634ee
28
README.md
28
README.md
@ -25,18 +25,18 @@ The editor is entirely customizable, from theming to toolbar buttons and javascr
|
||||
|
||||
- [Install EasyMDE](#install-easymde)
|
||||
- [How to use](#how-to-use)
|
||||
- [Loading the editor](#loading-the-editor)
|
||||
- [Editor functions](#editor-functions)
|
||||
- [Loading the editor](#loading-the-editor)
|
||||
- [Editor functions](#editor-functions)
|
||||
- [Configuration](#configuration)
|
||||
- [Options list](#options-list)
|
||||
- [Options example](#options-example)
|
||||
- [Toolbar icons](#toolbar-icons)
|
||||
- [Toolbar customization](#toolbar-customization)
|
||||
- [Keyboard shortcuts](#keyboard-shortcuts)
|
||||
- [Options list](#options-list)
|
||||
- [Options example](#options-example)
|
||||
- [Toolbar icons](#toolbar-icons)
|
||||
- [Toolbar customization](#toolbar-customization)
|
||||
- [Keyboard shortcuts](#keyboard-shortcuts)
|
||||
- [Advanced use](#advanced-use)
|
||||
- [Event handling](#event-handling)
|
||||
- [Removing EasyMDE from text area](#removing-easymde-from-text-area)
|
||||
- [Useful methods](#useful-methods)
|
||||
- [Event handling](#event-handling)
|
||||
- [Removing EasyMDE from text area](#removing-easymde-from-text-area)
|
||||
- [Useful methods](#useful-methods)
|
||||
- [How it works](#how-it-works)
|
||||
- [SimpleMDE fork](#simplemde-fork)
|
||||
- [Hacking EasyMDE](#hacking-easymde)
|
||||
@ -122,6 +122,7 @@ easyMDE.value('New input for **EasyMDE**');
|
||||
- **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).
|
||||
- **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.
|
||||
- **bold**: 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`.
|
||||
- **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.
|
||||
- **statusTexts**: Customize the text used to status bar.
|
||||
- **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`.
|
||||
- **tabSize**: If set, customize the tab size. Defaults to `2`.
|
||||
@ -206,6 +208,7 @@ var editor = new EasyMDE({
|
||||
uniqueId: "MyUniqueID",
|
||||
delay: 1000,
|
||||
submit_delay: 5000,
|
||||
timeFormat: 24,
|
||||
},
|
||||
blockStyles: {
|
||||
bold: "__",
|
||||
@ -274,6 +277,11 @@ var editor = new EasyMDE({
|
||||
el.innerHTML = ++this.keystrokes + " Keystrokes";
|
||||
},
|
||||
}], // Another optional usage, with a custom status bar item that counts keystrokes
|
||||
statusTexts: {
|
||||
lines: "lines",
|
||||
words: "words",
|
||||
autosave: "Autosaved: ",
|
||||
},
|
||||
styleSelectedText: false,
|
||||
syncSideBySidePreviewScroll: false,
|
||||
tabSize: 4,
|
||||
|
||||
@ -202,11 +202,11 @@
|
||||
}
|
||||
|
||||
.editor-statusbar .lines:before {
|
||||
content: 'lines: '
|
||||
content: attr(data-status-bar-before) ': ';
|
||||
}
|
||||
|
||||
.editor-statusbar .words:before {
|
||||
content: 'words: '
|
||||
content: attr(data-status-bar-before) ': ';
|
||||
}
|
||||
|
||||
.editor-statusbar .characters:before {
|
||||
|
||||
@ -1479,6 +1479,12 @@ var promptTexts = {
|
||||
image: 'URL of the image:',
|
||||
};
|
||||
|
||||
var statusTexts = {
|
||||
lines: 'lines',
|
||||
words: 'words',
|
||||
autosave: 'Autosaved: '
|
||||
};
|
||||
|
||||
var blockStyles = {
|
||||
'bold': '**',
|
||||
'code': '```',
|
||||
@ -1614,6 +1620,9 @@ function EasyMDE(options) {
|
||||
// Merging the promptTexts, with the given options
|
||||
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
|
||||
options.blockStyles = extend({}, blockStyles, options.blockStyles || {});
|
||||
@ -2004,16 +2013,27 @@ EasyMDE.prototype.autosave = function () {
|
||||
var m = d.getMinutes();
|
||||
var dd = 'am';
|
||||
var h = hh;
|
||||
if (h >= 12) {
|
||||
h = hh - 12;
|
||||
dd = 'pm';
|
||||
}
|
||||
if (h == 0) {
|
||||
h = 12;
|
||||
}
|
||||
var html = '';
|
||||
var save = this.options.statusTexts.autosave;
|
||||
|
||||
m = m < 10 ? '0' + m : m;
|
||||
|
||||
el.innerHTML = 'Autosaved: ' + h + ':' + m + ' ' + dd;
|
||||
if (this.options.autosave.timeFormat == undefined || this.options.autosave.timeFormat == 12) {
|
||||
if (h >= 12) {
|
||||
h = hh - 12;
|
||||
dd = 'pm';
|
||||
}
|
||||
if (h == 0) {
|
||||
h = 12;
|
||||
}
|
||||
|
||||
html = save + h + ':' + m + ' ' + dd;
|
||||
}
|
||||
if (this.options.autosave.timeFormat == 24) {
|
||||
html = save + h + ':' + m;
|
||||
}
|
||||
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
this.autosaveTimeoutId = setTimeout(function () {
|
||||
@ -2358,18 +2378,20 @@ EasyMDE.prototype.createStatusbar = function (status) {
|
||||
|
||||
// Set up the built-in items
|
||||
var items = [];
|
||||
var i, onUpdate, defaultValue;
|
||||
var i, onUpdate, defaultValue, dataSet;
|
||||
|
||||
for (i = 0; i < status.length; i++) {
|
||||
// Reset some values
|
||||
onUpdate = undefined;
|
||||
defaultValue = undefined;
|
||||
dataSet = undefined;
|
||||
|
||||
|
||||
// Handle if custom or not
|
||||
if (typeof status[i] === 'object') {
|
||||
items.push({
|
||||
className: status[i].className,
|
||||
dataSet: status[i].dataSet,
|
||||
defaultValue: status[i].defaultValue,
|
||||
onUpdate: status[i].onUpdate,
|
||||
});
|
||||
@ -2377,6 +2399,8 @@ EasyMDE.prototype.createStatusbar = function (status) {
|
||||
var name = status[i];
|
||||
|
||||
if (name === 'words') {
|
||||
dataSet = options.statusTexts[name];
|
||||
|
||||
defaultValue = function (el) {
|
||||
el.innerHTML = wordCount(cm.getValue());
|
||||
};
|
||||
@ -2384,6 +2408,8 @@ EasyMDE.prototype.createStatusbar = function (status) {
|
||||
el.innerHTML = wordCount(cm.getValue());
|
||||
};
|
||||
} else if (name === 'lines') {
|
||||
dataSet = options.statusTexts[name];
|
||||
|
||||
defaultValue = function (el) {
|
||||
el.innerHTML = cm.lineCount();
|
||||
};
|
||||
@ -2412,6 +2438,7 @@ EasyMDE.prototype.createStatusbar = function (status) {
|
||||
|
||||
items.push({
|
||||
className: name,
|
||||
dataSet: dataSet,
|
||||
defaultValue: defaultValue,
|
||||
onUpdate: onUpdate,
|
||||
});
|
||||
@ -2434,6 +2461,10 @@ EasyMDE.prototype.createStatusbar = function (status) {
|
||||
var el = document.createElement('span');
|
||||
el.className = item.className;
|
||||
|
||||
if (item.dataSet != undefined) {
|
||||
el.dataset.statusBarBefore = item.dataSet;
|
||||
}
|
||||
|
||||
|
||||
// Ensure the defaultValue is a function
|
||||
if (typeof item.defaultValue === 'function') {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user