diff --git a/README.md b/README.md index 451c3c0d..7dd2aa0b 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 ```` ``` ````. @@ -140,6 +139,7 @@ easyMDE.value('New input for **EasyMDE**'); - table - **lineWrapping**: If set to `false`, disable line wrapping. Defaults to `true`. - **minHeight**: Sets the minimum height for the composition area, before it starts auto-growing. Should be a string containing a valid CSS value like `"500px"`. Defaults to `"300px"`. +- **markdownUrl**: Customize url for guide. - **maxHeight**: Sets fixed height for the composition area. `minHeight` option will be ignored. Should be a string containing a valid CSS value like `"500px"`. Defaults to `undefined`. - **onToggleFullScreen**: A function that gets called when the editor's full screen mode is toggled. The function will be passed a boolean as parameter, `true` when the editor is currently going into full screen mode, or `false`. - **parsingConfig**: Adjust settings for parsing the Markdown during editing (not previewing). @@ -190,11 +190,13 @@ easyMDE.value('New input for **EasyMDE**'); - **sideBySideFullscreen**: If set to `false`, allows side-by-side editing without going into fullscreen. 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`. @@ -220,7 +222,6 @@ var editor = new EasyMDE({ minute: '2-digit', }, }, - text: "Autosaved: " }, blockStyles: { bold: "__", @@ -239,6 +240,7 @@ var editor = new EasyMDE({ }, lineWrapping: false, minHeight: "500px", + markdownUrl: "https://www.markdownguide.org/basic-syntax/", parsingConfig: { allowAtxHeaderWithoutSpace: true, strikethrough: false, @@ -289,11 +291,19 @@ 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, sideBySideFullscreen: 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 c1ec62c7..05dc1ed4 100644 --- a/src/css/easymde.css +++ b/src/css/easymde.css @@ -227,11 +227,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 bfa1a7b8..ae205688 100644 --- a/src/js/easymde.js +++ b/src/js/easymde.js @@ -1561,6 +1561,12 @@ var promptTexts = { image: 'URL of the image:', }; +var statusTexts = { + lines: 'lines: ', + words: 'words: ', + autosave: 'Autosaved: ', +}; + var timeFormat = { locale: 'en-US', format: { @@ -1636,6 +1642,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) { @@ -1705,6 +1715,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 || {}); @@ -1712,8 +1726,16 @@ function EasyMDE(options) { if (options.autosave != undefined) { // Merging the Autosave timeFormat, with the given options options.autosave.timeFormat = extend({}, timeFormat, options.autosave.timeFormat || {}); + + // Merging the Autosave text, with the given options and saving to statusTexts + if (options.autosave.text != undefined) { + options.statusTexts.autosave = options.autosave.text; + } } + // Merging the toolbar title, with the given options + toolbarBuiltInButtons = extend({}, toolbarBuiltInButtons, options.toolbarTitles || {}); + // Merging the shortcuts, with the given options options.shortcuts = extend({}, shortcuts, options.shortcuts || {}); @@ -2118,7 +2140,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; } @@ -2481,19 +2503,21 @@ EasyMDE.prototype.createStatusbar = function (status) { // Set up the built-in items var items = []; - var i, onUpdate, onActivity, defaultValue; + var i, onUpdate, onActivity, defaultValue, dataSet; for (i = 0; i < status.length; i++) { // Reset some values onUpdate = undefined; onActivity = 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, onActivity: status[i].onActivity, @@ -2502,6 +2526,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()); }; @@ -2509,6 +2535,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(); }; @@ -2523,6 +2551,11 @@ EasyMDE.prototype.createStatusbar = function (status) { var pos = cm.getCursor(); el.innerHTML = pos.line + ':' + pos.ch; }; + onActivity = 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) { @@ -2537,6 +2570,7 @@ EasyMDE.prototype.createStatusbar = function (status) { items.push({ className: name, + dataSet: dataSet, defaultValue: defaultValue, onUpdate: onUpdate, onActivity: onActivity, @@ -2561,6 +2595,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); @@ -2586,6 +2625,17 @@ EasyMDE.prototype.createStatusbar = function (status) { } + // Ensure the onActivity is a function + if (typeof item.onActivity === 'function') { + // Create a closure around the span of the current action, then execute the onActivity handler + this.codemirror.on('cursorActivity', (function (el, item) { + return function () { + item.onActivity(el); + }; + }(el, item))); + } + + // Append the item to the status bar bar.appendChild(el); }