Hey Dan!

This is my EditorStyleOptions.xml (you can name it differently, ofc):

<?xml version="1.0" encoding="utf-8" ?>
<language name="svenska" id="sv">
  
  <editorstyleoptions>
    
    <heading_styles>Rubrik</heading_styles>
    <header_2>Rubrik 2</header_2>
    <header_3>Rubrik 3</header_3>
    <header_4>Rubrik 4</header_4>

    <paragraph_styles>Stycke</paragraph_styles>
    <align_left>Vänsterställd</align_left>
    <align_right>Högerställd</align_right>
    <align_center>Centrerad</align_center>
    
    <image_styles>Bildplacering</image_styles>
    <float_right>Högerställd</float_right>
    <float_left>Vänsterställd</float_left>

    <orange_list>Orange länklista</orange_list>
  
  </editorstyleoptions>
  
</language>

And this is a corresponding editor.css:

h2 {
    EditMenuTitle:Heading Styles;
    EditMenuName:Header 2;
}
body h2:first-child{
    margin-top: 0;
}
h3 {
    EditMenuName:Header 3;
}
h4 {
    EditMenuName:Header 4;
}
ul.orange-list {
    EditMenuName:Orange list;
}
p.align-left {
    EditMenuTitle:Paragraph Styles;
    EditMenuName: Align left;
}
p.align-right {
    EditMenuName: Align right;
}
p.align-center {
    EditMenuName: Align center;
}
img.float-left {
    EditMenuTitle:Image Styles;
    EditMenuName:Float left;
}
img.float-right {
    EditMenuName:Float right;
}

Marija,

thanks, but that is the styles dropdown, I'm trying to change the translations in the format drop down =)

Hey, yes, I see now, it's written clearly, sorry for that.

If it's any similar to EPi 6, it should be that you are missing <plugins>

<tinymce>
<plugins>
<advanced>

If not, you can call LocalizationService.Current.GetAllStrings().Where(...) and get the path to it (if I remember correctly, that's the Key of ResourceItem).

Marija, no worries =)

Actually the xml structure I added is extracted from the resource embedded in the DLL, but I did try to add "plugin", but it had no effect :(

<language name="English" id="en">
    <episerver>
      <tinymce>
        <advanced>
          <block>Format tiny epi</block>
        </advanced>
      </tinymce>
    </episerver>
    <tinymce>
        <advanced>
          <block>Format tiny</block>
        </advanced>
      </tinymce>
    </language>

It seems episerver node is needed as well. When I put this, I got "Format tiny epi" in the dropdown. Pls note that this is cached, so restart your web.config before doing hard reload. 

Thank you!

It was the episerver node that was missing. Since it was not in the in the embedded resources I didn't think about using it.

I found it when I opened EPiServer.Cms.Shell.UI.dll in Notepad ++ :D

Hehe, I used DotPeek, but without success :) Again thanks.

Hi guys,

I'm also trying to do this for some custom format names but no luck so far.

EpiServer version 9.12.2

TinyMCE version 3.5.11

1. Adding TinyMCE configuration through TinyMCEPluginNonVisual annotation, custom format marker which will wrap selected text inline with <mark> HTML tag.

Also using theme_advanced_blockformats which will extend Format dropdown with the additional custom marker (from the TinyMCE documentation)

[TinyMCEPluginNonVisual(AlwaysEnabled = true,
         ServerSideOnly = true,
         PlugInName = "CustomEditorSettings",
         DisplayName = "Init options",
         Description = "Custom editor init options.",

         EditorInitConfigurationOptions =
             @"{ 
                  formats: {marker : {inline : 'mark'}},
                  theme_advanced_blockformats: 'marker,h1,h2,h3,h4,h5,h6,blockquote,p,address,pre' 
               }")]
    public class TinyMCEconfig
    {
    }

2. Custom format marker is added into Format dropdown but without a name (it's invisible as dropdown item - hasn't named, but functional if we use it).

3. I noticed it can't find its name because it is using episerver.tinymce.js translation file by default. I found this post and managed to translate some built in stuff like "block" as described above but it didn't work for any new custom formats added. Also what is weird is that I can find new entry "marker" inside episerver.tinymce.js after adding translation XML file episerver.xml like below, but that translation is not used - my custom format element is still without name - invisible.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<languages>
  <language name="English" id="en">
    <episerver>
      <tinymce>
        <advanced>
          <marker>Yellow mark</marker>
          <marker_desc>Yellow mark</marker_desc>
        </advanced>
      </tinymce>
    </episerver>
  </language>
</languages>

Translation is added into episerver.tinymce.js but not used by EpiServer at runtime...

{"advanced":{"marker":"Yellow mark","marker_desc":"Yellow mark","address":"Address","anchor_delta_height":"".....

Is this a bug or this can be done in some other way?

Thanks,

Bojan

Hi, Bojan,

I haven't been adding any custom formats, it sounds like a bug, maybe you can report it, but since there is a workaround, I don't think this can get very high in the prioritization for Episerver.

Is there a reason why you haven't added this to the Styles dropdown, with some CSS, that seems way easier?

.some-yellow-class 
{
    EditMenuTitle:Marks;
    EditMenuName: Yellow mark;
    background-color: yellow;
}

BR,

Marija

Thank you Marija,

Yes, this sounds like a better approach.

I wanted to preserve current HTML markup with element <mark>Yellow text</mark> by creating aditional 'wrapper' type of 'inline' TinyMCE custom format.

But it seems it's partially supported because I can't find any documentation explaining this. 

Looking forward to better editor in the future :)

Bojan