#18589: Fixing multiple TextFields with MarkDown flavor

Work Item: 18589

--HG--
branch : 1.x
This commit is contained in:
Sebastien Ros 2012-04-24 14:15:01 -07:00
parent 326c8df745
commit 6db862c951
2 changed files with 47 additions and 36 deletions

View File

@ -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) {
// see if there's an image selected that they intend on editing
var wmd = $('#wmd-input');
var editors = $('.wmd-input');
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);
}
editors.each(function () {
var idPostfix = $(this).attr('id').substr('wmd-input'.length);
var editor = new Markdown.Editor(converter, idPostfix, {
handler: function () { window.open("http://daringfireball.net/projects/markdown/syntax"); }
});
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();
})();

View File

@ -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> {
{"id", "wmd-input"},
new Dictionary<string, object> {
{"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>