Why is my Custom Page text formatting out of control?
posted this on December 09, 2010 16:04
Whenever using WYSIWYG (What You See Is What You Get) editors throughout the site, be careful not to copy and paste content straight from a Microsoft Word document!
A lot of behind the scenes formatting is usually copied across from Word documents which can play havoc with your text layout in the PhotoMerchant Admin Interface. If you need to copy and paste content from a word processing application like Word, it's best to first paste the content into a simple editing tool such as TextEdit (Mac) or Notepad(PC) - and then copy and paste a second time into the WYSIWYG editor in order to strip out all of the unnecessary formatting.
If you think your formatting could be suffering after copying text from Micorsoft Word, here's a method to check and quickly correct the problem..
1. Click on the Website tab
2. Click on the Custom Page title
3. Now scroll down the page to the WYSIWYG editor and copy all the desired text from the WYSIWYG editor and paste it into a fresh TextEdit (Mac) or Notepad(PC) document.
(Be sure to take note of any formatting and hyperlink details as these will need to be manually re-applied to your text later)
4. Now click on the HTML button.
Even if you're not that familiar with HTML code you may be able to see that in this window there is an excessive amount of uneccessary code that has been brought across to your PhotoMerchant editor as a result of copying and pasting from a Word document. If you see a similar volume of what looks to be format related code then there's a good chance we've isolated the cause of you formatting woes!
5. Select all of the code in the HTML source editor window and delete it!
6. Once the window is clear, click the Update button.
7. Now back on the editor page, click on the Save Settings button to confirm the deletion.
8. Now from TextEdit / Notepad copy the text and paste it again into the PhotoMerchant WYSIWYG editor.
9. Use the Edit CSS Style button to reformat your text.
10. Use the Insert / Edit Link button to re-apply any hyperlink behaviour to your selected text
11. Don't forget to save your changes using the Save Settings button at the bottom of the page.
12. Click the HTML button again to check whether there has been a change to your HTML code.
Again, HTML coding may not be your thing but with any luck you will be able to see a far neater and more logical layout of code representing your custom page text.
13. Dont change anything thsi time around.. just click Cancel to get out of there.
14. Finally go and have a look at the Live Site to check whether the changes you've made have improved the layout of your custom page text.
- Done! -
Note: This formatting behaviour is very dependent on the web browser being used by the end-user. If for example have copied text from Word into your PhotoMerchant editor but you don't see any negative effects on your site, this does not necessarily mean that everything is OK from your customers' view-point. Often Firefox will render text correctly while Internet Explorer displays errors or no text at all!
If you think you may have originally copied your text directly from a Word document it would be worth testing your site using Internet Explorer and following the above procedure to be sure your customers are not encountering errors.