Using Copy&Paste in Artisteer
We all want a shortcut in life and using copy&paste in Artisteer often appears to be the easiest way to add content to a project. This is a powerful feature but if you overuse it, it can make for very long days.
If your project type is ‘Website or Blog’, Artisteer lets you create and edit content directly in your template. If you’re using a CMS, like WordPress, or Joomla, you must add your content in the CMS. Either way, you might be tempted to copy&paste content from other sources, such as your favorite Word Processor, like Microsoft Word. Sometimes this works, sometimes it doesn’t; or, sometimes your pages look okay in one browser but not okay in another.
We’ll look at some examples, but first you need to be aware that Artisteer templates, including content , if any, follows some very strict rules so that your web pages are compatible with many browsers. Whenever you use copy&paste, you always risk breaking these rules, and Artisteer cannot fix these errors automatically. We’ll illustrate this below with Microsoft Word but it really doesn’t matter where you copy the content from.
How To Copy&Paste
Within a ‘Website or Blog’ project, just right click the mouse wherever the cursor is in the Preview Area or HTML editor, and select from the context menu. You won’t find this menu in a CMS template because you can’t paste content directly in the template.
Artisteer also supports the keyboard shortcuts: Ctrl+C, to copy selections to the clipboard and Ctrl+V to paste content from the clipboard.
Copy&Paste from Microsoft Word
From Word into Artisteer
The color looks similar but the font and size doesn’t look quite right. Let’s look at the HTML source:
<h2>The quick brown fox jumps over lazy dog</h2>
And H2 is:
We cheated here a bit just to make a point. We selected some text in Word defined as ‘Heading 2’. When we copied this to Artisteer, it didn’t copy the text plus the Word ‘Heading 2’ style, but rather it just copied the text as an HTML H2 element. Therefore, the way the text appears on the page is in H2 style. So what’s the H2 style? It’s whatever the H2 style is, as defined in Artisteer (Arial 22).
So, in this case, the pasted text looks similar, but the formatting is actually different.
Let’s start over and just copy some text.
<p class="MsoNormal">The quick brown fox jumps over lazy dog</p>
The HTML looks better but what’s "MsoNormal"? This class tells Microsoft Word how to format the text but it doesn’t mean anything to Artisteer because it’s a custom rule that only Word knows about.
Most custom styles in Word have special formatting rules which won’t mean anything to Artisteer, or any browser either. Microsoft Word has lots of these special rules and sometimes this doesn’t matter but Word doesn’t follow the same standard for HTML that Artisteer does so beware the code you copy can cause your pages not to appear correctly in the browser. Ironically, this usually affects different versions of Internet Explorer more than other browsers.
In this example we just copied some text and it probably won’t break anything, but the ‘rule of thumb’ is this. If you copy your content from Word and your web pages don’t appear correctly, first validate your web page with the link below, and then look for and eliminate any code that looks like a Word enhancement (e.g. starts "Mso"). In Artisteer, you can edit the HTML using the Edit tab (Edit→HTML Source), but just make sure that you select the right Row and Cell in you Content Layout. Unless you switch to Page editing, you only see the HTML for the Cell you selected. If you’re using Artisteer.net, or another CMS, such as WordPress, or Joomla, use the CMS editor to correct your code.
HTML Validator
From Word into Artisteer using the HTML Editor
You can also copy&paste content directly in the HTML editor, but look what happens:
The quick brown fox jumps over lazy dog
The content is pasted as text without any formatting.
You could also do the same thing in the Preview window (rt click the mouse); we just didn’t show it to you before.
But, wait a minute! The text doesn’t have any formatting. There are no HTML tags that describe what the text is, where the text is, etc. It might appear correctly in Artisteer’s Preview, and it might appear correctly in your browser but in general, with HTML, you’re not supposed to just throw some text in wherever you want. That is, if you paste content as ‘text’, you should make sure the content is formatted correctly (e.g. within paragraph tags: <p></p>).
Paste into Joomla
In Joomla, and other CMSs, you can also paste content from Word:
Just like in Artisteer, the text is pasted is into your content in different ways depending on how the text was created in Word:
Word Heading:
<p>
<h2>The quick brown fox jumps over lazy dog</h2>
</p>
Again, H2 style is whatever H2 is in your Artisteer template.
Word Text:
<p>
<p class="MsoNormal">The quick brown fox jumps over lazy dog</p>
</p>
"MsoNormal" is something special to Word. Artisteer knows nothing about it and neither does your browser.
Paste into WordPress
WordPress is a bit different from Joomla and Artisteer. In the WordPress editor there are two separate options for pasting content from the clipboard; one for pasting the content as text, and one for pasting the content from Microsoft Word
With Artisteer and Joomla when you paste content from Word, this often copies HTML that has been added by Word (e.g. see "MsoNormal" above). As we mentioned before, this added HTML can sometimes break your code so your page doesn’t appear correctly in the browser. WordPress used to work this way but then they added a feature to the editor to clean up the code inserted from Word. Besides that this worked with mixed results, this created other problems because people often inserted their content without using this special option. That is, they pasted the content directly in WordPress instead of using the ‘Paste from Word’ option. This has been a known problem with WordPress for many years. In WordPress 3.3.1, the default is now ‘Paste from Word’ so you don’t get the type of code you see with Joomla, but there are still issues:
Word Heading:
<h2>The quick brown fox jumps over lazy dog</h2>
The heading is wrapped with ‘non break space’s. Make sure that this doesn’t break the layout of your page.
Word Text:
The quick brown fox jumps over lazy dog
Again, a ‘non break space’ is added to the text. Also, the text is not included in another layout (e.g. in Joomla it appears in a paragraph, <p>). Make sure that you when you paste text from Word into WordPress that the text goes in the proper layout element. Although, this might appear correctly in the browser, the text should belong to a layout element, like a paragraph <p>, or division <div>.