WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 2 years ago

Last modified 2 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 Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.9.2
Component: TinyMCE Keywords:
Focuses: Cc:

Description

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.

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

Download all attachments as: .zip

Change History (8)

@diegoe
7 years ago

Visual Editor: Text looks pretty innocent.

@diegoe
7 years ago

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

@diegoe
7 years ago

HTML Test for <div> elements

#1 @tellyworth
7 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
6 years ago

Related: #31219.

#3 @programmin
6 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
4 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
2 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 2 years ago by azaozz (previous) (diff)
Note: See TracTickets for help on using tickets.