TinyMCE Editor Style Options

Vote:
 

So, I've seen how I can add / customise what styles appear in the Tiny MCE Editor:
I've read http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-CMS/7/Editing/Customizing-the-TinyMCE-Editor/

However, I want to so a few things which isn't mentioned in the above document:

 

1. I want the ability to add in Hx tags, with an additional class

i.e. <h2 class="h1">Heading</h2>

I'd also like to use the style inside my existing style sheet, but not load in ALL formats, as many are for layout, and not text formatting options..
Can I create a style sheet for the TinyMCE editor styles, but load the actual style from the other CSS file?

 

 

#83221
Mar 27, 2014 15:41
Vote:
 

I've seen I can included the "Format" editor option, and then apply a H2, and then apply an additioanl style using the styles dropdown.

Just looking at how/where I can customize what appears in the "Format" dropdown, as it's not taking whats in the CSS file.

#83223
Mar 27, 2014 15:48
Vote:
 

In order to add your stuff to tinyMCE Format dropdwn you may need to following things:
1) Create new CSS file located somewhere in your site (mark it as part of project - build action content in order to get it over to target server as well). Let's say - /Content/editor.css
2) Specify this file as tinyMCE available format styles in episever.config file - search for `uiEditorCssPaths` attribute under `siteSettings` element.
3) Add your custom styles in this file. Sample:

h1 {
    EditMenuName: Heading 1;
    margin: 40px 0 30px;
}

h2 {
    EditMenuName: Heading 2;
    margin: 30px 0 10px;
}

    

4) Newly added styles should be now visible in Format dropdown list.

To change class for selected element you may need to use `ChangeElementType` CSS rule. Info at the very bottom of the page you mentioned. This should generate new `h1` element with class `italic` for any selected text in your tinyMCE editor:

 

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

    

#83240
Mar 27, 2014 22:04
Vote:
 

Thanks Validid, the following worked for me:

h2.h3
{
   ChangeElementType: true;
   EditMenuName: Heading 2 H3;
}

    

I was also able to control what appears in the format dropdown, using the following method:

1. Creating an empty class, with a TinyMCEPluginNonVisual attribute

 

    [TinyMCEPluginNonVisual(AlwaysEnabled = true,
    PlugInName = "EditorSettings",
    DisplayName = "Init options",
    Description = "Custom editor init options.",
    EditorInitConfigurationOptions = @"{  
        paste_auto_cleanup_on_paste : true,  
        theme_advanced_blockformats : ""h1,h2,h3,h4,p,div"",
        theme_advanced_styles : ""Introduction=introduction;Date=date"",  
        theme_advanced_resizing : true }")]
    public class EditorSettings { }

    

2. The above causes a js error when it tries to reference a missing file, so I create the following handler:

    public class EmptyFileHandler : IHttpHandler
    {
        public bool IsReusable
        {
            get { return true; }
        }

        public void ProcessRequest(HttpContext context)
        {
        }
    }

    

and added the following to my config file:

  <location path="util/editor/tinymce/plugins">
    <system.webServer>
      <handlers>
        <add name="EditorSettings" path="/util/editor/tinymce/plugins/EditorSettings/editor_plugin.js" verb="GET" type="EPiServer.Templates.xxx.Business.EmptyFileHandler, EPiServer.Templates.xxx.MVC" />
      </handlers>
    </system.webServer>
  </location>

    

The question that still remains however is how (if it's even possible) I can create a TinyMCE style sheet, but get the actaul styles from my main site CSS file..
I don't want to reference it directly, as that causes 100's of items to appear in the dropdown. What I don't also want to do is manually create this, as it causes duplication. The front end devs are using saas to generate their style sheets, and have said that a 2nd sheet could be generated, but this would not include the Tiny MCE specific attributes like ChangeElementType, EditMenuName etc..

Any thoughts?

 

 

#83255
Mar 28, 2014 9:38
Vote:
 

Usually `editor.css` and `site.css` are separate files. I would look for some auto-generation tools that would extract related styles from `site.css` and copy them over to `editor.css` file with required tinyMCE editor rules added.

#83278
Mar 28, 2014 13:05
Vote:
 

Thanks.

I've actaully had a conversation with the CSS devs, and they said something along those lines should be possible, which is great news!

 

Cheers
Danny

#83279
Mar 28, 2014 13:07
Vote:
 

HI guys,

I have the same problem as Danny.

i have 2 css files.. One with my styles to be used in the TinyMCE editor dropdown like so

~/static/css/editor.css

h2
{       
    EditMenuName: Heading 2;
}
h3
{
    EditMenuName: Heading 3;
}
h4
{
    EditMenuName: Heading 4;
}

Now i'm getting the styles in the dropdown. 

So far good, now i get the second style sheet from our frond-end devs with the styles for the site, so that it would just reflect in the TinyMCE editor (NOT the dropdown).

However if i add that file to the 'uiEditorCssPaths="~/static/css/editor.css,~/css/editor.css" 

Now what i wanted it to have my first style sheet still show in my dropdown, and the second to just reflect the (site)styling in my editor. But what happens now is, that my dropdown gets cluttered with all the element from my second style sheet. 

Now i was wondering what Valdis meant with:  "I would look for some auto-generation tools that would extract related styles from `site.css` and copy them over to `editor.css` file with required tinyMCE editor rules added.

I think the clue is in the last part. 

I need to point our that the second editor.css is generated by the frond-end devs from saas and minified (which is quite big). 

Any help on how to overcome this problem?? thanks guys

#123555
Edited, Jul 08, 2015 12:05
Vote:
 

I think* that using something like @import '/css/basic.css' in the editor file won't clutter the styles dropdown with the styles from basic.css but still get the correct styling in the editing area.

* There might be some other tricks involved, I can check later if needed.

#131573
Edited, Jul 30, 2015 11:15
* 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.