Technology

Overcoming Magento’s built-in WYSIWYG editor

Posted by Pixafy Team

Magento WYSIWYG

[series_block]

This post is part of a series on Magento‘s WYSIWYG editor:

[/series_block]

Sometimes your Magento storefront may have a need for static pages that don’t quite fit in with the templates you have created. For instance, you may want to feature a certain product or person and the layout differs drastically from your product templates. When this situation occurs, you are forced to use the WYSIWYG Magento provides. It does a great job for simple layout editing, but when you want to create a complex page layout it can be quite daunting.

Here are some tips, tricks, and best practices that will help increase development speed and decrease time spent creating these pages, allowing you to get on with the rest of your day.Setting up your HTML Structure First

Some developers like to work from a section method structuring and styling sections of the page and then moving on to the next. This is fine when you can use your editor of choice, as your code is indented and nice and pretty. The WYSIWYG in Magento will remove all indentations after every save. This makes it much harder to keep track of what closing tags are for what sections and can cost you time spent looking for the right tags or counting tags to find the right spot to place your new code. You could comment it very well (which we will discuss next), but I have found that the less major changes you have to make in the WYSIWYG editor, the easier your life will be.

To save the most time, plan your page’s layout and completely build the HTML structure first (including adding class and identifier names to your tags). This is normally a good practice in any web development scenario, but the benefits of this can really be seen when dealing with Magento. I prefer to structure the page in my text editor so I can clearly see what is going where and then the minor unforeseen changes to the layout will be that much easier to make in the editor.

The other benefit of building the structure first is that it forces you to carefully choose names for your classes and identifiers. When I plan a page before marking it up, I spend an extra few minutes thinking about class and identifier names, but it saves time later on when there are no naming collisions and other developers can easily locate and identify my classes, making their workflow faster as well.

One more benefit of this approach is accessibility. When I structure the page as a whole first, I remember to put add blocks below the main content because when I view my un-styled structure in the browser I can clearly see how my page will be presented to a screen reader.

<!– Comments Are King –>

One of the very first things I noticed when using the WYSIWYG in Magento was that it is extremely difficult to keep track of where sections start and end or how to quickly navigate to a certain list item. There are three reasons this is so difficult.

  1. There is no indentation
  2. There is no color difference or syntax highlighting in any of the text
  3. Thing get pushed to new lines or stacked on the same line even when in your editor you had them on separate lines.

This makes finding what you are looking for a complete nightmare! To get around this debacle I started commenting every beginning and end of a section, every row and list item in an unordered list, and just about anything that I believe I would need to find later.

The extra few minutes you spend commenting will save you tons of time later when you are seeking a closing “div” tag.

The Disappearing Anchor Tag

Sometimes in Magento’s WYSIWYG, the anchor tag will disappear. POOF! Gone. I spent a good few minutes scratching my head and moving the tag inside and outside of different elements trying to figure out why on earth it would get scrubbed on saving. Then it hit me: the only time this happened is when I am using an anchor tag that had a background image for the button and no actual content inside the opening and closing anchor tags. DUH!

When Magento’s WYSIWYG sees an empty anchor tag, it figures it must be there by mistake and wipes it from the HTML.

When developing anchor tags where the content is actually contained in the CSS, the best solution is to put the word or phrase that the graphic is indicating inside the anchor tag like so:

<a href=”#” class=”hide-content  class-for-styling”>The graphic in words</a>

Then hide the text in my CSS like so:

hide-content {text-indent: -9999px; overflow: hidden;}

If you can’t have overflow hidden due to some styling then you should still be fine with the text-indent, but I suggest you add it. I can’t really see why you would need to have overflow, but hey, you never know.

Get Out of My Paragraph Tag!

Another neat little problem Magento’s WYSIWYG likes to throw at you is removing “div” tags from inside paragraph tags. Normally there is little need for a div inside of a paragraph, and it actually is a violation of the W3C specifications, but that doesn’t mean I don’t come across it.

The solution is to use a span tag and force it to behave like a block level element by adding  a class that styles it with display block:

<span class=”block-element some-other-class”>My Content to Position</span>

And the CSS:

block-element {display: block;}

If you want your block level element to fit in line with your text you can use

block-element-inline {display: inline-block;}

Be careful as IE7 and below don’t play nice with the inline-block style.

Goodbye Classes and Identifiers

Most of us are used to placing classes and identifiers on elements like list items and images. In Magento, when using the WYSIWYG, tread carefully.

Let’s say you add an image and you put a class on it to style it and an identifier so you can do some crazy cool JQuery effects on it. Everything is working good, but you decide to swap out the image. Instead of going in the code editor part of WYSIWYG, you just use the basic Insert Image function and click on the image and replace it. You save and refresh only to see that your styles are gone and so is your flying animation.

Goodbye classes and identifiers. When you change the image Magento replaces the entire image tag, therefore deleting your classes and identifiers.

To work around this use the power of CSS and JQuery. Both allow you to select children of an identifier, put the class on the “ul” tag or the containing element of the image and target through CSS and JQuery selectors like so:

HTML:

<div id=”image-wrapper”>
<img src=”#” alt=”#” title=”#” />
</div>

CSS:

div#image-wrapper > img {
styles: here;
}

JQuery:
$(document).ready(function() {
$(‘#image-wrapper’).find(‘img’).doSomethingCrazy();
}):

You can accomplish the same goal with just a little bit more mark-up, but you gain the benefit of not having to constantly retype classes and identifiers!

Conclusion

A little bit more time spent prepping your mark-up can save you large amounts of time making small changes over and over again. This is not by any means a definitive guide and I am sure there are other solutions to these problems. Hopefully these tips and tricks will save you the time I spent figuring them out.

Have a good WYSIWYG trick or technique?  Share them in the comments or tweet us @Pixafy! For more insights, sign up for our [newsletter_link]FREE newsletter[/newsletter_link]!

[series_block]Related articles:

[/series_block]