HOW TO: Common content formatting issues with MODx
This article is really about TinyMCE, or as one client of mine calls it, “Tiny Mice.” TinyMCE is the Rich Text Editor most commonly used with MODx. There are other editors available and if you have a lot of problems with TinyMCE, then let us know, we can try one of the others to see if it is a better fit for you. But hopefully with a little training you’ll be zooming along. There is always a learning curve.
The first issue I hear about a lot deals with extra space between paragraphs. We can set a style to completely take this out, and we can also program this completely away, but that is not always best for you. The offending tag is the paragraph tag or “p” tag. If you hit “return” at the end of a paragraph it is automatically added. This is good for you actually, because it is valid mark-up. It is bad because the space added sometimes is more than you want. We prefer to teach you, rather than program this feature out.
The solution is “Shift-return.” This key combo will make a simple line break rather than a paragraph and the space between lines will be diminished. While not strictly valid, it isn’t a huge faux pas either, and is okay to use. Hitting shift-return produces a “br” tag and not a “p.”
Say you hit “Return” instead of “Shift-return.” Accidentally. After you finish cursing, leave your cursor at the beginning of the new paragraph you just inserted, hit “delete” or “backspace” and then hit “shift-return.” Voila. Space gone.
The other huge HUGE key to handling your Rich Text Editor is the “Path” menu.
“What’s that?” you say.
Most people have no idea this particular item exists.
It’s at the bottom of your textarea box. Usually gray, if you put your cursor in the textarea in the middle of a sentence, you will see something like this in it:
“Path: table » tbody » tr » td » p » a”
The magic key is, if you select one of those elements? Say the “p”? then you actually select the paragraph inside it.
I’ll show you. Showing is easier. This first screen shot shows the Rich Text editor, TinyMCE. At the bottom, I’ve circled the “Path” menu in red. If you do not have a “Path” menu, call me and I’ll change your settings so you do have one. Or you can bug your current webmaster to do it if you don’t use me. It takes just a few minutes to change in MODx.
Practice clicking a few of the items in the list there. Yours might look different. As you do, you should notice content up in the textarea box turning blue. That’s because you are actually selecting that content with the Path menu.
So, when you hit the wrong button and suddenly weird boxes appear where they shouldn’t, you can now click into them with your cursor, click each tag in the Path menu until the intruder turns blue. And hit delete. And it will go away. Amazing.
Say there is a style applied to an element but you don’t know which one and can’t get rid of it? Simple, you look at the path menu till you see something with a dot in the name. It will look like this: “p.style1″ or this: “span.small”
If it has a dot in it? then the part before the dot is the element type (a paragraph or span or table) and then the part after the dot is the name of the style. There is a style dropdown menu and you can undo the style by selecting the element in the path menu and then clicking the eraser tool (remove formatting). You can apply another style by choosing one from the “styles” dropdown menu.
Screenshot:

It’s really helpful to know about that Path Menu.
If you have different buttons or want different buttons in your TinyMCE configuration, let us know and we’ll change it up for you, again, it is easy to customize in a few minutes.
Okay, so if you have questions, feel free to ask and happy blogging!




