Added a "disabled" configuration option

README.md

@@ -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

debug/simplemde.css

@@ -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
 }