Basic implementation

Author: Philipp

.gitignore

@@ -1,2 +1,2 @@
-.idea/*
-bower_components/*
+.idea
+bower_components

bower.json

@@ -21,6 +21,7 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "^3.3.1"
+    "jquery": "^3.3.1",
+    "codemirror": "^5.35.0"
   }
 }

index.html

@@ -0,0 +1,51 @@
+<script src="bower_components/jquery/dist/jquery.min.js"></script>
+
+<script src="bower_components/codemirror/lib/codemirror.js"></script>
+<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
+<script src="bower_components/codemirror/mode/xml/xml.js"></script>
+
+<script src="philsweb.jquery.codemirror.js"></script>
+
+<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-no-lines style="width:500px;height:100px;border:1px solid black;"></div>
+
+<style>
+    .margin10 {
+        margin: 10px;
+    }
+
+    .CodeMirror {
+        height: inherit;
+    }
+</style>
+
+<script>
+    $(function () {
+
+        $('.code-snippet').codemirror();
+
+        $('.code-snippet[data-test]').setValue('Any string');
+
+        console.log($('.code-snippet[data-test]').getValue());
+
+        var elements = $('.code-snippet');
+
+        var increment = 1;
+
+        elements.each(function (key, element) {
+
+            $.data(element, 'codemirror').setValue('Any' + increment++);
+            $(element).setValue('New' + increment++);
+
+        });
+
+        $('.code-snippet[data-no-lines]').setOption('lineNumbers', false);
+
+        $('.code-snippet[data-no-lines]').setOptions({lineNumbers: true, readOnly: true});
+
+        $.data($('.code-snippet[data-no-lines]')[0], 'codemirror').focus();
+    });
+</script>

philsweb.jquery.codemirror.js

@@ -1,5 +1,44 @@
 (function ($) {
-    $.fn.codemirror = function (options) {
+    $.fn.codemirror = function () {
 
+        $(this).init.prototype = $.extend({}, $(this).init.prototype, {
+
+            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 $this = this[i];
+                    $.each(optionsObject, function (key, value) {
+                        $.data($this, 'codemirror').setOption(key, value);
+                    });
+                }
+            }
+
+        });
+
+        return this.each(function () {
+
+            $.data(this, 'codemirror', CodeMirror(this, {
+                //value: '<div> Hello world! </div>',
+                mode: "text/html",
+                lineNumbers: true,
+                lineWrapping: true
+            }));
+        });
     };
+
 })(jQuery);