CODEWITHSUNDEEP
wysiwygmarginparagraphepiserver
daGUY
daGUY

Reputation: 28773

Prevent EPiServer from wrapping content in <p> tags

I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.

Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!

It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.

This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.

Upvotes: 2

Views: 4090

Answers (4)

daGUY
daGUY

Reputation: 28773

I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!

Upvotes: 0

Dave Brace
Dave Brace

Reputation: 1809

If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.

More info at the link below:

http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F

EDIT: My comment below answers his question better.

Upvotes: 0

Tchami
Tchami

Reputation: 4787

As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    myEditor.InitOptions["force_p_newlines"] = "false";
}

or

<script type="text/javascript">
tinyMCE.init({
    force_p_newlines: false
});
</script>

Upvotes: 1

Johan Kronberg
Johan Kronberg

Reputation: 1086

You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.

I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.

Upvotes: 0

Related Questions