How to troubleshoot content styles in the WYSIWYG editor and paste as plain text

How to troubleshoot content styles in the WYSIWYG editor and paste as plain text

Is the text on your page not matching the text on other pages? Is the text on your page not matching your design? You may have pasted bad html from a document or from another website and that is likely what is causing the problem. Here's a quick video on how to troubleshoot funky looking text on a page that you are editing.

Use Control+Shift+V (or Command+Shift+V) on your keyboard to paste as plain text and then style your content using the headings and format option in the editor.



Transcript:

0:01 Hi everyone. So in this video we're going to be talking about the importance of pasting as plain text. So why is that important?

0:10 You're wondering well, if we look here at this test page, we see here that I have some content here in this gray box.

0:17 That's what I want it to look like. That's what it should look like. And down below in the white, we have some content that is the same content, except there's some formatting issues going on here.

0:29 Our intro text is not quite the same, and our H2 is definitely not the same. So we're gonna need to figure out what went wrong here when we copied our content from our source document.

0:43 So let's take a look. I have my backend page here. I'm gonna scroll down here a bit. I'm gonna add in another block to show you guys what's going on.

0:55 So I have my source document here. There's the text I want. I'll copy it and you may be tempted to just simply command or control V all that content.

1:08 Okay, cool. It's in there. I'll fix up some of the spacing and I'll apply. You know, I want this to be pre-title.

1:16 I want this to be my intro text. I can make my button apply that. Here we go. Update it. All right, let's refresh our front end page.

1:35 And, you know, it still doesn't look the way I want it to. So what's going on here? Well, if we look here on the back end and our visual text here, you'll see that there's some spans and some font weights that have transferred over from our source document here, this page.

1:53 So we don't need any of that stuff that can really mess up our formatting. 

1:58 There's a couple different things you can do if you find yourself in this situation. There's simply if we just copy or just highlight our text here, there is this clear formatting eraser right here, which if we click that, it gets rid of all those nasty spans.

2:17 You know, sometimes though you will have to go back in, apply those styles. We may need to fix our button here.

2:28 Or alternatively we can go back here. Copy. I'll make some space down here. And instead of just straight up command, control V for paste, I'm gonna do a command shift V or a control shift V.

2:45 So let's space out our content here, like we had, let's apply those same styles like that are H2. Want that to be intro text.

2:57 Let's do our button again, 

3:03 We'll update that and let's do a refresh. Ah, see, so this was the one that we did with our clear formatting and kind of adjusting some of the styles.

3:17 And then this was our paste as plain text, which was that command or control shift V. And as you can see, this is the no-no version down here, but it closely and identically matches the version that we want up here.