Added a "disabled" configuration option along with a complementary setter method

SimpleMDE can now be disabled through initial configuration, or
disabled / re-enabled using a method dynamically. README documentation
has been updated.

In addition to this, there was a typo in the SimpleMDE JavaScript file,
where "Tootlip" was used (consistently). This was fixed as well.

A demo of the functionality can be found at
http://sweltering-verse.surge.sh
This commit is contained in:
Lucas Chen 2017-07-11 14:21:12 +10:00
parent 6abda7ab68
commit 8b6dec9c46
8 changed files with 19480 additions and 17825 deletions

View File

@ -77,6 +77,7 @@ simplemde.value("This text will appear in the editor");
- **bold** Can be set to `**` or `__`. Defaults to `**`.
- **code** Can be set to ```` ``` ```` or `~~~`. Defaults to ```` ``` ````.
- **italic** Can be set to `*` or `_`. Defaults to `*`.
- **disabled**: If set to `true`, disables editing and general use of SimpleMDE. Defaults to `false`.
- **element**: The DOM element for the textarea to use. Defaults to the first textarea on the page.
- **forceSync**: If set to `true`, force text changes made in SimpleMDE to be immediately stored in original textarea. Defaults to `false`.
- **hideIcons**: An array of icon names to hide. Can be used to hide specific icons shown by default without completely customizing the toolbar.
@ -121,6 +122,7 @@ var simplemde = new SimpleMDE({
bold: "__",
italic: "_"
},
disabled: false,
element: document.getElementById("MyID"),
forceSync: true,
hideIcons: ["guide", "heading"],
@ -178,6 +180,8 @@ var simplemde = new SimpleMDE({
});
```
**Note:** if you wish to dynamically disable / enable the SimpleMDE, make sure you use the `setDisabled` method (see below under "Useful methods"). You can access the current state of SimpleMDE via `simplemde.disabled`, however DO NOT change this property - treat it as a constant, or otherwise bad things will happen.
#### Toolbar icons
Below are the built-in toolbar icons (only some of which are enabled by default), which can be reorganized however you like. "Name" is the name of the icon, referenced in the JS. "Action" is either a function or a URL to open. "Class" is the class given to the icon. "Tooltip" is the small tooltip that appears via the `title=""` attribute. Note that shortcut hints are added automatically and reflect the specified action if it has a keybind assigned to it (i.e. with the value of `action` set to `bold` and that of `tooltip` set to `Bold`, the final text the user will see would be "Bold (Ctrl-B)").
@ -323,6 +327,9 @@ simplemde.isPreviewActive(); // returns boolean
simplemde.isSideBySideActive(); // returns boolean
simplemde.isFullscreenActive(); // returns boolean
simplemde.clearAutosavedValue(); // no returned value
simplemde.setDisabled(true); // disables simpleMDE
simplemde.setDisabled(false); // enables simpleMDE
simplemde.setDisabled(!simplemde.disabled); // toggles simpleMDE
```
## How it works

View File

@ -94,8 +94,14 @@
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-rulers {
position: absolute;
left: 0; right: 0; top: -50px; bottom: -20px;
overflow: hidden;
}
.CodeMirror-ruler {
border-left: 1px solid #ccc;
top: 0; bottom: 0;
position: absolute;
}
@ -119,7 +125,7 @@
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
@ -206,9 +212,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
display: inline-block;
vertical-align: top;
margin-bottom: -30px;
/* Hack to make IE7 behave */
*zoom:1;
*display:inline;
}
.CodeMirror-gutter-wrapper {
position: absolute;
@ -226,11 +229,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
cursor: default;
z-index: 4;
}
.CodeMirror-gutter-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
.CodeMirror-lines {
cursor: text;
@ -252,8 +252,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
-webkit-font-variant-ligatures: contextual;
font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
@ -275,6 +275,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-widget {}
.CodeMirror-rtl pre { direction: rtl; }
.CodeMirror-code {
outline: none;
}
@ -297,7 +299,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
visibility: hidden;
}
.CodeMirror-cursor { position: absolute; }
.CodeMirror-cursor {
position: absolute;
pointer-events: none;
}
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors {
@ -324,9 +329,6 @@ div.CodeMirror-dragcursors {
background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }
/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@ -354,6 +356,19 @@ span.CodeMirror-selectedtext { background: none; }
z-index: 1;
}
.CodeMirror.SimpleMDE-disabled {
opacity: 0.5;
}
.CodeMirror.SimpleMDE-disabled,
.CodeMirror.SimpleMDE-disabled * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: not-allowed;
}
.CodeMirror-scroll {
min-height: 300px
}
@ -473,12 +488,24 @@ span.CodeMirror-selectedtext { background: none; }
cursor: pointer;
}
.editor-toolbar.SimpleMDE-disabled a {
opacity: 0.5;
cursor: not-allowed;
outline: none;
}
.editor-toolbar a.active,
.editor-toolbar a:hover {
background: #fcfcfc;
border-color: #95a5a6;
}
.editor-toolbar.SimpleMDE-disabled a.active,
.editor-toolbar.SimpleMDE-disabled a:hover {
background: transparent;
border-color: transparent;
}
.editor-toolbar a:before {
line-height: 30px
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

10
dist/simplemde.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -9,6 +9,19 @@
z-index: 1;
}
.CodeMirror.SimpleMDE-disabled {
opacity: 0.5;
}
.CodeMirror.SimpleMDE-disabled,
.CodeMirror.SimpleMDE-disabled * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: not-allowed;
}
.CodeMirror-scroll {
min-height: 300px
}
@ -128,12 +141,24 @@
cursor: pointer;
}
.editor-toolbar.SimpleMDE-disabled a {
opacity: 0.5;
cursor: not-allowed;
outline: none;
}
.editor-toolbar a.active,
.editor-toolbar a:hover {
background: #fcfcfc;
border-color: #95a5a6;
}
.editor-toolbar.SimpleMDE-disabled a.active,
.editor-toolbar.SimpleMDE-disabled a:hover {
background: transparent;
border-color: transparent;
}
.editor-toolbar a:before {
line-height: 30px
}

View File

@ -72,7 +72,7 @@ var getBindingName = function(f) {
var isMobile = function() {
var check = false;
(function(a) {
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
@ -100,7 +100,7 @@ function createIcon(options, enableTooltips, shortcuts) {
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
if(options.title && enableTooltips) {
el.title = createTootlip(options.title, options.action, shortcuts);
el.title = createTooltip(options.title, options.action, shortcuts);
if(isMac) {
el.title = el.title.replace("Ctrl", "⌘");
@ -120,7 +120,7 @@ function createSep() {
return el;
}
function createTootlip(title, action, shortcuts) {
function createTooltip(title, action, shortcuts) {
var actionName;
var tooltip = title;
@ -171,7 +171,7 @@ function getState(cm, pos) {
ret.link = true;
} else if(data === "tag") {
ret.image = true;
} else if(data.match(/^header(\-[1-6])?$/)) {
} else if(data.match(/^header(-[1-6])?$/)) {
ret[data.replace("header", "heading")] = true;
}
}
@ -900,8 +900,8 @@ function _toggleLine(cm, name) {
var startPoint = cm.getCursor("start");
var endPoint = cm.getCursor("end");
var repl = {
"quote": /^(\s*)\>\s+/,
"unordered-list": /^(\s*)(\*|\-|\+)\s+/,
"quote": /^(\s*)>\s+/,
"unordered-list": /^(\s*)(\*|-|\+)\s+/,
"ordered-list": /^(\s*)\d+\.\s+/
};
var map = {
@ -1008,7 +1008,7 @@ function _cleanBlock(cm) {
for(var line = startPoint.line; line <= endPoint.line; line++) {
text = cm.getLine(line);
text = text.replace(/^[ ]*([# ]+|\*|\-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
text = text.replace(/^[ ]*([# ]+|\*|-|[> ]+|[0-9]+(.|\)))[ ]*/, "");
cm.replaceRange(text, {
line: line,
@ -1479,6 +1479,7 @@ SimpleMDE.prototype.render = function(el) {
mode.gitHubSpice = false;
}
this.disabled = (this.options.disabled) ? this.options.disabled : false;
this.codemirror = CodeMirror.fromTextArea(el, {
mode: mode,
backdrop: backdrop,
@ -1492,7 +1493,29 @@ SimpleMDE.prototype.render = function(el) {
lineWrapping: (options.lineWrapping === false) ? false : true,
allowDropFileTypes: ["text/plain"],
placeholder: options.placeholder || el.getAttribute("placeholder") || "",
styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : true
styleSelectedText: (options.styleSelectedText != undefined) ? options.styleSelectedText : true,
readOnly: (this.disabled) ? "nocursor" : false
});
if(this.disabled) {
var wrapperElement = this.codemirror.getWrapperElement();
wrapperElement.className += " SimpleMDE-disabled";
}
var _this = this;
this.codemirror.on("beforeSelectionChange", function(CMInstance, obj) {
if(_this.disabled) {
obj.update([{
anchor: {
ch: 0,
line: 0
},
head: {
ch: 0,
line: 0
}
}]);
}
});
if(options.forceSync === true) {
@ -1665,6 +1688,9 @@ SimpleMDE.prototype.createToolbar = function(items) {
var bar = document.createElement("div");
bar.className = "editor-toolbar";
if(this.disabled)
bar.className += " SimpleMDE-disabled";
var self = this;
var toolbarData = {};
@ -1712,6 +1738,7 @@ SimpleMDE.prototype.createToolbar = function(items) {
if(typeof item.action === "function") {
el.onclick = function(e) {
e.preventDefault();
if(!self.disabled)
item.action(self);
};
} else if(typeof item.action === "string") {
@ -1972,6 +1999,20 @@ SimpleMDE.prototype.toggleFullScreen = function() {
toggleFullScreen(this);
};
SimpleMDE.prototype.setDisabled = function(disable) {
this.disabled = disable;
var wrapperElement = this.codemirror.getWrapperElement();
if(disable) {
this.gui.toolbar.className += " SimpleMDE-disabled";
this.codemirror.setOption("readOnly", "nocursor");
wrapperElement.className = "CodeMirror cm-s-paper CodeMirror-wrap SimpleMDE-disabled";
} else {
this.codemirror.setOption("readOnly", false);
this.gui.toolbar.className = this.gui.toolbar.className.replace(/ SimpleMDE-disabled/, "");
wrapperElement.className = wrapperElement.className.replace(/ SimpleMDE-disabled/, "");
}
};
SimpleMDE.prototype.isPreviewActive = function() {
var cm = this.codemirror;
var wrapper = cm.getWrapperElement();