Make WordPress Core

Opened 10 years ago

Closed 5 years ago

Last modified 5 years ago

#28444 closed defect (bug) (worksforme)

TinyMCE stops adding paragraph tags to text if you paste text with div tags before starting to write

Reported by: diegoe's profile diegoe Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.9.2
Component: TinyMCE Keywords:
Focuses: Cc:


In the Post Editor (Visual mode) if you paste innocently looking text (from a website) that contains <div> elements inside, you'll have the auto addition of <p> elements to your text broken.

New lines will be inside <div> elements instead of <p> elements.

To break the editor:

  1. Select and copy text that is spaced (or just surrounded) with <div> elements.
  2. Paste that text into the Post Editor (Visual).
  3. Hit Enter and try to go on with your post.

The text you add, no matter how much you hit enter, will be all surrounded with <div>, not with <p>

Expected Result:
The text you add behaves as usual and has no tag added, but, of course, has automatic <p> tags when shown in your site.

I can reproduce with trunk. Note that the <div> elements I'm using to test have no style or anything.

See attached HTML test case, you can use the scholarly lyrics in it as a test.

I'm adding some screenshots too.

Attachments (3)

visual-editor-innocent-text.png (57.3 KB) - added by diegoe 10 years ago.
Visual Editor: Text looks pretty innocent.
text-editor-not-so-innocent-code.png (68.4 KB) - added by diegoe 10 years ago.
Text Editor: The actual content is pretty broken. Spacing between lines will fail.
test-div-paste.html (470 bytes) - added by diegoe 10 years ago.
HTML Test for <div> elements

Download all attachments as: .zip

Change History (8)

10 years ago

Visual Editor: Text looks pretty innocent.

10 years ago

Text Editor: The actual content is pretty broken. Spacing between lines will fail.

10 years ago

HTML Test for <div> elements

#1 @tellyworth
10 years ago

  • Version changed from trunk to 3.9.2

I was able to reproduce this in both 3.9.2 and trunk.

To clarify the steps, here's what I did:

  1. Switch the editor to Text, paste the HTML.
  2. Switch to Visual.
  3. Move the cursor to the end.
  4. Type a few lines of text.
  5. Switch back to Text mode - the lines I added in step 4 are wrapped in divs.

#2 @iseulde
9 years ago

Related: #31219.

#3 @programmin
9 years ago

Yes, divs should work a lot better than they do in Wordpress currently - see for example #31263
Hope this can be fixed, as even GMail doesn't use paragraph tags, and it's quite common to find divs rather than p tags on sites.

#4 @programmin
7 years ago

This is still super annoying even in 4.8.2. Divs should be much better supported in Wordpress since any shortcodes that outputs a div tag within a line of text will go out of the p tag and not get any styling or coloring of <span tag that should be around it, as it is invalid html if you use p instead of div containers.

#5 @azaozz
5 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

This is (looks like) an architectural decision in TinyMCE. It can only be fixed/changed upstream. In that terms it is "working as expected" in WP. Furthermore it is now superseded by the block editor. The blocks use either <p> or <div> as appropriate.

Last edited 5 years ago by azaozz (previous) (diff)
Note: See TracTickets for help on using tickets.