November Happy Hour will be moved to Thursday December 5th.

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

Vote:
 

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(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
Vote:
 

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
Vote:
 

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
Vote:
 

Johan, I formulated question wrong.. Not to remove it, but to replace it with other tag instead. 

I want to have 

<a class="link-to-action">my text here</a>

instead of 

<p><a class="link-to-action">my text here</a></p>

On the other hand, ability to replace it with div instead of p is also handy. Wouldn't you agree?

#197538
Edited, Oct 05, 2018 14:09
Vote:
 

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
Vote:
 

Add this 

.AddSetting("forced_root_block", false)
#197583
Oct 08, 2018 17:03
Vote:
 

Nope. That only devoids me of text container. 

#197727
Oct 11, 2018 14:13
Vote:
 

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
Vote:
 

I understand now that my original idea was bad design idea. It is not a good practice to have <a> element standing alone. 
<p> one text </p>
<a> next line </a>
<p> third line </p>

Instead one should have it as <p>next <a>line</a> </p> as a second element. This could be addressed through CSS. While doing that change what I labeled as a quirck is related to having custom styles in my definition. So lets say I want to add class to anchor tag and that class should have a different text color. As described here and here

My workflow would be something like this:

1) original text is  ->  <p>This is my text with link that points to something.</p>       
    I select 'link' and want to make it anchor tag with class 'action' with background '#bbb'
2) I select custom style and apply it on that text
3) sweet I have it working
4) I figured out I made a mistake and 'something' was supposed to be selected and not 'link'
5) no matter what I click I cannot remove <a> tag around 'link'. I can remove class. I can remove style element. 


As long as I don't include styles element in my initialization I can click on the same element with the same style (call to action link for example) and the <a> tag will be gone. Even the class will be gone. As soon as the styles = new {background = "#bbb"} is appended to the element initialization, it breaks. I cannot remove nor element nor class nor style. I have added removeformat button to the toolbar but that only removes classes and style. Wrapping element won't budge.

Even here if one applies custom format 'badge' on any word and wants to revert selection it won't budge...



#198452
Oct 29, 2018 11:07
Vote:
 

I have missed to check one thing earlier and now I have found the solution. 

This code actually works for me.

config.Default()
         .AddEpiserverSupport()
         .ContentCss("/Content/editor.css")
         .StyleFormats(
                 new {title = "Call to action (link)", inline = "a", classes="action"},
                 new {title = "Image link (link)", inline = "a", classes = "image-link"},
                 new {title = "Header 3", block = "h3"},
                 new {title = "Header 4", block = "h4"},
                 new {title = "Normal", block = "p"});

The actual part that was missing was line of code that points to the editor.css.

The ContentCss clause.

That line of code also takes care of custom styling in the dropdown menu and there is no need to introduce styles element in any of the initialization lines, although it was stated in documentation as a preferred way of setting styles to the drop down menu items.

Behavior now is: once a part of text was selected and decorated with any of the styles of formats it can be removed (style, class or selector) by simply selecting the same style it had or by simply clicking 'normal' again.

#198471
Oct 29, 2018 13:24
Vote:
 

I have missed to check one thing earlier and now I have found the solution. 

This code actually works for me.

config.Default()
         .AddEpiserverSupport()
         .ContentCss("/Content/editor.css")
         .StyleFormats(
                 new {title = "Call to action (link)", inline = "a", classes="action"},
                 new {title = "Image link (link)", inline = "a", classes = "image-link"},
                 new {title = "Header 3", block = "h3"},
                 new {title = "Header 4", block = "h4"},
                 new {title = "Normal", block = "p"});

The actual part that was missing was line of code that points to the editor.css.

The ContentCss clause.

That line of code also takes care of custom styling in the dropdown menu and there is no need to introduce styles element in any of the initialization lines, although it was stated in documentation as a preferred way of setting styles to the drop down menu items.

Behavior now is: once a part of text was selected and decorated with any of the styles of formats it can be removed (style, class or selector) by simply selecting the same style it had or by simply clicking 'normal' again.

#198472
Oct 29, 2018 13:24
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.