Customizing Tenant's TinyMce Styles

Topics: Administration, Writing modules
May 10, 2011 at 2:25 PM

I'd like to be able to customize TinyMce by adding the styles dropdown per tenant. The problem is that all tenants share modules.

Ideally, I could specify to look for a specific file, styles/editor.css, in the current theme and add those styles to the dropdown.

If that's not possible, is there any way I can edit the scripts/orchard-tinymce.js file in the TinyMce module per tenant?

Coordinator
May 10, 2011 at 6:37 PM

All tenants share the list of *available* modules, but their enabled state and settings are per tenant.

Oct 30, 2011 at 1:56 PM

So am I correct in saying you can override the TinyMCE settings per theme?

Oct 30, 2011 at 4:34 PM
nickspiers wrote:

I'd like to be able to customize TinyMce by adding the styles dropdown per tenant. The problem is that all tenants share modules.

Ideally, I could specify to look for a specific file, styles/editor.css, in the current theme and add those styles to the dropdown.

If that's not possible, is there any way I can edit the scripts/orchard-tinymce.js file in the TinyMce module per tenant?

The CKEditor module can do exactly this (pull in classes from a .css file) - if it's possible with TinyMCE you'll probably need a plugin.

Feb 1, 2012 at 3:53 PM

I don't think you need an extra plugin to do this with TinyMce. You just need to include the "styleselect" element in your list of buttons (in orchard-tinymce.js, which you can override from your module to customize). See the lines i colored in Red below for an example: 

 

//tinyMCE.init({
//    theme: "advanced",
//    mode: "specific_textareas",
//    editor_selector: "tinymce",
//    plugins: "fullscreen,searchreplace,mediapicker,-table,-pagebreak,-template",
//    theme_advanced_toolbar_location: "top",
//    theme_advanced_toolbar_align: "left",
//    theme_advanced_statusbar_location: "bottom",
//    theme_advanced_resizing: "true",
//    theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,|,styleselect,|,code,fullscreen",
//    theme_advanced_buttons2: "mediapicker,|,tablecontrols,|,hr,removeformat,visualaid,|,visualchars,template,blockquote,pagebreak",
//    theme_advanced_buttons3: "",
//    convert_urls: false,
//    template_external_list_url : "/Modules/TinyMceDeluxe/Scripts/samples/tinymce_template_list.js",
//    content_css: "/Themes/MyTheme/Styles/Site.css",
//    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]"
//});

 

The problem is you need to override this file from a module, and in order to customize per tenant, you would have to override from a module that is unique to the tenant. I think you will have to write some custom code to get it working the way you want. Something that dynamically outputs the tinyMCE.Init() stuff above, but with a customized value for "content_css" per tenant.