HTML Editor for Listing Description

Introduction

The HTML Editor for Listing Description plugin allows you to create richer and more visually appealing listing descriptions. Instead of using a basic text field, you can format the listing description using tools such as:

• Bold, italic, underline, and strikethrough
• Text alignment
• Different fonts and font sizes
• Text and background colors
• Headings and titles
• Bulleted and numbered lists
• Hyperlinks
• Images
• Tables
• Block quotes
• HTML source editing

This allows you to better organize listing information, highlight important details, and create more professional-looking listing pages.

The formatted content created with the HTML Editor is displayed on the public listing detail page.

Before You Begin

Before using the HTML Editor for Listing Description, make sure that:

• You have access to the eDirectory Site Manager Area.
• The HTML Editor for Listing Description plugin is installed and active on your eDirectory site.

If you are not sure how to check which plugins are installed on your site, see our guide:

How to View Your Installed Plugins

Step 1. Access Listing Management

1.1. Log in to Site Manager

Log in to your eDirectory Site Manager Area.

1.2. Open Listings

Go to Content > Listings.

This will open the listing management area, where you can create and manage listings.

1.3. Add or Edit a Listing

Click Add Listing to create a new listing or select an existing listing to edit it.

Step 2. Access the HTML Editor

2.1. Locate the Description Field

When the plugin is installed and active, the standard listing description field is replaced by the HTML Editor.

The standard description field normally appears as a basic text field:

With the plugin active, the description field is replaced by the HTML Editor:

2.2. Use the HTML Editor

Use the available tools in the editor to format and organize your listing description.

Step 3. Format the Listing Description

The HTML Editor provides several tools that can be used to customize the appearance and structure of your listing description.

3.1. Format Text

You can apply different formatting options to your text, including:

• Bold – Highlight important information.
• Italic – Add emphasis to specific words or phrases.
• Underline – Emphasize selected text.
• Strikethrough – Indicate removed, outdated, or no longer applicable information.
• Text alignment – Align text to the left, center, right, or use justify to distribute the text evenly across the available space.
• Font – Choose a different font for your text.
• Font size – Increase or decrease the size of selected text.
• Text color – Change the color of the text.
• Background color – Add a background color to selected text.

For example, a listing owner could use bold text for important dates, a larger font for a listing title, or a different text color to highlight registration information.

3.2. Format Titles and Headings

Use the heading options to organize your listing description into different sections.

You can use Heading 1, Heading 2, Heading 3, and other available heading levels.

3.3. Add Links

To add a hyperlink to your listing description:

1. Select the text you want to turn into a link.
2. Click the link icon.

2. Enter the destination URL.
3. Click OK.

3.4. Add Images

You can add images directly to the listing description.

To add an image:

1. Click the image icon.

2. Open the Upload option.
3. Click Choose file and select the image from your computer.

4. Click Send it to the server.
5. Confirm the image insertion by clicking OK.

3.5. Add Tables

You can add tables to organize information in your listing description.

To add a table:

1. Click the table icon.

2. Select the desired number of rows and columns.

3. Populate the table with your information.

3.6. Create Bulleted or Numbered Lists

Use the list tools to organize information into:

• Bulleted lists
• Numbered lists

3.7. Add Block Quotes

Use the Block Quote option to highlight specific text or quotations within the listing description.

3.8. Use the Source Option

The Source option allows you to access and edit the HTML source code of the listing description.

Users with knowledge of HTML and CSS can use this area to manually add or modify code.

For example, an advanced user may use the Source option to make a specific HTML/CSS customization that is not available through the standard editor tools.

3.9. Avoid Pasting Formatted Text from Other Sources

When adding content to the HTML Editor, we recommend typing the text directly into the editor whenever possible and applying the formatting using the editor's own tools.

Copying and pasting content from another source, especially content that is already formatted, can cause compatibility issues.

For example, if you copy content from Microsoft Word, Google Docs, another website, or another HTML editor, the copied text may already contain formatting such as:

• Bold text
• Text colors
• Background colors
• Different fonts
• Different font sizes
• Alignment
• Justification
• Links
• Other hidden formatting or HTML code

When this content is pasted into the HTML Editor, some of the formatting may be interpreted differently.

As a result, you may see situations where:

• Part of the text is formatted and another part is not.
• The content looks correctly formatted in the Site Manager, but the formatting is different on the live website.
• Colors or fonts appear correctly in the editor but not on the live page.
• Bold, italic, alignment, or other formatting does not appear as expected.
• Additional or unwanted formatting is introduced into the description.

3.10. Recommended Method for Pasting Content

To avoid compatibility issues, we recommend one of the following methods:

Option 1: Type the content directly

Whenever possible, type the content directly into the HTML Editor and use its formatting tools.

Option 2: Paste without formatting

If you need to copy content from another application, paste it without formatting.

• Windows: Press Ctrl + Shift + V
• Mac: Press Command + Shift + V

Step 4. Save the Listing

After formatting the listing description, save the listing to apply your changes.

Step 5. View the Listing Description

After saving the listing, open the public listing detail page to verify how the formatted description is displayed.

Step 6. Restrict HTML Descriptions to Specific Plans

The HTML Editor feature can be enabled or disabled for specific products and plans.

6.1. Access Product Settings

Go to Settings > Products & Plans > Manage Products.

6.2. Locate the Long Description Option

Select the Listing tab, and scroll down to locate the Long Description option.

6.3. Enable or Disable Long Description

Enable Long Description for the plans that should have access to the HTML description feature.

Disable it for plans that should not have access to this feature.

6.4. Save the Changes

Save the product or plan after making your changes.

Step 7. Verify the Configuration

After configuring the HTML Editor, we recommend testing the feature:

7.1. Create or Edit a Listing

Create a new listing or edit an existing listing using a plan where the HTML description feature is enabled.

7.2. Test the Formatting

Add text, headings, links, images, lists, or other supported formatting options.

7.3. Save the Listing

Save the listing after making the changes.

7.4. Check the Public Listing Page

Open the public listing page and confirm that the formatting is displayed as expected.

Troubleshooting

HTML Editor Does Not Appear

If the HTML Editor does not appear when creating or editing a listing:

1. Make sure the HTML Editor for Listing Description plugin is installed and active.
2. Make sure you are creating or editing a listing.
3. Check whether the listing's assigned plan has access to the Long Description feature.
4. Go to Settings > Products & Plans > Manage Products and verify the product configuration.

If you are unsure how to check your installed plugins, see:

How to View Your Installed Plugins

HTML Editor Is Not Available for a Specific Plan

If the HTML Editor is available for some listings but not others, check the plan assigned to the listing.

Go to Settings > Products & Plans > Manage Products

Open the corresponding product and make sure Long Description is enabled.

Formatting Does Not Appear Correctly on the Public Listing Page

If formatting looks correct in the Site Manager but does not appear correctly on the public listing page, the content may contain formatting copied from another source.

Try the following:

1. Review the description in the HTML Editor.
2. Remove the affected formatting.
3. Save the listing.
4. Test the formatting by typing new content directly into the editor.
5. Use the editor's native formatting tools.
6. If you need to paste content, use Ctrl + Shift + V on Windows or Command + Shift + V on Mac.
7. Save the listing and check the public page again.

Image or Link Does Not Work

If an image or link does not work correctly:

• Verify that the image was successfully uploaded.
• Make sure the image URL is accessible.
• Verify that the link URL is correct.
• Reinsert the image or link using the HTML Editor's standard tools.
• Save the listing and test the public page again.

HTML Feature Is Available When It Should Not Be

If a listing has access to the HTML description feature when it should not:

1. Go to Settings > Products & Plans > Manage Products.
2. Open the corresponding product.
3. Disable Long Description.
4. Save the changes.
5. Test the listing again.

Conclusion

The HTML Editor for Listing Description plugin provides additional control over the appearance and organization of listing descriptions. Site Managers can use the editor's formatting tools to create richer listing content while using the Long Description setting to control which plans have access to the feature.

For best results, use the editor's native formatting tools and avoid copying formatted content directly from external applications, as hidden formatting can cause compatibility issues.

The HTML Editor for Listing Description is a premium plugin and must be purchased separately.