November Happy Hour will be moved to Thursday December 5th.
November Happy Hour will be moved to Thursday December 5th.
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.
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 = "" }
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?
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>
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.
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...
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.
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.
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
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.
Did I miss something here?
Is the only solution to change css on a site level to accommodate for p?