Using Magento's built-in WYSIWYG editor
Learning how to use Magento's built-in WYSIWYG text editor can be a challenge, especially when formatting complex page layouts such as static CMS pages. These tips will ensure that all of your pages look great
For simple layout editing, the Magento editor is a perfect tool. However, when you need to create a more complex layout, it can become quite overwhelming to use. For example, you may want to highlight certain content in a way that differs radically from you product templates. If this situation occurs, you may find it difficult to persevere formatting with the built-in WYSIWYG editor.
Here are a few tips that will help increase development speed and decrease time spent creating the particular pages; thus allowing you to concentrate on more important things throughout the day.
Setting up the HTML Structure First.
Sometimes it is important to use advanced HTML markup to style a page correctly. Unfortunately, Magento WYSIWYG editor will remove indentations after each time you save. This makes it difficult to keep track of what closing tags are for what sections and can cost you a lot time looking for the correct tags or counting tags to find the right spot to place your new code. You can comment it very well, but we have found that the less major changes you have to make in the WYSIWYG editor, the easier life will be for you.
In order to save you 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 a good practice in any web development scenario, the benefits of this can really be seen when editing in Magento. We prefer to structure the page in the text editor so we can clearly see what is going where and then the minor unforeseen changes to the layout demonstrates to be much easier to make in Magento.
The other benefit of building the page's structure first is that it forces you to carefully choose names for your classes and identifiers. When we plan a page before marking it up, we spend an extra few minutes thinking about class and identifier names, it saves us a lot of time later when there are no naming collisions and other developers can easily locate & identify classes, making their workflow faster as well.
One more benefit of Magento is accessibility. When we structure the page first, we remember to put add blocks below the main content because when we view its un-styled structure in the browser we can clearly see how the page will be presented to our audience.
One of the very first things we notice when using the WYSIWYG in Magento is it's extremely difficult to keep track of where elements start and/or end.
There are three reasons this is a bit tricky.
- There is no indentation.
- There are no color difference or syntax highlighted in any of the text.
- Your code is pushed to new lines or stacked on the same line even when in an editor you have created them in separates lines.
This makes finding what you are looking for a pain! To get around this, we started indenting 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 less time you spend indenting will save you a lot of time later when you are trying to locate a closed div tag.
The Disappearing Anchor Tag
Sometimes in Magento’s WYSIWYG editor, the anchor tag will disappear. Once there!? Now gone!? We spent a long minute scratching our heads and moving the tag inside and outside of different elements trying to figure out why it be gone upon saving. Then it hit one of us! The only time this is happening is when we were using an anchor tag that has a background image for the button and no actual content inside the opening and closing anchor tags. "Oh, yeah, right!"
When Magento’s WYSIWYG sees an empty anchor tag, it figures it must be there by mistake and deletes 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">Identifying text for the graphic</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 we suggest you add it. We can’t really see why you would need to have overflow, but you never know.
Another problem Magento’s WYSIWYG editor likes to create is removing a “div” tag from inside paragraph tags. Typically, there isn't much of a need for a "div tag," inside of a paragraph and it actually is a violation of the W3C specifications, but that doesn’t mean it doesn't happen. The solution? Use a span tag. This will force it to behave like a block level element by adding a class that styles it with a display block:
<span class="block-element">My Content to Position</span>/* The CSS */
block-element {display: block;}
/* If you want your element to fit in line with your text you can use */
block-element-inline {display: inline-block;}Classes and Identifiers
When you change a image Magento will replace image tag, therefore eliminating your classes and identifiers. To work around this, use the power of CSS and jQuery which allow you to select the 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.
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!
In conclusion, if you spend a little more time with your mark-up, it can save you a lot of time making small changes over and over again. This is not, by any means, a definitive guide to fix these problems and we are aware that there are other solutions out there to fix these annoying problems, too. Hopefully these tips and tricks will save you the time we spent figuring them out.
