Copy/paste dropping code/formatting in visual editor (2.8.4)

jeffrypilcher
(@jeffrypilcher)

14 years, 5 months ago

There are three separate types of problems I’ve repeatedly encountered since upgrading to 2.8.X.

============ FORMATTING LOST ============

In the visual editor, when copying something that would (in HTML) look like this:

<h3 class="subhead">My Text Goes Here</h3>

Then, when pasted, ends up like this:

<h3>My Text Goes Here</h3>

============ IMAGE ALIGNMENT LOST ============

In the visual editor, if I copy an image that has an alignment setting, like this:

<img class="alignright" src="http://thefinancialbrand.com/wp-content/uploads/2009/11/image-name.jpg" />

Then when I paste it, it drops the HTML that sets the alignment:

<img src="http://thefinancialbrand.com/wp-content/uploads/2009/11/image-name.jpg" />

============ IMG SRC PATH TRUNCATED ============

Also in the visual editor, whenever I copy an image, like this:

<img src="http://thefinancialbrand.com/wp-content/uploads/2009/11/image-name.jpg" />

Then when pasted, for whatever reason, the initial part of the path gets replaced with two periods/dots:

<img src="../wp-content/uploads/2009/11/image-name.jpg" />

This has created an irritating problem. WordPress automatically substitutes the “..” with a path for that day — “http://thefinancialbrand.com/2009/11/04”. Then when the post is assembled, WordPress tacks that in front of the rest of the IMG SRC path.

If you view the published page source code, the IMG SRC path looks like this:

<img src="http://thefinancialbrand.com/2009/11/04/wp-content/uploads/2009/11/image-name.jpg" />

But in the HTML editor, all you see is:

<img src="../wp-content/uploads/2009/11/image-name.jpg" />

As you can imagine, WordPress will not be able to find a “wp-content” folder in the “2009/11/04” path, so the image won’t load/display.

============ HELP, HELP!!!! ============

The only workaround is to copy-paste in the HTML editor — pain in the ass. I can’t believe that any plugin I’m running would affect so many things specific to the visual editor.

Has anyone else run into this? Can anyone recreate this issue? It’s maddening.

Viewing 13 replies - 1 through 13 (of 13 total)

esmi
(@esmi)

14 years, 5 months ago

Use the HTML tab for entering markup – not the Visual tab. And don’t switch back & forth or you’ll lose your markup again.

The Visual tab is not for markup.

Thread Starter jeffrypilcher
(@jeffrypilcher)

14 years, 5 months ago

I’m not using the Visual Editor for markup. I’m not that stupid, I promise. I’m showing you what the HTML would look like.

To be clear: I’m copying stuff that’s been formatted already in the Visual Editor. When I go to paste it — again, in the Visual Editor — it is dropping the formatting and/or truncating the IMG SRC. What I’m showing above is a BEFORE and AFTER look at the HTML. I copy/paste, see something is messed up, then look at the HTML and wonder where the markup went.

This happens when I try to copy/paste an image from one location to another within the same post.

This happens when I try to copy/paste copy I’ve assigned a certain CSS class to.

This DOESN’T happen when I copy/paste <em> or <strong> text.

mrizzle
(@mrizzle)

14 years, 4 months ago

I’m having the image path issue as well. I’m not sure if this this is version specific, but I’m running 2.8.6.

Johnny Bravo
(@herbiehysteria)

14 years, 4 months ago

this has been annoying me for days and i have lost all productivity cos of it. i design my pages in dreamweaver using AP DIV tags, when i preview in DW the layout is perfect, when i copy and paste the html code into the html editor and update my page, the ‘page’ appears all mangled and the layout is lost.

why cant WP just LEAVE HTML ALONE????

Mark / t31os
(@t31os_)

14 years, 4 months ago

When you view your WordPress post or page, you’re also loading whatever theme stylesheets you have and whatnot alongside that code, so the layout will not look the same (naturally – i’d expect that).

It’s inaccurate to assume what you see in Dreamweaver will be what you see on your WordPress post or page, that’s just not going to happen, because the environments with which they are being viewed is different.

Unless of course you’re testing all your Dreamweaver written pages with the WordPress stylesheet’s attached?… or your special DW written posts/pages are loaded without the theme header and/or related code (and/or styling).

I can write something in DW and have it show up on my page/post exactly as it’s shown in DW, providing (and this important) i cater my existing CSS to not effect the newly introduced code (unless of course i want it to).

If you want to give me an example of particular code (just a small snippet will be fine) that causes a problem, i’ll fire up Dreamweaver and do a basic copy and paste test.

I think it’s also important to remember, WordPress isn’t a fully fledged web developer editor, so it’s unrealistic (imho) to expect to behave like one, such as Dreamweaver (which is far from being entry level).

vtxyzzy
(@vtxyzzy)

14 years, 4 months ago

You might give Dean’s FCK Editor plugin a try. I have had better luck with it than with the WP editor.

Johnny Bravo
(@herbiehysteria)

14 years, 4 months ago

ive just tried the FCK Editor, the problem remains. the output from the DW html is fine and it is spaced out how it should be, its just on the edge of the screen instead on the edge of the content area, where it should be.

t31os_, please view my initial post from yesterday:

http://wordpress.org/support/topic/344212?replies=12

all the details and code are there, i am seriously about to cry because i have been stuck on this since SUNDAY! its been nearly four days.
please help
HH

Mark / t31os
(@t31os_)

14 years, 4 months ago

Herbie the responses you have in that thread are already sufficient in explaining why you experience the problems you do, although i’ll disagree there’s any need to stop using Dreamweaver, by all means use it, it’s a great application.

In my opinion (from reading the thread), the problem is with theme CSS inheritance, when you place this custom code into your page/post, you’re also nesting this code into whatever the theme is loading.

If you work with CSS or you’ve used CSS extensively you’ll understand how to fix this though. If not, i can only suggest you refer to some reading on CSS inheritance (it’s not something i can sum up in a forum response).

Johnny Bravo
(@herbiehysteria)

14 years, 4 months ago

t310s_
thanks for the reply. i DO have an understanding of CSS. u c, the ‘new’ CSS generated by DW for the AP DIVS is included in the html. WHERE does this need to go? in my theme’s style.css file or do i need to make a new stylesheet?

if the latter, which .php file do i need to edit so it ‘calls’ this new stylesheet???

i feel thick, but you guys are my only source of help right now
thanks!
Mark / t31os
(@t31os_)

14 years, 4 months ago
If you’re only loading this custom code, eg. some DIVS with custom CSS
..into one post or page , and it’s only going to used there , then it makes sense to use an external stylesheet..

You could do something like this in your theme’s header.php ..

If it’s a page:
```
<?php if( is_page('X') ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>./yournewcssfile.css" type="text/css" media="screen" />
<?php } ?>
```
…where X is the page’s ID or name.

If it’s a post:
```
<?php if( is_single('X') ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>./yournewcssfile.css" type="text/css" media="screen" />
<?php } ?>
```
…where X is the post’s ID or name

.. in both cases i’ve assumed you’re placing this file in your theme’s folder (maybe not ideal), but there’s no reason you can’t change the path to whatever you want (this really depends where you want to place it).

Also, even in doing so, your existing “theme” CSS is likely to have CSS that conflicts with your custom markup (it may not, but there’s a good chance), so you’ll have to look through the theme CSS and adjust anything that could conflict with the new code.

You could also just take a copy of your theme’s CSS, load this into dreamweaver as an additional stylesheet, then you can debug the conflicts right there…
ragnaripea
(@ragnaripea)

14 years ago

Hmm, I see the thread got a little off-topic and I don’t see any real solution to the copy/pasting of the included markup of the text in the WP Visual Editor.

I have the same issue, I have included specific classes to my page (ul/li/h2 etc. classes for a specific page) and when I’m copying it into a new page, it only copies the mark-up for the text (ul/li/h2 etc.) but not the classes they had with them.

To make it more clearer, the original html of the page is “<ul class=”a_custom_list”>” right? But the after I copy it in the Visual Editor, and paste it in a new page in the Visual Editor, it pastes “< ul >” without the class=”a_custom_list” …

It does work if I copy and paste in HTML Editor but that isn’t the best option as I’m building a multilingual CMS kind of site and the people that will start using it (ie. copying the original English page and translating it to German) don’t know much about html.

How do I fix it or work around it somehow?

Thread Starter jeffrypilcher
(@jeffrypilcher)

13 years, 6 months ago

I agree w/ragnaripea…this topic has veered off-course.

A year and 2 versions later, this is still a huge nuisance. The visual editor is **STILL** stripping markup when copying/pasting. This happens when copying/pasting anything with formatting markup, internal links, and IMG links.

I have to remember to comb through each post before publishing and find/replace the “..” with “http://thefinancialbrand.com” It’s an extra step in my workflow, and a major pain in the ass. I’ve published a number of articles where I forgot to replace the “..” and it breaks links to my images, leaving readers with the “?” missing image box.

This is a very annoying bug that clearly needs to be fixed.

Thread Starter jeffrypilcher
(@jeffrypilcher)

13 years, 6 months ago

NOTE: This has nothing to do with CSS, Dreamweaver or copying/pasting from Word (or other editing program).

This is a problem that is limited and specific to generic WordPress installs.