Basic implementation ready

Author: Philipp

index.html

@@ -8,7 +8,8 @@
 
 <div class="margin10 code-snippet" data-test style="width:250px;height:300px;border:1px solid black;"></div>
 
-<div class="margin10 code-snippet" style="width:350px;height:150px;border:1px solid black;"></div>
+<div class="margin10 code-snippet" data-codemirror-config='{"showCursorWhenSelecting": true, "readOnly": true, "value": "Hello world"}'
+     style="width:350px;height:150px;border:1px solid black;"></div>
 
 <div class="margin10 code-snippet" data-no-lines style="width:500px;height:100px;border:1px solid black;"></div>
 
@@ -25,7 +26,7 @@
 <script>
     $(function () {
 
-        $('.code-snippet').codemirrorInit();
+        $('.code-snippet').codemirrorInit({readOnly: "nocursor"});
 
         $('.code-snippet[data-test]').codemirror().setValue('Any string');
 

philsweb.jquery.codemirror.js

@@ -1,47 +1,75 @@
 (function ($) {
-    $.fn.codemirrorInit = function () {
+    $.fn.codemirrorInit = function (options) {
 
         $(this).init.prototype = $.extend({}, $(this).init.prototype, {
 
-            codemirror: function(){
-              var $this = this;
-              return {
-                  setValue: function (value) {
-                      for (var i = 0; i < $this.length; i++) {
-                          $.data($this[i], 'codemirror').setValue(value);
-                      }
-                  },
-                  getValue: function () {
-                      if (this.length > 1) {
-                          throw new Error("Only one DOM element can be selected");
-                      }
-                      return $.data($this[0], 'codemirror').getValue();
-                  },
-                  setOption: function (key, value) {
-                      for (var i = 0; i < $this.length; i++) {
-                          $.data($this[i], 'codemirror').setOption(key, value);
-                      }
-                  },
-                  setOptions: function (optionsObject) {
-                      for (var i = 0; i < this.length; i++) {
-                          var element = $this[i];
-                          $.each(optionsObject, function (key, value) {
-                              $.data(element, 'codemirror').setOption(key, value);
-                          });
-                      }
-                  }
-              }
+            codemirror: function () {
+                var $this = this;
+                return {
+                    setValue: function (value) {
+                        for (var i = 0; i < $this.length; i++) {
+                            $.data($this[i], 'codemirror').setValue(value);
+                        }
+                    },
+                    getValue: function () {
+                        if (this.length > 1) {
+                            throw new Error("Only one DOM element can be selected");
+                        }
+                        return $.data($this[0], 'codemirror').getValue();
+                    },
+                    setOption: function (option, value) {
+                        $.each($this, function (key, element) {
+                            $.data(element, 'codemirror').setOption(option, value);
+                        });
+                    },
+                    setOptions: function (optionsObject) {
+                        $.each($this, function (key, element) {
+                            $.each(optionsObject, function (option, value) {
+                                $.data(element, 'codemirror').setOption(option, value);
+                            });
+                        });
+                    }
+                }
             }
         });
 
+        var defaults = {
+            mode: "text/html",
+            lineNumbers: true,
+            lineWrapping: true
+        };
+
+        function getLocalConfigs(element) {
+            var configJson = $(element).attr('data-codemirror-config');
+
+            if (configJson === undefined) {
+                return {};
+            }
+
+            var isJson = true;
+            try {
+                var json = $.parseJSON(configJson);
+            }
+            catch (error) {
+                isJson = false;
+            }
+
+            if (isJson) {
+                return $.parseJSON(configJson);
+            }
+
+            return {};
+
+        }
+
         return this.each(function () {
 
-            $.data(this, 'codemirror', CodeMirror(this, {
-                //value: '<div> Hello world! </div>',
-                mode: "text/html",
-                lineNumbers: true,
-                lineWrapping: true
-            }));
+            var basicConfigs = $.extend({}, defaults, options);
+            var localConfigs = getLocalConfigs(this);
+            var configs = $.extend({}, basicConfigs, localConfigs);
+
+            $.data(this, 'codemirror', CodeMirror(this, configs));
+
         });
     };