Integrating TinyMce with the Media Library

--HG--
branch : 1.x
extra : rebase_source : 64b75e44522bc583bfb521c8cf9850fa5d596068

src/Orchard.Web/Modules/Orchard.ImageEditor/Controllers/AdminController.cs

@@ -40,6 +40,19 @@ namespace Orchard.ImageEditor.Controllers {
             return new ShapeResult(this, shape);
         }
 
+        [Themed(false)]
+        public ActionResult Touch(string src) {
+            var localPath = _storageProvider.GetLocalPath(src);
+
+            if (_storageProvider.GetFile(localPath) == null) {
+                return HttpNotFound();
+            }
+
+            var media = Services.ContentManager.Query<MediaPart, MediaPartRecord>().Where(x => x.Resource == src).Slice(0, 1).FirstOrDefault();
+
+            return Json(media != null);
+        }
+
         [Themed(false)]
         public ActionResult Edit(string src) {
             var localPath = _storageProvider.GetLocalPath(src);

src/Orchard.Web/Modules/Orchard.MediaLibrary/Placement.info

@@ -1,6 +1,16 @@
 <Placement>
   <Place Parts_Media_Edit="Content:6"/>
 
+  <!-- Raw Media -->
+  <Match DisplayType="Raw">
+    <Place Parts_Image="Content"
+           Parts_Video="Content"
+           Parts_Audio="Content"
+           Parts_Document="Content"
+           Parts_OEmbed="Content"
+            />
+  </Match>
+
   <!-- MediaPart -->
   <Match DisplayType="SummaryAdmin">
     <Place Parts_Media_SummaryAdmin="Meta:5"

src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Admin/Index.cshtml

@@ -418,7 +418,7 @@
 
             $("#media-library-main-selection-select > .button-cancel").on('click', function() {
                 if (parent.$.colorbox) {
-                    parent.$.colorbox.selectedData = [];
+                    parent.$.colorbox.selectedData = null;
                     parent.$.colorbox.close();
                 };
             });

src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Media.Raw.cshtml

@@ -0,0 +1 @@
+@Display(Model.Content)

src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js

@@ -1,11 +1,12 @@
 tinyMCE.init({
     theme: "advanced",
+    schema: "html5",
     mode: "specific_textareas",
     editor_selector: "tinymce",
-    plugins: "fullscreen,autoresize,searchreplace,mediapicker,inlinepopups,imageeditor",
+    plugins: "fullscreen,autoresize,searchreplace,mediapicker,inlinepopups,medialibrary",
     theme_advanced_toolbar_location: "top",
     theme_advanced_toolbar_align: "left",
-    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,imageeditor,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen,",
+    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,medialibrary,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen,",
     theme_advanced_buttons2: "",
     theme_advanced_buttons3: "",
     convert_urls: false,

src/Orchard.Web/Modules/TinyMce/Scripts/plugins/imageeditor/editor_plugin.js

@@ -1,2 +0,0 @@
-(function () { tinymce.create("tinymce.plugins.Orchard.ImageEditor", { init: function (n, t) { console.log("init: function (ed, url) {"), n.addCommand("mceImageEditor", function () { var f, t, i, r, u, e, o; (console.log("ed.addCommand('mceImageEditor'"), n.focus(), t = n.selection.getContent(), t && (t = t.replace(/\<IMG/gi, "<editimg"), i = $(t).filter("editimg"), i.length && (f = { src: i.attr("src") })), r = "_editimageimage_" + (new Date).getTime(), data.callbackName = r, $[r] = function () { i.attr("src", f.src) }, u = location.href.toLowerCase().indexOf("/admin/"), u !== -1) && (e = location.href.substr(0, u) + "/Admin/Orchard.ImageEditor?src=" + (data.uploadMediaPath || "") + "&callback=" + r + "&" + (new Date - 0), o = window.open(e, "_blank", "width=685,height=540,status=no,toolbar=no,location=no,menubar=no,resizable=yes")) }), n.addButton("imageeditor", { title: "edit image", cmd: "mceImageEditor", image: t + "/img/picture_edit.png" }) }, createControl: function () { return null }, getInfo: function () { return { longname: "Orchard Image Editor Plugin", author: "The Orchard Team", authorurl: "http://orchardproject.net", infourl: "http://orchardproject.net", version: "1.1" } } }), tinymce.PluginManager.add("imageeditor", tinymce.plugins.Orchard.ImageEditor) })();
-//@ sourceMappingURL=editor_plugin_src.min.js.map

src/Orchard.Web/Modules/TinyMce/Scripts/plugins/imageeditor/editor_plugin_src.js

@@ -1,107 +0,0 @@
-(function () {
-
-    ////////////////////////////////////////////////////////////////////////
-    // NOTE: IF YOU EDIT THIS FILE
-    // You must also update editor_plugin.js with a minified version.
-    ////////////////////////////////////////////////////////////////////////
-    tinymce.create('tinymce.plugins.Orchard.ImageEditor', {
-        /**
-        * Initializes the plugin, this will be executed after the plugin has been created.
-        * This call is done before the editor instance has finished it's initialization so use the onInit event
-        * of the editor instance to intercept that event.
-        *
-        * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
-        * @param {string} url Absolute URL to where the plugin is located.
-        */
-        init: function (ed, url) {
-            console.log("init: function (ed, url) {");
-            // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceMediaPicker');
-            ed.addCommand('mceImageEditor', function () {
-                console.log("ed.addCommand('mceImageEditor'");
-                ed.focus();
-                // see if there's an image selected that they intend on editing
-                var editImage,
-                    content = ed.selection.getContent();
-                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")
-                        };
-
-                        var adminIndex = location.href.toLowerCase().indexOf("/admin/");
-                        if (adminIndex === -1) return;
-                        var url = location.href.substr(0, adminIndex)
-                            + "/Admin/Orchard.ImageEditor/Edit?src=" + encodeURIComponent(editImage.src.split("?")[0]);
-
-                        $.colorbox({
-                            href: url,
-                            iframe: true,
-                            reposition: true,
-                            width: "100%",
-                            height: "100%",
-                            onLoad: function () {
-                                // hide the scrollbars from the main window
-                                $('html, body').css('overflow', 'hidden');
-                                $('#cboxClose').remove();
-                            },
-                            onClosed: function () {
-                                $('html, body').css('overflow', '');
-                                // reassign the src to force a refresh
-                                tinyMCE.execCommand('mceReplaceContent', false, '<img src="' + editImage.src + '?rand=' + Math.random() + '" >');
-                            }
-                        });
-                    }
-                }
-            });
-
-            // Register media button
-            ed.addButton('imageeditor', {
-                title: 'Edit Image', //ed.getParam("mediapicker_title"),
-                cmd: 'mceImageEditor',
-                image: url + '/img/picture_edit.png'
-            });
-            
-            // disable button if an image is not selected
-            ed.onNodeChange.add(function (ed2, cm, node) {
-                cm.setDisabled('imageeditor', !(node.tagName == 'IMG'));
-            });
-        },
-
-        /**
-        * Creates control instances based in the incomming name. This method is normally not
-        * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
-        * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
-        * method can be used to create those.
-        *
-        * @param {String} n Name of the control to create.
-        * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
-        * @return {tinymce.ui.Control} New control instance or null if no control was created.
-        */
-        createControl: function (n, cm) {
-            return null;
-        },
-
-        /**
-        * Returns information about the plugin as a name/value array.
-        * The current keys are longname, author, authorurl, infourl and version.
-        *
-        * @return {Object} Name/value array containing information about the plugin.
-        */
-        getInfo: function () {
-            return {
-                longname: 'Orchard Image Editor Plugin',
-                author: 'The Orchard Team',
-                authorurl: 'http://orchardproject.net',
-                infourl: 'http://orchardproject.net',
-                version: '1.1'
-            };
-        }
-    });
-
-    // Register plugin
-    tinymce.PluginManager.add('imageeditor', tinymce.plugins.Orchard.ImageEditor);
-})();

src/Orchard.Web/Modules/TinyMce/Scripts/plugins/imageeditor/editor_plugin_src.min.js

@@ -1,2 +0,0 @@
-(function(){tinymce.create("tinymce.plugins.Orchard.ImageEditor",{init:function(n,t){console.log("init: function (ed, url) {"),n.addCommand("mceImageEditor",function(){var i,t,r,u,f;if(console.log("ed.addCommand('mceImageEditor'"),n.focus(),t=n.selection.getContent(),t&&(t=t.replace(/\<IMG/gi,"<editimg"),r=$(t).filter("editimg"),r.length)){if(i={src:r.attr("src")},u=location.href.toLowerCase().indexOf("/admin/"),u===-1)return;f=location.href.substr(0,u)+"/Admin/Orchard.ImageEditor/Edit?src="+encodeURIComponent(i.src.split("?")[0]),$.colorbox({href:f,iframe:!0,reposition:!0,width:"100%",height:"100%",onLoad:function(){$("html, body").css("overflow","hidden"),$("#cboxClose").remove()},onClosed:function(){$("html, body").css("overflow",""),tinyMCE.execCommand("mceReplaceContent",!1,'<img src="'+i.src+"?rand="+Math.random()+'" >')}})}}),n.addButton("imageeditor",{title:"Edit Image",cmd:"mceImageEditor",image:t+"/img/picture_edit.png"}),n.onNodeChange.add(function(n,t,i){t.setDisabled("imageeditor",!(i.tagName=="IMG"))})},createControl:function(){return null},getInfo:function(){return{longname:"Orchard Image Editor Plugin",author:"The Orchard Team",authorurl:"http://orchardproject.net",infourl:"http://orchardproject.net",version:"1.1"}}}),tinymce.PluginManager.add("imageeditor",tinymce.plugins.Orchard.ImageEditor)})();
-//@ sourceMappingURL=editor_plugin_src.min.js.map

src/Orchard.Web/Modules/TinyMce/Scripts/plugins/imageeditor/editor_plugin_src.min.js.map

@@ -1,8 +0,0 @@
-{
-"version":3,
-"file":"editor_plugin_src.min.js",
-"lineCount":1,
-"mappings":"CAAC,QAAS,CAAA,CAAG,CAMTA,OAAOC,OAAO,CAAC,qCAAqC,CAAE,CASlD,IAAI,CAAEC,QAAS,CAACC,CAAE,CAAEC,CAAL,CAAU,CACrBC,OAAOC,IAAI,CAAC,4BAAD,CAA8B,CAEzCH,CAAEI,WAAW,CAAC,gBAAgB,CAAE,QAAS,CAAA,CAAG,CAIxC,IAAIC,EACAC,EAKIC,EAMIC,EAEAP,CAb2B,CACvC,GALAC,OAAOC,IAAI,CAAC,gCAAD,CAAkC,CAC7CH,CAAES,MAAM,CAAA,CAAE,CAGNH,CAAQ,CAAEN,CAAEU,UAAUC,WAAW,CAAA,C,CACjCL,C,GAGAA,CAAQ,CAAEA,CAAOM,QAAQ,CAAC,SAAS,CAAE,UAAZ,CAAuB,CAC5CL,CAAS,CAAEM,CAAC,CAACP,CAAD,CAASQ,OAAO,CAAC,SAAD,C,CAC5BP,CAAQQ,SAAS,CAMjB,GALAV,CAAU,CAAE,CACR,GAAG,CAAEE,CAAQS,KAAK,CAAC,KAAD,CADV,CAEX,CAEGR,CAAW,CAAES,QAAQC,KAAKC,YAAY,CAAA,CAAEC,QAAQ,CAAC,SAAD,C,CAChDZ,CAAW,GAAI,GAAI,MAAM,CACzBP,CAAI,CAAEgB,QAAQC,KAAKG,OAAO,CAAC,CAAC,CAAEb,CAAJ,CAC1B,CAAE,sCAAuC,CAAEc,kBAAkB,CAACjB,CAASkB,IAAIC,MAAM,CAAC,GAAD,CAAM,CAAA,CAAA,CAA1B,C,CAEjEX,CAACY,SAAS,CAAC,CACP,IAAI,CAAExB,CAAG,CACT,MAAM,CAAE,CAAA,CAAI,CACZ,UAAU,CAAE,CAAA,CAAI,CAChB,KAAK,CAAE,MAAM,CACb,MAAM,CAAE,MAAM,CACd,MAAM,CAAEyB,QAAS,CAAA,CAAG,CAEhBb,CAAC,CAAC,YAAD,CAAcc,IAAI,CAAC,UAAU,CAAE,QAAb,CAAsB,CACzCd,CAAC,CAAC,YAAD,CAAce,OAAO,CAAA,CAHN,CAInB,CACD,QAAQ,CAAEC,QAAS,CAAA,CAAG,CAClBhB,CAAC,CAAC,YAAD,CAAcc,IAAI,CAAC,UAAU,CAAE,EAAb,CAAgB,CAEnCG,OAAOC,YAAY,CAAC,mBAAmB,CAAE,CAAA,CAAtB,CAA6B,YAAa,CAAE1B,CAASkB,IAAK,CAAE,QAAS,CAAES,IAAIC,OAAO,CAAA,CAAG,CAAE,KAAvF,CAHD,CAXf,CAAD,CAVO,CAXe,CAA/B,CAwCX,CAGFjC,CAAEkC,UAAU,CAAC,aAAa,CAAE,CACxB,KAAK,CAAE,YAAY,CACnB,GAAG,CAAE,gBAAgB,CACrB,KAAK,CAAEjC,CAAI,CAAE,uBAHW,CAAhB,CAIV,CAGFD,CAAEmC,aAAaC,IAAI,CAAC,QAAS,CAACC,CAAG,CAAEC,CAAE,CAAEC,CAAV,CAAgB,CACzCD,CAAEE,YAAY,CAAC,aAAa,CAAE,CAAC,CAACD,CAAIE,QAAS,EAAG,KAAjB,CAAjB,CAD2B,CAA1B,CArDE,CAwDxB,CAYD,aAAa,CAAEC,QAAS,CAAA,CAAQ,CAC5B,OAAO,IADqB,CAE/B,CAQD,OAAO,CAAEC,QAAS,CAAA,CAAG,CACjB,MAAO,CACH,QAAQ,CAAE,6BAA6B,CACvC,MAAM,CAAE,kBAAkB,CAC1B,SAAS,CAAE,2BAA2B,CACtC,OAAO,CAAE,2BAA2B,CACpC,OAAO,CAAE,KALN,CADU,CAvF6B,CAAxC,CAgGZ,CAGF9C,OAAO+C,cAAcR,IAAI,CAAC,aAAa,CAAEvC,OAAOgD,QAAQC,QAAQC,YAAvC,CAzGhB,EA0GX,CAAA,CAAE",
-"sources":["editor_plugin_src.js"],
-"names":["tinymce","create","init","ed","url","console","log","addCommand","editImage","content","firstImg","adminIndex","focus","selection","getContent","replace","$","filter","length","attr","location","href","toLowerCase","indexOf","substr","encodeURIComponent","src","split","colorbox","onLoad","css","remove","onClosed","tinyMCE","execCommand","Math","random","addButton","onNodeChange","add","ed2","cm","node","setDisabled","tagName","createControl","getInfo","PluginManager","plugins","Orchard","ImageEditor"]
-}

src/Orchard.Web/Modules/TinyMce/Scripts/plugins/medialibrary/editor_plugin.js

@@ -0,0 +1,2 @@
+(function(){tinymce.create("tinymce.plugins.Orchard.MediaPicker",{init:function(b,d){b.addCommand("mceMediaPicker",function(){b.focus();var c,a=b.selection.getContent();a&&(a=a.replace(/\<IMG/gi,"<editimg"),a=$(a).filter("editimg"),a.length&&(c={src:a.attr("src"),"class":a.attr("class"),style:a.css("cssText"),alt:a.attr("alt"),width:a.attr("width"),height:a.attr("height"),align:a.attr("align")}));jQuery("#"+b.id).trigger("orchard-admin-pickimage-open",{img:c,uploadMediaPath:jQuery("#"+b.id).data("mediapicker-uploadpath"),
+callback:function(a){b.focus();b.selection.setContent(a.img.html)}})});b.addButton("mediapicker",{title:jQuery("#"+b.id).data("mediapicker-title"),cmd:"mceMediaPicker",image:d+"/img/picture_add.png"})},createControl:function(){return null},getInfo:function(){return{longname:"Orchard MediaPicker Plugin",author:"Dave Reed",authorurl:"http://orchardproject.net",infourl:"http://orchardproject.net",version:"1.1"}}});tinymce.PluginManager.add("mediapicker",tinymce.plugins.Orchard.MediaPicker)})();

src/Orchard.Web/Modules/TinyMce/Scripts/plugins/medialibrary/editor_plugin_src.js

@@ -0,0 +1,102 @@
+(function () {
+
+    ////////////////////////////////////////////////////////////////////////
+    // NOTE: IF YOU EDIT THIS FILE
+    // You must also update editor_plugin.js with a minified version.
+    ////////////////////////////////////////////////////////////////////////
+    tinymce.create('tinymce.plugins.Orchard.MediaLibrary', {
+        /**
+        * Initializes the plugin, this will be executed after the plugin has been created.
+        * This call is done before the editor instance has finished it's initialization so use the onInit event
+        * of the editor instance to intercept that event.
+        *
+        * @param {tinymce.Editor} ed Editor instance that the plugin is initialized in.
+        * @param {string} url Absolute URL to where the plugin is located.
+        */
+        init: function (ed, url) {
+            // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceMediaPicker');
+            ed.addCommand('mceMediaLibrary', function () {
+                ed.focus();
+                var adminIndex = location.href.toLowerCase().indexOf("/admin/");
+                if (adminIndex === -1) return;
+                var url = location.href.substr(0, adminIndex) + "/Admin/Orchard.MediaLibrary?dialog=true";
+                $.colorbox({
+                    href: url,
+                    iframe: true,
+                    reposition: true,
+                    width: "100%",
+                    height: "100%",
+                    onLoad: function() {
+                        // hide the scrollbars from the main window
+                        $('html, body').css('overflow', 'hidden');
+                        $('#cboxClose').remove();
+                    },
+                    onClosed: function() {
+                        $('html, body').css('overflow', '');
+
+                        var selectedData = $.colorbox.selectedData;
+
+                        if (selectedData == null) // Dialog cancelled, do nothing
+                            return;
+
+                        var newContent = '';
+                        for (var i = 0; i < selectedData.length; i++) {
+                            var renderMedia = location.href.substr(0, adminIndex) + "/Admin/Orchard.MediaLibrary/MediaItem/" + selectedData[i].id + "?displayType=Raw";
+                            $.ajax({
+                                async: false,
+                                type: 'GET',
+                                url: renderMedia,
+                                success: function(data) {
+                                    newContent += data;
+                                }
+                            });
+                        }
+
+                         // reassign the src to force a refresh
+                         tinyMCE.execCommand('mceReplaceContent', false, newContent);
+                    }
+                });
+            });
+
+            // Register media button
+            ed.addButton('medialibrary', {
+                title: 'Insert Media Item', //ed.getParam("mediapicker_title"),
+                cmd: 'mceMediaLibrary',
+                image: url + '/img/picture_add.png'
+            });
+        },
+
+        /**
+        * Creates control instances based in the incomming name. This method is normally not
+        * needed since the addButton method of the tinymce.Editor class is a more easy way of adding buttons
+        * but you sometimes need to create more complex controls like listboxes, split buttons etc then this
+        * method can be used to create those.
+        *
+        * @param {String} n Name of the control to create.
+        * @param {tinymce.ControlManager} cm Control manager to use inorder to create new control.
+        * @return {tinymce.ui.Control} New control instance or null if no control was created.
+        */
+        createControl: function (n, cm) {
+            return null;
+        },
+
+        /**
+        * Returns information about the plugin as a name/value array.
+        * The current keys are longname, author, authorurl, infourl and version.
+        *
+        * @return {Object} Name/value array containing information about the plugin.
+        */
+        getInfo: function () {
+            return {
+                longname: 'Orchard Media Library Plugin',
+                author: 'The Orchard Team',
+                authorurl: 'http://orchardproject.net',
+                infourl: 'http://orchardproject.net',
+                version: '1.1'
+            };
+        }
+    });
+
+    // Register plugin
+    tinymce.PluginManager.add('medialibrary', tinymce.plugins.Orchard.MediaLibrary);
+})();

src/Orchard.Web/Modules/TinyMce/TinyMce.csproj

@@ -60,12 +60,9 @@
     <Content Include="Scripts\orchard-tinymce.js" />
     <Content Include="Scripts\plugins\autoresize\editor_plugin.js" />
     <Content Include="Scripts\plugins\autoresize\editor_plugin_src.js" />
-    <Content Include="Scripts\plugins\imageeditor\editor_plugin.js" />
+    <Content Include="Scripts\plugins\medialibrary\editor_plugin.js" />
-    <Content Include="Scripts\plugins\imageeditor\editor_plugin_src.js" />
+    <Content Include="Scripts\plugins\medialibrary\editor_plugin_src.js" />
-    <Content Include="Scripts\plugins\imageeditor\editor_plugin_src.min.js">
+    <Content Include="Scripts\plugins\medialibrary\img\picture_add.png" />
-      <DependentUpon>editor_plugin_src.js</DependentUpon>
-    </Content>
-    <Content Include="Scripts\plugins\imageeditor\img\picture_edit.png" />
     <Content Include="Scripts\plugins\fullscreen\editor_plugin.js" />
     <Content Include="Scripts\plugins\fullscreen\editor_plugin_src.js" />
     <Content Include="Scripts\plugins\fullscreen\fullscreen.htm" />
@@ -180,11 +177,6 @@
   <ItemGroup>
     <Content Include="web.config" />
   </ItemGroup>
-  <ItemGroup>
-    <Content Include="Scripts\plugins\imageeditor\editor_plugin_src.min.js.map">
-      <DependentUpon>editor_plugin_src.js</DependentUpon>
-    </Content>
-  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>