Tinymce custom block format

Vote:
 

Hello, 

I am using tinymce in my EpiServer solution and have following blockformats

                config.Default().AddSetting("block_formats", "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Blockquote=blockquote;Preformatted=pre")

How can I add a custom format here to this list, with a definite size and color. 

#247382
Jan 21, 2021 5:12
Vote:
 

I am not sure what is the correct way here but this is how I am trying and it shows no changes on the editor. I don't see any new styles in the dropdown. I am only seeing the options from the block formats. Below is my code.

                config.Default()
                    // important, to edit the display names, use the /lang/TinyMceEditoryStyles.xml file!
                    .ContentCss("/static/epicss/editor.css")
                    .AddSetting("table_default_attributes", defaultTableStyles)
                    .AddSetting("extended_valid_elements", string.Join(",", extendedValidElements))
                    .AddSetting("media_live_embeds", "true")
                    .AddSetting("paste_word_valid_elements", "a[href],strong,i,em,h1,h2,table,h3,h4,h5,p,table,td,tr,span,style")
                    .StyleFormats(
                            new { title = "Bold text", inline = "strong" },
                            new { title = "Red text", inline = "span", styles = new { color = "#ff0000" } },
                            new { title = "Red header", block = "h1", styles = new { color = "#ff0000" } }
                        )
                    .AddSetting("block_formats", "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Blockquote=blockquote;Preformatted=pre")
                    .AddPlugin
                    (
                    "wordcount", "code", "hr", "anchor", "table", "advlist",
                    "epi-dnd-processor", "epi-image-editor", "epi-personalized-content",
                    "spellchecker", "searchreplace", "charmap", "importcss", "imagetools", "contextmenu")
                    .AppendToolbar
                    (" | undo redo removeformat | wordcount | alignleft aligncenter alignright alignjustify | code | hr anchor table advlist |styleselect");

            });

XML:

<languages>
  <language name="English" id="en">
    <tinymce>
      <editorstyles>
        <bold-text>Important Text</bold-text>
        <red-text>Warning Text</red-text>
        <red-header>Warning Heading</red-header>
      </editorstyles>
    </tinymce>
  </language>
</languages>

#247612
Jan 25, 2021 22:22
Vote:
 

Hi Deelip,

Make sure you have added module dependancy as 

[ModuleDependency(typeof(TinyMceInitialization))]

This can be the only issue. Because I don't see any issue in your code, untill and unless you are not overriding your settings somewhere.

#247656
Jan 26, 2021 5:51
Vote:
 

So below is my entire code for the initialization. My editor works but am not able to see the custom font size that am trying to add

    [ModuleDependency(typeof(TinyMceInitialization))]
    public class ExtendedTinyMceInitialization : IConfigurableModule
    {
        public void Initialize(InitializationEngine context) { }

        public void Uninitialize(InitializationEngine context) { }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            // https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/
            context.Services.Configure<TinyMceConfiguration>(config =>
            {
                //EPiServer.Cms.TinyMce.Core.DefaultValues
                var simpleConfiguration = config.Default().Clone()
                .BodyClass("simple_body")
                .Width(400)
                .Height(40)
                .AddPlugin("epi-link", "lists", "wordcount", "paste", "link")
                .Toolbar("bold italic cut copy paste | epi-link unlink | bullist outdent indent");

                var extendedValidElements = new List<string>
                {
                    "ol[type|class|style]",
                    "ul[type|class|style]",
                    "script[language|type|src]",
                    "iframe[src|frameborder=0|alt|title|width|height|align|name|allowfullscreen|class]"
                };

                var defaultTableStyles = new Dictionary<string, string> { { "style", "" }, { "border", "0" } };

                config.Default()
                    // important, to edit the display names, use the /lang/TinyMceEditoryStyles.xml file!
                    .ContentCss("/static/epicss/editor.css")
                    .AddSetting("table_default_attributes", defaultTableStyles)
                    .AddSetting("extended_valid_elements", string.Join(",", extendedValidElements))
                    .AddSetting("media_live_embeds", "true")
                    .AddSetting("paste_word_valid_elements", "a[href],strong,i,em,h1,h2,table,h3,h4,h5,p,table,td,tr,span,style")
                    .StyleFormats(
                            new { title = "Bold text", inline = "strong" },
                            new { title = "Red text", inline = "span", styles = new { color = "#ff0000" } },
                            new { title = "Red header", block = "h1", styles = new { color = "#ff0000" } }
                        )
                    .AddSetting("block_formats", "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Blockquote=blockquote;Preformatted=pre")
                    .AddPlugin
                    (
                    "wordcount", "code", "hr", "anchor", "table", "advlist",
                    "epi-dnd-processor", "epi-image-editor", "epi-personalized-content",
                    "spellchecker", "searchreplace", "charmap", "importcss", "imagetools", "contextmenu")
                    .AppendToolbar
                    (" | undo redo removeformat | wordcount | alignleft aligncenter alignright alignjustify | code | hr anchor table advlist |styleselect");

            });

            return;
        }
    }

#247686
Jan 26, 2021 14:49
Vote:
 

What I see in here is, you created the simpleConfiguration but you haven't applied it to any XHtmlString property.

You can do it like this

config.For<MyBlock>(x => x.MyPropertyName,  simpleConfiguration);
#247688
Jan 26, 2021 15:20
Vote:
 

Hi Praful,

I changed it to look like this. The new style formats doesn't apply. It sill has the default block formats.

    [ModuleDependency(typeof(TinyMceInitialization))]
    public class ExtendedTinyMceInitialization : IConfigurableModule
    {
        public void Initialize(InitializationEngine context) { }

        public void Uninitialize(InitializationEngine context) { }

        public void ConfigureContainer(ServiceConfigurationContext context)
        {
            // https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/
            context.Services.Configure<TinyMceConfiguration>(config =>
            {

                var extendedValidElements = new List<string>
                {
                    "ol[type|class|style]",
                    "ul[type|class|style]",
                    "script[language|type|src]",
                    "iframe[src|frameborder=0|alt|title|width|height|align|name|allowfullscreen|class]"
                };

                var defaultTableStyles = new Dictionary<string, string> { { "style", "" }, { "border", "0" } };

                config.Default()
                    // important, to edit the display names, use the /lang/TinyMceEditoryStyles.xml file!
                    .ContentCss("/static/epicss/editor.css")
                    .AddSetting("table_default_attributes", defaultTableStyles)
                    .AddSetting("extended_valid_elements", string.Join(",", extendedValidElements))
                    .AddSetting("media_live_embeds", "true")
                    .AddSetting("paste_word_valid_elements", "a[href],strong,i,em,h1,h2,table,h3,h4,h5,p,table,td,tr,span,style")
                    .AddSetting("block_formats", "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Blockquote=blockquote;Preformatted=pre")
                    .AddPlugin
                    (
                    "wordcount", "code", "hr", "anchor", "table", "advlist",
                    "epi-dnd-processor", "epi-image-editor", "epi-personalized-content",
                    "spellchecker", "searchreplace", "charmap", "importcss", "imagetools", "contextmenu")
                    .AppendToolbar
                    (" | undo redo removeformat | wordcount | alignleft aligncenter alignright alignjustify | code | hr anchor table advlist |styleselect");

                var simpleConfiguration = config.Default().Clone()
                .StyleFormats(
                            new { title = "Bold text", inline = "strong" },
                            new { title = "Red text", inline = "span", styles = new { color = "#ff0000" } },
                            new { title = "Red header", block = "h1", styles = new { color = "#ff0000" } }
                        );

                config.For<NewsPage>(p => p.MainBody, simpleConfiguration);

            });

            return;
        }
    }

#247689
Jan 26, 2021 16:17
Vote:
 

I am not sure how you are applying that formatting, but make sure your are clearing the formatting by using the "Clear Formatting"

Otherwise it will keep adding the formatting on that element.

#247744
Jan 27, 2021 11:30
Dileep D - Jan 27, 2021 15:55
The issue am having is I can't even get the new style formats in the drop down. I am trying to add a new custom format to add to the dropdown where it shows following Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Blockquote=blockquote;Preformatted=pre"
Vote:
 

I don't know if I have misunderstood things here. I have following things.

When I use the styleselect and provide the required css attributes in the editor.css, I see a new Format dropdown with my configurations and am able to apply the style. 

However now I have two dropdowns, one with paragraph, h1 , h2 etc and other dropdown as Formats as shown in above image from Praful. Wondering if there is a way to combine and just have only one dropdown with all the options.

#247801
Jan 28, 2021 1:21
Vote:
 

I have this code (used in current project), I am adding complete code so that you don't get confused. You just need is StyleFormats

config.Default().
                    Toolbar("styleselect removeformat | bold italic | epi-link image epi-image-editor epi-personalized-content | bullist numlist outdent indent | searchreplace fullscreen | table | help | code")
                    .AddPlugin("code")
                    .AddPlugin("table")
                    .AddSetting("valid_children", "+a[div|img|span|h3]")
                    .AddSetting("valid_children", "+div[script|div|img|span|h3]")
                    .AddSetting("extended_valid_elements", "a[class|href|video-url|data-video|style]")
                    .AddSetting("extended_valid_elements", "script[language|type|src]")
                    .AddSetting("extended_valid_elements", "#p")
                   .StyleFormats(
                        new
                        {
                            title = "Text Styling",
                            items = new object[]{
                                new {title = "Paragraph", block = "p"},
                                new {title = "Heading 1", block = "h1"},
                                new {title = "Heading 2", block = "h2"},
                                new {title = "Heading 3", block = "h3"},
                                new {title = "Heading 4", block = "h4"},
                                new {title = "Heading 5", block = "h5"},
                                new {title = "Heading 6", block = "h6"},
                                new {title = "Superscript", block="sup"},
                                new {title = "Subscript", block="sub"},
                                new {title = "Image Caption", block = "span", classes = "image-caption"}
                            }
                        },
                        new
                        {
                            title = "Image Styling",
                            items = new object[]
                            {
                                new {title = "Quarter Width", classes = "interior-page-quarter-width-image", block = "div", selector = "img"},
                                new {title = "Half Width", classes = "interior-page-half-width-image", block = "div", selector = "img"},
                                new {title = "3/4th Width", classes = "interior-page-three-quarter-width-image", block = "div", selector = "img"},
                                new {title = "Full Width", classes = "interior-page-full-width-image", block = "div", selector = "img"}
                            },

                        });

See the below screenshots

Let me know if that don't work. You can also apply the css on outer container using following

.BodyClass("body-copy")
#247804
Jan 28, 2021 2:40
Vote:
 

I don't know if its the version or something but I can't get this working. Styleformat apparently has no effect on my editor. Am using the Format and other dropdown currently as interim solution while I figure out whats up with my editor.

Also since your inputs atleast got me working with custom formats, I will accept your solution and continue investigating. Also while am here, the formats dropdown picks up the css class names from the editor.css, I tried to translate them into a friendly name using the TinyMceStyles.xml from Lang folder, it doesn't seem to apply. Checked the forum but nothing worked out. Do you happen to have any idea. Here is my XML. The dropdown shows cfa-section-header and not CFA Red Section.

<languages>
  <language name="English" id="en">
    <episerver>
      <tinymce>
        <editorstyles>                          
          <cfa-section-header>CFA Red Section</cfa-section-header>
        </editorstyles>

      </tinymce>     
    </episerver>

  </language>
</languages>

#247860
Jan 29, 2021 15:33
* 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.