#18589: Fixing multiple TextFields with MarkDown flavor

Work Item: 18589

--HG--
branch : 1.x

src/Orchard.Web/Modules/Markdown/Scripts/orchard-markdown.js

@@ -1,43 +1,53 @@
 (function () {
     var marker = '<!-- markdown -->';
     var converter = Markdown.getSanitizingConverter();
-    var editor = new Markdown.Editor(converter, "", {
-        handler: function () { window.open("http://daringfireball.net/projects/markdown/syntax"); }
-    });
 
-    editor.hooks.set("insertImageDialog", function (callback) {
+    var editors = $('.wmd-input');
-        // see if there's an image selected that they intend on editing
-        var wmd = $('#wmd-input');
 
-        var editImage, content = wmd.selection ? wmd.selection.createRange().text : null;
+    editors.each(function () {
-        if (content) {
+
-            // replace <img> with <editimg>, so we can easily use jquery to get the 'src' without it
+        var idPostfix = $(this).attr('id').substr('wmd-input'.length);
-            // being resolved by the browser (e.g. prevent '/foo.png' becoming 'http://localhost:12345/orchardlocal/foo.png').
+
-            content = content.replace(/\<IMG/gi, "<editimg");
+        var editor = new Markdown.Editor(converter, idPostfix, {
-            var firstImg = $(content).filter("editimg");
+            handler: function () { window.open("http://daringfireball.net/projects/markdown/syntax"); }
-            if (firstImg.length) {
-                editImage = {
-                    src: firstImg.attr("src"),
-                    "class": firstImg.attr("class"),
-                    style: firstImg.css("cssText"),
-                    alt: firstImg.attr("alt"),
-                    width: firstImg.attr("width"),
-                    height: firstImg.attr("height"),
-                    align: firstImg.attr("align")
-                };
-            }
-        }
-        wmd.trigger("orchard-admin-pickimage-open", {
-            img: editImage,
-            uploadMediaPath: wmd.data("mediapicker-uploadpath"),
-            callback: function (data) {
-                callback(data.img.src);
-            }
         });
-        return true;
+
+        editor.hooks.set("insertImageDialog", function (callback) {
+            // see if there's an image selected that they intend on editing
+            var wmd = $('#wmd-input' + idPostfix);
+
+            var editImage, content = wmd.selection ? wmd.selection.createRange().text : null;
+            if (content) {
+                // replace <img> with <editimg>, so we can easily use jquery to get the 'src' without it
+                // being resolved by the browser (e.g. prevent '/foo.png' becoming 'http://localhost:12345/orchardlocal/foo.png').
+                content = content.replace(/\<IMG/gi, "<editimg");
+                var firstImg = $(content).filter("editimg");
+                if (firstImg.length) {
+                    editImage = {
+                        src: firstImg.attr("src"),
+                        "class": firstImg.attr("class"),
+                        style: firstImg.css("cssText"),
+                        alt: firstImg.attr("alt"),
+                        width: firstImg.attr("width"),
+                        height: firstImg.attr("height"),
+                        align: firstImg.attr("align")
+                    };
+                }
+            }
+            wmd.trigger("orchard-admin-pickimage-open", {
+                img: editImage,
+                uploadMediaPath: wmd.data("mediapicker-uploadpath"),
+                callback: function (data) {
+                    callback(data.img.src);
+                }
+            });
+            return true;
+        });
+
+        editor.run();
     });
 
-    editor.run();
+
 
     $('.grippie').TextAreaResizer();
 })();

src/Orchard.Web/Modules/Markdown/Views/Body-Markdown.Editor.cshtml

@@ -1,13 +1,14 @@
 @{ 
     Script.Require("OrchardMarkdown");
     Style.Require("OrchardMarkdown");
+    string idPostfix = @Html.FieldIdFor(m => m);
 }
 <fieldset>
-<div id="wmd-button-bar" class="wmd-button-bar"></div>
+<div id="wmd-button-bar-@idPostfix" class="wmd-button-bar"></div>
 
 @Html.TextArea("Text", (string)Model.Text, 25, 80,
-	 new Dictionary<string,object> {
+     new Dictionary<string, object> {
-		{"id", "wmd-input"},
+		{"id", "wmd-input" + "-" + idPostfix},
 		{"class", "wmd-input grippie"},
 		{"data-mediapicker-uploadpath", Model.AddMediaPath},
 		{"data-mediapicker-title", T("Insert/Update Media")}
@@ -16,5 +17,5 @@
 
 <fieldset>
     <label>@T("Preview")</label>
-    <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
+    <div id="wmd-preview-@idPostfix" class="wmd-panel wmd-preview"></div>
 </fieldset>