November Happy Hour will be moved to Thursday December 5th.

How to Add Format Select Back Into TinyMCE

Vote:
 

The format select was removed from the default TinyMCE options in EPiServer 6 R2. The following post by 
Linus Ekström says that "It’s still possible to add and make use of the Format dropdown":

http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2011/3/Improvements-in-TinyMCE-in-EPiServer-CMS-6-R2/

What is the best way to get the Format dropdown back into the TinyMCE editor? I've tried setting the theme_advanced_container_row2 option through an empty class with the TinyMCEPluginNonVisual attribute and also the editor_plugin.js. My settings get overridden by the default.

How is it possible to add and make use of the TinyMCE Format dropdown in EPiServer CMS 6 R2?

Thanks,

Travis

#52427
Jul 23, 2011 6:27
Vote:
 

Hi Travis!

Have you tried changing the Tiny MCE settings for you property in admin mode and adding the format drop down? You can do this change either on a specific page type property or for the entire site by changing the global settings for "Edit Custom Property Types" => XhtmlString and setting the property settings as default.

#52460
Jul 27, 2011 18:14
Vote:
 

Thanks Linus,

 

Wow, that was too easy. I guess I'm so used to editing the init options using the TinyMCEPluginNonVisual attribute that I didn't even check for it in the custom property setting.

 

Thanks! 

#52461
Jul 27, 2011 20:11
Vote:
 

Hi,

is this the only way to modify the editor? It would be nice to do such things as add the format select via code?

#53200
Aug 31, 2011 17:00
Vote:
 

This is probably possible but it depends on which of the following things you want to do.

  • Modify so that all Tiny MCE editor instances get a format selection regardless of what settings they have?
  • Change the default settings to include the style drop down?
  • Add this setting for a specific editor setting?
#53209
Sep 01, 2011 6:57
Vote:
 

Hey Linus, thanks for your answer,

I'd like to be able to control the tools and settings of the tinyMCE editor "non-manually", as in not through the admin interface. Usually I have many instances of the same service running (in test, in production, local development etc, so it seems a bit error-prone and clumsy approach). In my current particular case I'd like to modify all the instances to have the same settings, so I guess it would be on the level of modifying the tinyMCE settings for the Data/Property Type "XHTML String".

In this (and in most cases I'm involved in) all the editor instances would preferably have exactly same settings and tools for the user to use - for example, if I have "MainBody" and let's say "AdditionalInformation" areas on all pages, they would have the same tools everytime.

I'm a bit confused how this should be accomplished, since I was under the impression that by creating a new .cs-file to use the TinyMCEPluginNonVisual attribute (with AlwaysEnabled = true) I could control the editor. However it seems that most of what I do there gets overriden somewhere else, or have I misunderstood the idea behind this (or have I just missed something in the code)?

I am not too familiar on the way this should work, so any help to clear things out are very much appreciated :)

#53211
Sep 01, 2011 7:16
Vote:
 

BTW, the reason why I think I would like to do this is that I'd like to define custom formats in the editor, and do it as easily as possible. For example create areas that would be wrapped in some custom HTML and such. Am I even looking at this from the right direction, is it possible?

#53212
Sep 01, 2011 7:22
Vote:
 

The format selection has been merged with the style selection in EPiServer CMS 6 R2. That means that you really don't need the format selector any more. The only reason for adding it is if you really want to make a differance between these for the user but it's normally just confusing for users and that's why we merged them. See the following blog post for more information on how to customize your styles/formats:

http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2011/3/Improvements-in-TinyMCE-in-EPiServer-CMS-6-R2/

#53213
Sep 01, 2011 7:33
Vote:
 

Is it possible to add custom HTML and other such things with the styles menu? All I got from that article is how to name CSS classes to be viewed in the styles menu? 

I'd need to be able to let the user add areas of content which then would be wrapped in some custom HTML. It seems that using this method the classes are just given to the paragrah tags (<p> or <div>)?

#53270
Sep 03, 2011 22:29
Vote:
 

It depends on what kind of html you want to wrap the content with. If I take the example from the blog:

h2.italic
{
   ChangeElementType: true;
   EditMenuName: Heading 2 Italic;
   font-style: italic;
}

it will wrap the selected content in a h2 tag with the class "italic". If the selected content is already an element, like a p tag, the ChangeElementType attribute converts the p tag to a h2 tag. If you want to add more advanced html around the content you'd have to write your own plug-in to Tiny MCE. See the Tiny MCE developers guide if you need this.

#53276
Sep 05, 2011 8:08
Vote:
 

That's works fine, except when you need to change it to a custom element, in which case EPiServer provides no support. It would be great if EPiServer would provide a way to add custom elements to the BlockElements property of the EPiServer.Editor.TinyMCE.TinyMCEStyleFormatterHelper class. That way, I could completely ditch the format dropdown and just go with the style dropdown, as EPiServer suggests.

I'm confused why EPiServer didn't do this to begin with, maybe didn't think about it? All you'd have to do is look at the EditorInitConfigurationOptions for the theme_advanced_blockformats/custom_elements properties and populate the custom ones into the BlockElements property. Can I request this be implemented in a future release?

#54537
Edited, Oct 19, 2011 23:03
Vote:
 

Hi!

We did not take custom elements into consideration when we wrote the ability to read styles and elements from a css file. I checked out the TinyMCEStyleFormatterHelper class and it might be possible to add custom elements here but there is currently no way for a plug-in to access this class or the classes that are responsible for setting up this class. So it will require some development in order to make this possible. I'll forward this request to the product managers so that they are at least aware of the case.

#54600
Oct 24, 2011 12:07
Vote:
 

Thanks Linus!

This is what makes EPiServer such a rockin' company, you guys take development requests seriously and we developers get a better, more flexible product to work with as a result. I'll be looking forward to a potential future release with full custom element support.

As an FYI, TinyMCE finally fixed IE issues with custom elements in version 3.4.5.

Thanks again! 

#54622
Oct 24, 2011 19:09
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.