Removing p tag around one line text in TinyMCE v2.6.3

Member since: 2012
 

Hi,

v1 one could override this by having custom styles. I have read blog or two and developers documentation but I couldn't find if there is a possibility to actually do it in v2. There was one thinkg that could potentialy be done and that is to set 

 force_p_newlines : false

but that would leave me with no p tags whatsoever.

Moreover my implementation has a quirk now. Once I select style, let's say a.action it cannot be reverted to normal without removing the whole section.

context.Services.Configure<TinyMceConfiguration>(config =>
            {
                config.Default()
                    .AddEpiserverSupport()
                    .StyleFormats(
                        new {title = "Normal", block = "p"},
                        new {title = "Header 3", inline = "h3"},
                        new {title = "Header 4", inline = "h4"},
                        new {title = "Call to action (link)", inline = "a", classes="action", styles = new { background = "#84216b", color = "#fff"}},
                        new {title = "Image link (link)", inline = "a", classes = "image-link"})
                    .AddPlugin("media wordcount anchor code table link")
                    .Toolbar("epi-link unlink image epi-image-editor media epi-personalized-content | cut copy paste  | fullscreen | tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | bold italic | bullist numlist | formatselect styleselect | undo redo | code ")
                    .AddSetting("image_caption", true)
                    .AddSetting("image_advtab", true);
            });

Did I miss something here?

Is the only solution to change css on a site level to accommodate for p?

#197520 Oct 05, 2018 10:55
  • Member since: 2007
     

    What is the usecase for having text without a paragraph? Seems semantically wrong to me. If you want to remove the paragraph margin I would suggest to have a paragraph CSS class that removes it.

    Regarding the quirk, could it be that you're using inline styling? That is bad practice to start with, and maybe TinyMCE is not smart enough to revert the styling.

    #197529 Oct 05, 2018 13:38
  • Member since: 2015
     

    I think for the quirk, you need to add the "selectors" parameter to your style formats.  Without this, only text that has standard formatting can take the new format.  The value within the selectors parameter needs to be extended to cover any styles you allow to be applied within TinyMCE.

    new { title = "Header 3", selectors = "p h3 h4 a", block = "h3", classes = "" }

    #197535 Oct 05, 2018 14:00
  • This message was deleted by Goran Sneperger at Oct 05, 2018 14:09.
  • Member since: 2012
     

    Darren I have tested a little bit your suggestion.

    Quirk is as follows. If I select one liner text and give it a link to action as I have it in my original post, then publish a page and finally inspect TinyMCE editor I can see that <p> tag is again present.

    I have added selectors as follows.

    .StyleFormats(new {title = "Normal", block = "p", selectors = "p a h3 h4", classes="", styles = new { background = "#fff", color = "#000" } },
                           new {title = "Header 3", block = "h3", selectors ="p h3 a h4", classes = "",styles = new { background = "#fff", color = "#000" } },
                           new {title = "Header 4", block = "h4", selectors = "p h3 a h4", classes = "", styles = new { background = "#fff", color = "#000" } },
                           new {title = "Call to action (link)", block = "a", selectors = "a", classes="action", styles = new { background = "#84216b", color = "#fff"}},
                           new {title = "Image link (link)", block = "a", selectors = "a", classes = "image-link"})

    But because anchor tag is now wrapped in <p> only that tag gets affected. All in all I end up with this

    <p class="" style="background: #ffffff; color: #000000;"><a class="action" style="background: #84216b; color: #ffffff;">dghfhfgh</a></p>
    #197540 Oct 05, 2018 14:32
  • Member since: 2013
     

    Add this 

    .AddSetting("forced_root_block", false)
    #197583 Oct 08, 2018 17:03
  • Member since: 2012
     

    Nope. That only devoids me of text container. 

    #197727 Oct 11, 2018 14:13
  • Member since: 2010
     

    Goran, you shoud look at the TinyMCE documentation what is supported and how something is done in the Tiny editor.

    EPiServer.CMS.TinyMCE package 2.x+ uses the TinyMCE editor 4.x (currently 4.7.13). The documentation on Tiny v4 states that the force_p_newlines is deprecated and forced_root_block should be used instead like Iliyas already suggested. Please read the note on forced_root_block.

    #197796 Oct 13, 2018 21:06