TinyMCE Template plugin - where to store tempates?

Topics: General
Mar 29, 2012 at 12:52 AM

Hey guys, where do I place the template *.htm files in relation to the orchard directory structure? I read on the TinyMCE site that:

"...the path to your template files is relative from the file containing the editor."

But obviously If I create an absolute dir path to Admin/Contents/Edit/(?)/template.htm – that will break orchard [as in going to the dashboard will just give you a dir listing]. Can someone help me out, I'm really confused? Thanks in anticipation cheers Dyr

Mar 29, 2012 at 4:14 AM

Here is how I have done it.

In orchard-tinymce.js:

tinyMCE.init({
    ...
    template_external_list_url : "/Modules/YourModule/Scripts/tinymce_template_list.js",
    ...
});

In tinymce_template-list.js: 

var tinyMCETemplateList = [
// Name, URL, Description
	["Two Columns", "/Modules/YourModule/Styles/templates/two-col.htm", "HTML Layout."]
    , ["Homepage Slideshow", "/Modules/YourModule/Styles/templates/homepage-slideshow.htm", "HTML Layout."]
];

Mar 29, 2012 at 5:24 AM

Hey, thanks ever so much for the reply...so I assume you’re using your templates purely in [your module] text/html fields, or does this work throughout all of orchard? If so, I’ve done something wrong replicating your code, or, I need to find a solution to adding templates to all content types [with appropriate fields] in Admin? This is driving me really batty, thanks for your support/thoughts, cheers Dyr.

Mar 30, 2012 at 3:03 AM

Hi dyrgutt – im very new to orchard and website authoring in general…so I had no idea you could implement templates in tinymce – AWESOME!  I too wish to add this functionality to Admin fields and was hoping you found a solution and could help me with how you implemented it?  I’m really getting into Orchard but everything seems to be a very steep learning…any assistance you can provide would be appreciated. Thankyou Jane

Mar 31, 2012 at 4:37 AM

Hey Jane, sorry mate, I haven’t progressed any further other than *possibly* ascertaining that you need to create an Admin module to override the Admin/Edit functionality; though those in the know may say otherwise and/or have a better solution? Cheers Dyr.

PS> I'll let you know if I make an further progress.

Apr 3, 2012 at 11:16 PM

If what Dyrgutt has surmised is correct, can anyone provide me with some documents/help on how to achieve this? Thanks kindly, Jane

Apr 4, 2012 at 1:59 AM

Look into the TinyMceDeluxe module in the gallery or on CodePlex. It has samples and some docs for using templates, among other things. 

Apr 4, 2012 at 4:26 AM

Using TinyMCEDeluxe has seen me go backwards, following the instructions in the install leads me to not having TinyMCE display at all? With my original, orchard TinyMce modified file and added plugins, I had everything the way I wanted, it was just that the templates I designated wouldn’t display in the drop down box (same as Dyrgutt I believe).

The only way I could get template names in the ddbox was by using the following, though the template never loaded:

 template_templates : [
                {
                        title : "Body Stuff",
                        src : "template.htm",
                        description : "Does stuff"
                }

TheMonarch - Have you got templates working in the backend on content types with appropriate textboxes? thanks Jane  PS> It didnt work on a fresh install of orchard [latest build] attempted within the Deluxe Module itself, and then a custom - neither worked?

Apr 11, 2012 at 2:11 AM

Hi all, can someone have a look at the following and see where [I'm/Orchard?] is going wrong?

tinyMCE.init({
    theme: "advanced",
    mode: "specific_textareas",
    editor_selector: "tinymce",
    plugins: "fullscreen,autoresize,searchreplace,mediapicker,template",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_buttons1: "template,|,search,replace,|,cut,copy,paste,|,undo,redo,|,mediapicker,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,code,fullscreen",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    convert_urls: false,
    template_templates : [
                {
                        title : "Test",
                        src: "/Modules/TinyMce/Scripts/Templates/test.htm",
                        description : "just testing"
                }
        ],
    valid_elements: "*[*]",
    // shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
    extended_valid_elements: "script[type|defer|src|language]"
});

I have just added the template plugin to the original Orchard/TinyMce project, but for the life of me, I cannot get the template to display in the preview iframe when selected - just returns 'server error' - HTTP Error 404 - Not Found?  I have also tried many path variations without success.

ERROR LOG:

2012-04-11 12:05:39,284 [12] Orchard.Exceptions.DefaultExceptionPolicy - The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Edit(Int32)' in 'Orchard.Core.Contents.Controllers.AdminController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters

This is in IE and FF.

I'm going very much insane with this issue, so if anyone can chime in, I would 'really' appreciate it. Thanks for your time, Jane.

Apr 12, 2012 at 12:17 AM

Well, I dont belive the above error is preventing the template from dispalying, for if I supply a default int to Core/AdminController such as:

public ActionResult Edit(int id = -1)
the error no longer occurs, but the template still can't be found.  Do I have to add a route for the template, not sure how i'd go about that?  Any thoughts guys -- is anyone *actually* successfully using templates in orchard, and if so, would they be willing to post me their module so I can eliminate possible 'gremlins' in my build?  Thanks for any suggestions, Jane.

Apr 12, 2012 at 2:12 AM

Templates work for me using TinyMceDeluxe. At least a couple other people that I know of, possibly more, also got it working without any issues. 

Apr 12, 2012 at 2:18 AM
seemore wrote:

Using TinyMCEDeluxe has seen me go backwards, following the instructions in the install leads me to not having TinyMCE display at all? With my original, orchard TinyMce modified file and added plugins, I had everything the way I wanted, it was just that the templates I designated wouldn’t display in the drop down box (same as Dyrgutt I believe).

The only way I could get template names in the ddbox was by using the following, though the template never loaded:

 

 template_templates : [
                {
                        title : "Body Stuff",
                        src : "template.htm",
                        description : "Does stuff"
                }

 

TheMonarch - Have you got templates working in the backend on content types with appropriate textboxes? thanks Jane  PS> It didnt work on a fresh install of orchard [latest build] attempted within the Deluxe Module itself, and then a custom - neither worked?

Yes, templates work for me. I'm not sure what you mean by "with appropriate textboxes", but once I enable TinyMceDeluxe, every bodypart in the Dashboard renders using the TinyMce editor as configured by the TinyMceDeluxe module, along with the extra plugins. Are you sure you followed the directions exactly? Maybe look in the forum for the deluxe module to see if one of the two posts there have info that might help. 

You would have to post more details to debug the error you're getting with deluxe. Make sure you clear all browser cache once you enable deluxe. The only time I have had an issue with the wysiwyg not showing up at all was due to browser caching outdated .js files. Try disabling any Combinator module if you have one enabled too. If you're still getting this problem, can you reproduce it with Chrome or FF, and pull up the developer console (F12), goto the console and refresh the page with the textboxes that aren't rendering properly, and see if there are any javascript errors? Then look at the network tab, refresh the page, and see if there are any HTTP requests that are getting errors. Post back here or in the deluxe module's message board with more info if you are able. 

Apr 12, 2012 at 9:04 AM

Ok,

* Fresh Orchard install using sql r2 2008.
* installed TinyMCEDeluxe 0.1.2 through module gallery [not 0.1.4 as for some reason the nuget installation freezes my VS2010]
* Created new 'blank' project for test module called 'Tinytest'
* followed TinyMCEDeluxes's instructions implicitly, but TinyMce's orchard-tinymce.js still overode my module's version?

My resource manifest being:

using Orchard.UI.Resources;

namespace Tinytest {
    public class ResourceManifest : IResourceManifestProvider {
        public void BuildManifests(ResourceManifestBuilder builder) {
            var manifest = builder.Add();
            //manifest.DefineScript("TinyMce").SetUrl("tiny_mce.js", "tiny_mce_src.js").SetVersion("3.4.8");
            manifest.DefineScript("OrchardTinyMce").SetUrl("orchard-tinymce.js").SetDependencies("TinyMce");
        }

    }
}
Seems to be the same as: http://tinymcedeluxe.codeplex.com/discussions/328842 towards the end of the thread, though instead of resolving the issue by stipulating a dependency on TinyMceDeluxe or not - such still doesnt resolve the overriding?  This occurs in all browsers btw. Thanks for your time TheMonarch.

Apr 12, 2012 at 11:05 AM

UPDATE:  The only way i've managed to override the TinyMCE module, is to perform the TinyMCEDeluxe instructions upon itself, when I do this, I see the template logo; but this will still not function properly until I add 'OrchardLocal' to all the static urls. i.e.

["Two Columns", "/OrchardLocal/Modules/TinyMceDeluxe/Scripts/samples/templates/two-col.htm", "HTML Layout."]
template_external_list_url: "/OrchardLocal/Modules/TinyMceDeluxe/Scripts/samples/tinymce_template_list.js",
content_css: "/OrchardLocal/Themes/TheThemeMachine/Styles/Site.css",

Once I've done this, I finally get to see a template instead of a 404.  Odds on that when I go back to my other project and add 'OrchardLocal' like above, it will function as well *ARRRGGGGHHH*!!  I've wasted a lot of time on discovering this. Thanks for your input theMonarch, cheers Jane

Apr 12, 2012 at 12:26 PM
Edited Apr 12, 2012 at 3:42 PM

Hi, I would like to fix any issues with TinyMceDeluxe. Can you tell me what you mean by "perform the TinyMceDeluxe instructions upon itself"? Would you be willing to try the latest code from the codeplex site? I think it's a little newer than the code on the gallery. 

Even if you aren't willing to mess with thsi further the clarification about the above statement would help me. When I get a chance I'll try with a fresh orchard install to see if the instructions step by step work. I may have done something while setting it up with my own projects that I forgot to document. 

Apr 12, 2012 at 9:30 PM

Absolutely mate, willing to try anything you propose.  Yeah, sorry for the poor wording, what I meant by “instructions upon itself”, was to copy orchard-tinymce.js from samples into TinyMCEDeluxe’s Script folder and obviously amend TinyMCEDeluxe’s resource manifest; from there, just adding OrchardLocal to the URL’s should have a fresh install [with 0.1.2] up and running.  On a side note, the original module I had created in another project to just override TinyMCE did indeed work after adding ‘OrchardLocal’, and honestly, the code is the same – so something to do with TinyMCE being overridden by TinyMCEDeluxe being overridden by a further module goes amiss? Hope I can be of help, cheers Jane.