Problem customizing the Styles drop down in the TinyMCE editor.

MPedrero

Vote:

Hi good morning.

I'm trying to understand how to customize the TinyMCE and also how to add custom styles in the Styles drop down.

For this, I have created a new Class "ExtendedTinyMceSettings" which inherits from PropertySettings, this class customizes the TinyMCE's toolbox, well on my case this works properly. I also decorated an XHTMLString property whit this class in my StartPage model (PageType).

This is the class code for the "ExtendedTinyMCESettings.cs":

using EPiServer.Core.PropertySettings;
using EPiServer.Editor.TinyMCE;
using EPiServer.ServiceLocation;
using System;
using System.Collections.Generic;

namespace EpiCommerceTest.Editor
{
    /// 
    /// An advanced mce editor configuration. This can be used for XhtmlString properties where advanced editing is preferred, including html.
    /// 
    [ServiceConfiguration(ServiceType = typeof(PropertySettings))]
    public class ExtendedTinyMceSettings : PropertySettings
    {
        public ExtendedTinyMceSettings()
        {
            DisplayName = "Advanced editor including HTML";
            Description = "An advanced editor with advanced editing options including custom HTML";
        }

        public override TinyMCESettings GetPropertySettings()
        {

            var settings = new TinyMCESettings();
            
            settings.ToolbarRows.Add(new ToolbarRow(new List
            {
                TinyMCEButtons.EPiServerLink,
                TinyMCEButtons.Unlink,
                TinyMCEButtons.Anchor,
                TinyMCEButtons.Image,
                TinyMCEButtons.EPiServerQuote,
                TinyMCEButtons.EPiServerImageEditor,
                TinyMCEButtons.Media,
                TinyMCEButtons.EPiServerPersonalizedContent,
                TinyMCEButtons.Separator,
                TinyMCEButtons.TableButtons.Table,
                TinyMCEButtons.TableButtons.InsertRowBefore,
                TinyMCEButtons.TableButtons.InsertRowAfter,
                TinyMCEButtons.TableButtons.DeleteRow,
                TinyMCEButtons.TableButtons.InsertColumnBefore,
                TinyMCEButtons.TableButtons.InsertColumnsAfter,
                TinyMCEButtons.TableButtons.DeleteColumns,
                TinyMCEButtons.Separator,
                TinyMCEButtons.Cut,
                TinyMCEButtons.Copy,
                TinyMCEButtons.Paste,
                TinyMCEButtons.PasteText,
                TinyMCEButtons.PasteWord,
                TinyMCEButtons.Separator,
                TinyMCEButtons.Code,
                TinyMCEButtons.Fullscreen
            }));

            settings.ToolbarRows.Add(new ToolbarRow(new List
            {
                TinyMCEButtons.Bold,
                TinyMCEButtons.Italic,
                TinyMCEButtons.Underline,
                TinyMCEButtons.StyleSelect,
                TinyMCEButtons.Separator,
                TinyMCEButtons.JustifyLeft,
                TinyMCEButtons.JustifyCenter,
                TinyMCEButtons.JustifyRight,
                TinyMCEButtons.JustifyFull,
                TinyMCEButtons.Separator,
                TinyMCEButtons.BulletedList,
                TinyMCEButtons.NumericList,
                TinyMCEButtons.SuperScript,
                TinyMCEButtons.SubScript,
                TinyMCEButtons.Outdent,
                TinyMCEButtons.Indent,
                TinyMCEButtons.Undo,
                TinyMCEButtons.Redo,
                TinyMCEButtons.Separator,
                TinyMCEButtons.Search
            }));

            settings.Height = 20;
            settings.Width = 580;
            //settings.ContentCss = "/static/css/site.css,/static/css/Editor.css";

            settings.ContentCss = "/Static/css/bootstrap.css,/Static/css/Site.css,/Static/css/Editor.css";

            return settings;
        }

        public override Guid ID => new Guid("689E910C-57D1-4095-B1F5-FEC45DC2CF10");
    }
}

This is the class code for the "StartPage.cs":

using EpiCommerceTest.Editor;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using System.ComponentModel.DataAnnotations;

namespace EpiCommerceTest.Models.Pages
{
    [ContentType(DisplayName = "StartPage", GUID = "555eef28-1c03-4017-896d-fe2b9c13afab", Description = "")]
    public class StartPage : PageData
    {
        [CultureSpecific]
        [Display(
            Name = "Title",
            Description = "This is the Page Title.",
            GroupName = SystemTabNames.Content,
            Order = 1)]
        public virtual string Title { get; set; }

        [PropertySettings(typeof(ExtendedTinyMceSettings))]
        [CultureSpecific]
        [Display(
            Name = "Main body",
            Description = "The main body will be shown in the main content area of the page, using the XHTML-editor you can insert for example text, images and tables.",
            GroupName = SystemTabNames.Content,
            Order = 2)]
        public virtual XhtmlString MainBody { get; set; }
    }
}

But, my problem comes when I try to add new styles to the TinyMCE Editor. I have created to style sheets, one called Editor.css (this includes the "style definitions" for the TinyMCE styles drop down) and Site.css (this should includes the Site styles), you can see the content for those Style sheets:

Editor.css:

p.bold .red {
    EditMenuTitle: Paragraphs Styles;
    EditMenuName: Bold red paragraph;
}

h2.hstyle .normal {
    EditMenuTitle: Headding Styles;
    EditMenuName: H2 Normal;
}

h2.hstyle .italic {
    EditMenuName: H2 Italic;
}

h2.hstyle .italic .red {
        EditMenuName: H2 Italic Red;
    }

Stie.css:

p.bold.red {
    color: red;
    font-weight: bold;
}

h2.hstyle.normal {
    font-style: normal;
}

h2.hstyle.italic {
    font-style: italic;
}

h2.hstyle.italic.red {
        color: red;
        font-style: italic;
    }

Well when I debug the code and go to the CMS edit tab, this is what I see:

https://drive.google.com/file/d/1GKtEOD8bIDUgQ_jfJA7LN_WzHGRRXOe9/view?usp=sharing

https://drive.google.com/file/d/1aVWRK1XhmN2c5pD6ykbnKXFYspVDEw0h/view?usp=sharing

As you can see, there are the new styles in the TinyMCE Styles drop down, but no one of those styles are being applied. Only one style are been applied: p.bold .red

Doesn't matter which header style I choose, the style that the Editor applies always is p

I'm a little bit lost and I don't know what I'm doing bad.

I'm using Episerver 11.3.4.0 for this Test.

I need your help guys.

Best regards.

#188881

Edited, Mar 06, 2018 11:10

Empa

Vote:

This works for me:

h4 {
  EditMenuTitle: Headers;
  ChangeElementType: true;
  EditMenuName: Header 4; }

h5 {
  ChangeElementType: true;
  EditMenuName: Header 5; }

img.align-right {
  EditMenuTitle: Images;
  ChangeElementType: true;
  EditMenuName: Image right; }

img.align-left {
  ChangeElementType: true;
  EditMenuName: Image left; }

Text translation:

<?xml version="1.0" encoding="utf-8"?>
<languages>
  <language name="English" id="en">
    <editorstyleoptions>
      <headers>Headers</headers>
      <header_4>Header 2</header_4>
      <header_5>Header 3</header_5>
      <images>Images</images>
      <image_right>Image to right</image_right>
      <image_left>Image to left</image_left>
    </editorstyleoptions>
  </language>
</languages>

#188887

Mar 06, 2018 12:43

MPedrero

Vote:

Hi Empa.

first of all thank you for your answer.

I have included the "ChangeElementType: true;" property on each style inside my "Editor.css" file and now it looks something like this:

p.bold .red {
    EditMenuTitle: Paragraphs Styles;
    ChangeElementType: true;
    EditMenuName: Bold red paragraph;
}

h2.hstyle .normal {
    EditMenuTitle: Headding Styles;
    ChangeElementType: true;
    EditMenuName: H2 Normal;
}

h2.hstyle .italic {
    ChangeElementType: true;
    EditMenuName: H2 Italic;
}

h2.hstyle .italic .red {
    ChangeElementType: true;
    EditMenuName: H2 Italic Red;
}

And the html code for the rendered view / property is this:

<p>Este es un ejemplo sobre la funcionalidad del Commerce de Episerver.</p>
<p class="bold red">P bold red</p>
<h2 class="hstyle normal">H2</h2>
<h2 class="hstyle italic">H2 Italic</h2>
<h2 class="hstyle italic red">H2 Italic Red</h2>

So I can say that your solution works for me.

But I would like to know what does "ChangeElementType: true;" mean because I want to understand correctly why I need to use it.

Best regards.

#188894

Edited, Mar 06, 2018 14:00

Empa

Vote:

"ChangeElementType. Lets you apply a class and change the element type for text block elements (p, h1, h2, and so on)."

https://world.episerver.com/documentation/Items/Developers-Guide/Episerver-CMS/7/Editing/Customizing-the-TinyMCE-Editor/

#188895

Edited, Mar 06, 2018 14:05

MPedrero

Vote:

Thank you Empa.

Now everything about this is clear for me.

Best regards. :)

#188897

Mar 06, 2018 15:04