Can not handle tag in wysiwyg editor

Question

The  is the default root element of content in most of WYSIWYG editors (I use tinymce) where  can not contain a block element according to this . When my content is only a single table there is a difference between page source and the rendered elements:

Source of page:

   <div class="generalbox">
   <p>
   <table><tr><td>something</td></tr><table>
   </p>
   </div>

inspected Element (in both Chrome and Mozila Firefox):

    <p></p>
    <div class="generalbox">
    <table><tr><td>something</td></tr><table>
    </div>
    <p></p>

This causes a white gap before and after the content. I used the following css rule to omit the gap effect but obviously no success:

.generalbox  p:first-of-type {
    margin-top:0;
}

.generalbox  p:last-of-type {
    margin-bottom:0;
}

How should I remove the gap effect? CSS or a server side code or something is WYSIWYG?

Julius Dzidzevičius · Accepted Answer · 2018-03-13 10:39:44Z

1

Use :empty selector to target those WYSIWYG's empty p elements:

p:empty {
  margin: 0;
}

You can also combine with :not() to select not empty p elements:

p:not(:empty) { }

answered Mar 13, 2018 at 10:39

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

i7nvd · Accepted Answer · 2016-12-09 14:32:38Z

0

TinyMCE has an available plugin that allows you to edit the code of your output. Is that option available to you? If not, try this:

.generalbox {
    margin-top: -10px;
}

.generalbox + p {
    margin-bottom:0;
}

answered Dec 9, 2016 at 14:32

i7nvd

1,3182 gold badges10 silver badges24 bronze badges

2 Comments

Ali Sheikhpour Over a year ago

have html editor button in tinymce but the operators are not professional enough to edit the codes. Besides... Where does 10px come from? is it the default margin of '' element?

i7nvd Over a year ago

10px is variable - use whatever margin the empty produces.

Collectives™ on Stack Overflow

Can not handle <p> tag in wysiwyg editor

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related