diff --git a/README.md b/README.md index ba8a756..3cad1e3 100644 --- a/README.md +++ b/README.md @@ -123,7 +123,6 @@ easyMDE.value('New input for **EasyMDE**'); - **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**: Set DateTimeFormat. More information see [DateTimeFormat instances](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat). Default `locale: en-US, format: hour:minute`. - - **text**: Set text for autosave. - **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 ```` ``` ````. @@ -188,11 +187,13 @@ 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`. - **theme**: Override the theme. Defaults to `easymde`. - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons). +- **toolbarTitles**: Customize the title used to toolbar. - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`. @@ -218,7 +219,6 @@ var editor = new EasyMDE({ minute: '2-digit', }, }, - text: "Autosaved: " }, blockStyles: { bold: "__", @@ -287,10 +287,18 @@ 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, toolbar: false, + toobarTitles: { + "bold": {"title": "Bold"}, + }, toolbarTips: false, }); ``` diff --git a/src/css/easymde.css b/src/css/easymde.css index 1a0881a..9b05249 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -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 { diff --git a/src/js/easymde.js b/src/js/easymde.js index d64a52f..550895f 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1489,6 +1489,12 @@ var promptTexts = { image: 'URL of the image:', }; +var statusTexts = { + lines: 'lines: ', + words: 'words: ', + autosave: 'Autosaved: ', +}; + var timeFormat = { locale: 'en-US', format: { @@ -1564,6 +1570,10 @@ function EasyMDE(options) { document.getElementsByTagName('head')[0].appendChild(link); } + if (options.markdownUrl != undefined) { + toolbarBuiltInButtons.guide.action = options.markdownUrl; + } + // Find the textarea to use if (options.element) { @@ -1633,6 +1643,10 @@ function EasyMDE(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 || {}); @@ -2025,7 +2039,7 @@ EasyMDE.prototype.autosave = function () { if (el != null && el != undefined && el != '') { var d = new Date(); var dd = new Intl.DateTimeFormat([this.options.autosave.timeFormat.locale, 'en-US'], this.options.autosave.timeFormat.format).format(d); - var save = this.options.autosave.text == undefined ? 'Autosaved: ' : this.options.autosave.text; + var save = this.options.statusTexts.autosave; el.innerHTML = save + dd; } @@ -2265,7 +2279,11 @@ EasyMDE.prototype.createToolbar = function (items) { var i; for (i = 0; i < items.length; i++) { if (toolbarBuiltInButtons[items[i]] != undefined) { - items[i] = toolbarBuiltInButtons[items[i]]; + if (this.options.toolbarTitles != undefined && this.options.toolbarTitles[items[i]] != undefined) { + items[i] = extend({}, toolbarBuiltInButtons[items[i]], this.options.toolbarTitles[items[i]]); + } else { + items[i] = toolbarBuiltInButtons[items[i]]; + } } } @@ -2372,25 +2390,31 @@ EasyMDE.prototype.createStatusbar = function (status) { // Set up the built-in items var items = []; - var i, onUpdate, defaultValue; + var i, onUpdate, onCursorActivity, defaultValue, dataSet; for (i = 0; i < status.length; i++) { // Reset some values onUpdate = undefined; + onCursorActivity = 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, + onCursorActivity: status[i].onCursorActivity, }); } else { var name = status[i]; if (name === 'words') { + dataSet = options.statusTexts[name]; + defaultValue = function (el) { el.innerHTML = wordCount(cm.getValue()); }; @@ -2398,6 +2422,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,11 @@ EasyMDE.prototype.createStatusbar = function (status) { var pos = cm.getCursor(); el.innerHTML = pos.line + ':' + pos.ch; }; + onCursorActivity = function (el) { + var pos = cm.getCursor(); + + el.innerHTML = pos.line + ':' + pos.ch; + }; } else if (name === 'autosave') { defaultValue = function (el) { if (options.autosave != undefined && options.autosave.enabled === true) { @@ -2426,8 +2457,10 @@ EasyMDE.prototype.createStatusbar = function (status) { items.push({ className: name, + dataSet: dataSet, defaultValue: defaultValue, onUpdate: onUpdate, + onCursorActivity: onCursorActivity, }); } } @@ -2449,6 +2482,11 @@ EasyMDE.prototype.createStatusbar = function (status) { el.className = item.className; + if (item.dataSet != undefined) { + el.dataset.statusBarBefore = item.dataSet; + } + + // Ensure the defaultValue is a function if (typeof item.defaultValue === 'function') { item.defaultValue(el); @@ -2466,6 +2504,17 @@ EasyMDE.prototype.createStatusbar = function (status) { } + // Ensure the onCursorActivity is a function + if (typeof item.onCursorActivity === 'function') { + // Create a closure around the span of the current action, then execute the onCursorActivity handler + this.codemirror.on('cursorActivity', (function (el, item) { + return function () { + item.onCursorActivity(el); + }; + }(el, item))); + } + + // Append the item to the status bar bar.appendChild(el); }