HTML Editor(WYSIWYG editor) for eBay Auction Templates

Want better looking auctions? Can't get the eBay editor to work?
Don't want to use complicated webpage authoring tools to create code that won't work on eBay?
Don't feel comfortable doing all your editing on the listing page?

Spice up your auctions with a tool that creates eBay-compliant code.
It works best with Internet Explorer 6, Netscape 7, and FireFox 2.
We will continue over time to improve it as best we can.

Quick Start

Erase the text and start typing your own.

or Select a layout to create your own New Page.

or clear the page, create a Pretty Border, and paste it into the code window.

or clear the page and paste your own simple template (or one from the list below) into the code window.
Some features like stylesheets, scripts, and mouseovers may not show or work in the editor, but should display in the Popup Preview window. So be sure to preview your template a few times to make sure it works before attempting to edit it. You can preview as frequently as you need.

Title

Sample Heading

arial,
verdana,
georgia,
trebuchet,
comic,
times,
courier

Erase this text and type your own, or see the QuickStart guide above. Take ordinary text and use the text tagging buttons to enhance your description with simple bold, italic,
or underline text. Take it a step further by highlighting all your text and choosing a font face from the drop list.
Add color to your headings by highlighting the word and selecting a color from the palette.
Don't overdo it! A little color goes a long way and too many colors can look amateurish.
Then add some headings here and there to break up the paragraphs and select either a heading or a font size from the dropdown lists.

To add a hyperlink, first type and highlight the clickable word
and then use the "link" button in the tool bar to create a new link.

your code to the PracticeWriter where you can post it and share the link with others.

Copy Code

Click the "Code View" tab to view the new code at any time.

Right-click and choose "select all" or drag your mouse
across the code while holding down the mouse button, highlighting
the code within the window above.

Right-click and select "copy," or use the keys "Ctrl-c" or "Ctrl-Insert,"
to copy the code. Or use the Copy option on the browser's Edit menu.

Paste the code into your destination page. On the destination page,
you may have an Edit-menu option to "paste," or you might right-click and
select "paste." The destination page may also support the keys "Ctrl-v" or
"Shift-Insert" for pasting.

Mini Templettes: Scroll through the list to select a templette. Copy the selected code from the yellow code window into the CodeView above.

Spring Templates: Scroll through the samples and click on a selection. A new page will load in the window below. Copy the code from the box at the top of the new page into the CodeView above. Click the template button above to return to the preview list.

Instructions

New Page: Select a Page Format if you want a different background color or column arrangement. The popup screen provides some layout options and allows you to change the color and sizes of the background and borders. Using this option will erase the original page content, but content added to a selected template will be preserved if you go back to change page settings.

Select a format: The page setup has a set of table formats across the top. Select a layout.
Set colors: Click a border and select a color from the palette or dropdown list, or enter your own color in the palette input box and click "apply".
Set Margins: Margins and Border sizes can be changed by editing the numbers and clicking apply, or by dragging a border or margin in the sample box until the size suits you.
Inscreen Preview: There is a preview pane to display the colors and thicknesses of the borders (but not the page layout).
Note that if the border and background are set to the same color, and if the 3D option is off, the text cells will appear to float on the background.
Use or Cancel: After modifying the parameters, click OK to use the new page settings.

-or-
Create the border you want at the pretty borders site or select one from the template buttons above. Click the "Clear page" button on the editor and then flip to the "Code View" screen to paste the border code. Flip back to the "Editor" screen and add your description. The Page Format option will not preserve data or settings in an imported border or template, so shouldn't be used after applying your own template.

Add your Text: Type or Paste your text. Depending on your browser, you may be able to use keyboard shortcuts, right-click menu, or the edit menu at the top of the browser to paste code or text into the page.

Save and Restore: While making changes to your template, you can make intermediate backups as a reference point for restoring if you make a mistake. The backups are not automatic - you must click the save button whenever you make changes worth keeping. Then if you make a mistake, or decide you don't like the changes you made, you can restore the last-saved version and try again.
It is always a good idea to click the save button whenever you load your own template, as that will make it simpler to reload. Note that the copy is only temporarily saved within the page and will be lost when you close out.

Create Headings: Highlight your titles and select your Heading styles from the dropdown list before adding any other colors or styles. Using styles from the list will assure that the headings have good gaps between the heading and text. For inline headings, apply a font size from another dropdown list to normal text instead of using the heading options.

Text Color: Add color to your titles or text. Highlight your text and select one of the existing palette colors, or click the paint icon to open the popup rainbow palette with thousands of colors. Conveniently set up all the text colors in advance of using them by filling the empty cells on the toolbar palette with your own colors. Double-click on an empty cell to get the popup rainbow palette, where you can select a new color for the cell (and for any currently selected text).

The popup rainbow palette also includes a dropdown list of named colors and a sidebar changes the darkness of a color. Text colors from the popup rainbow palette usually need to be darkened for use on a light background and lightened for use on on a dark background.

Additional Formatting: Highlighted text can be set to bold, italic, underline, or strikethrough.

Lists: Lines of text can be set to a bulleted or numbered list. A whole sentence will be modified, so you can select an entire block of lines to be bulleted, or select each line individually to get more space between each line.

Alignment: The selected paragraph may be aligned left, right, center, or fully justified. Keep in mind that centered text and right-aligned text are very difficult to read and should be reserved for titles, captions, and short lines.

Indent: Paragraphs can be block-indented any number of times to the right, or can be undone a step at a time to the left.

To indent and tab text to make small tables and columns, use the Tabbed Text option on the Headings list. Do not use that option for paragraphs, as the page will stretch too wide in some browsers. Be sure to use the popup preview window to make sure the results are as you expected.

Horizontal Rule: Don't use that long run of dashes to draw a line! A full-width horizontal line will be inserted at the cursor, and the content on both sides of the cursor will shift above and below the line. In Internet Explorer, you can resize its length by clicking on the line and dragging the end pullers.

Pictures: Pictures must already be hosted online before they can be added to the URL slot on the popup screen. A preview button will let you verify the image is available. Choose a left or right alignment option if you would like text to flow around the image, or, after adding a picture, you can center it on its own line using the "center" button on the toolbar.

Links: Link to your other pages. Highlight the text or image that will be clicked. In the popup window, add the destination URL (web address) for that link.
To modify an existing destination, place the cursor in the text and click the link button to display the existing link for modification.

Merry's Playground: For the real enthusiasts, there is a drop open panel with a text scratchpad/clipboard area and three storage areas. Store your edited template in one of the panels and continue experimenting with your page.
Or pull three different pages into the editor and move each one up into a storage panel where you can swap between them to copy and paste sections. The "Store" button moves a copy of the active page into the storage panel, and the "Use" button moves a copy of the stored page back into the editing window. A one-chance undo reverses the operation. They all have a preview button for sharing the popup Preview window.

Send to Practice Writer: Practice Writer is an online HTML practice board where you can preview code and store it online for others to see. Use this option to send your code to www.PracticeWriter.com where you can post it and pick up the link to share with others.

Adding your own template code: Click the "Clear page" button and then flip to the "Code View" screen to paste the template code. Flip back to the "Editor" screen and add your description.

Caveats: the editor, by nature, will kill headers and body tags for eBay use, and therefore does not support full webpage editing.

Problems? There are still many bugs to iron out. If a feature fails to perform, the code may not have successfully loaded on the first pass. Sometimes holding down the shift-key while refreshing the page will get past obstacles (but may also clear the screen of any editing data).
Avoid using the back button to return to the editor from another page. The page will not fully load. If this happens, you will need to hold down the shift-key and perform a full page refresh.

Note: Do not test your dynamic (scripted) page content in the editor, as you will lose your editing data if scripts modify the page content or the page opens to a new location. Instead, test your content from the popup Preview window.

The different browsers have different idiosyncracies and perform differently depending on where the cursor is located on the page. Should you encounter confusing results, it may simply be cursor placement.

Designer's Corner

Designers: Do you want to send your templates directly to this editor so your customers can edit them?
Choose how you want to present the template to the user and paste one of these options into your page:

Let the user see the whole template and then click to send the fully displayed template to the editor:

Display the resulting code from a form filler or template maker and click to send the code to the editor.
Send displayed template CODE to the editor:

Hide the code and just present the user with an image of the template. Click to send the hidden code to the editor:

To share multiple template links on your source page, replace toEditor
with toEditor1, toEditor2, etc,
in each set that is added to the page, so that each set is uniquely named.

These codes won't work in emails, so you must have access to a hosting site, or can create a page on the
PracticeWriter, to transfer the template to the editor.
The PracticeWriter will allow you to change your page content as long as you preserve your cookies.
Or you can set up a username there to manage (edit/delete) your posted codes.