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.

Screenshot below:

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!

Share

0
Comments

I will assume you have navigated to your page in the Quick Manager, then you are looking at the content field with your rich text editor (RTE) which is the row of buttons at the top that look sort of like Microsoft Word.

Click on the photo you wish to add a border or space to and click the Tree icon in the rich text editor, screen shot below (click it to enlarge it):

This will open an insert/edit image pop-up which should show a preview of the image you highlighted. If it does not, then go back and re-select the image you wish to add a border or margin to and then click the tree again. You are on the “General” tab for this pop-up when it opens, you need to click “Appearance” which is the tab next to General. Screenshot below:

Here you can align the image left or right, this will cause text to wrap around the image. Tip: Always place your images at the very beginning of a paragraph to ensure text wraps correctly. Then in the following screen shot you will see Vertical space and Horizontal space. Enter a number here, this sets the margin around your photo. Usually 5 or 10 is sufficient.  To add a border, enter a number value into the “Border” field. These numbers are the value in pixels of the space or border that you wish to have presented. Screen shot below:

Click update and preview the image. and that is it!

Tip: Make sure you do not have text centered in the paragraph you are working in, centered text will cause your layout to be thrown off.

Share

0
Comments

Okay, so you have a new Blog with MODx. How do you post in it?

This is your admin screen:

If you click the plus sign next to “Blog” then you can see the posts that have already been written. You can either duplicate one of those and just type over it or create a new one. For the purposes of this tutorial, we’ll make a new one.

If you click on the square icon next to “Blog” (see the ugly brown arrow pointing to it?) then you will see this Context Menu:

You want to choose the top option, “Create Resource here” which also has an ugly brown arrow pointing to it.

All right, that will bring you to this screen, and I’ve filled in the different form fields here with descriptive text, so look at the following screen shot:

starting at the top, you want to fill in the fields as instructed. If you do not put in a summary, then the first portion of your post will be used as the summary for the post. You might want to do this for instance if you want an image to appear in the summary list of articles. Do not check “Show in menu” If it is checked then uncheck it.

When you are finished with your post, make sure you choose whether or not to show the comments on this post (check box) and add tags for the post. Leave the stylesheet field alone (it will probably not be in your form, it is just in mine as the main admin so I can change it easily) :

But wait! How do you put an image in?

See the little tree in the second row in your Rich Text Editor? It is the first icon. That is the image button. To insert an image, you click it and you will get this screen:

Notice the three tabs along the top. General, Appearance and Advanced. We’ll leave advanced alone for now and come back to the appearance tab. But first you have to pick your image.

If you click the square icon next to the “Image URL” field then you will bring up the Image Library screen where you can browse and choose your image. It also has an uploader at the bottom of the screen, you can load new files into the image library with the uploader.the image library screen looks like this:

after you choose your image, make sure you put in a title and description for it. You can also click the Appearance tab and align the image so the text wraps around it by choosing “left” or “right” You will have space preprogrammed in around your images, but you can add more if you like with the Hspace and vspace fields under the appearance tab in the image menu. The Appearance tab looks like this:

Hit “Update” when you’re ready. If you need to edit this later, just select the image and click the tree button in the Rich Text Editor and you can come back to this screen. To delete an image, you just select it and hit “backspace.”

What about adding links?

You highlight the text you wish to link and click the button that look like a chain in your Rich Text Editor. See below:

if you want to link to another site, enter the url in the box, make sure you include the “http://” . You probably want that to open in a new window, so choose that from the dropdown next to”Target” Then click insert.

To link to a page within your site, choose from the link list:

This will put an odd code in the url field, it will look like this: [~6~] and the number is the same as the number next to that page in your document tree. It is the id number for the resource. Click insert.

Finally, you can also link to doc files or pdf’s. To do that you will click the little square button next to the url field and that will bring up the file browser. There is an uploader at the bottom of this screen that you can use to upload files. Then just click the file you wish to link to. The file browser looks like this:

then, as before, you click “insert” and you are done! link created!

You can save a post at any time, you just need to make sure it is not published. It is a draft and is not accessible until you publish it.

There are different ways to publish a post. You can set a date for a post to publish or unpublish. You can also choose “publish” from the context menu (remember that?) in the document tree. If you use that option, your post will automatically go to Twitter. If you set the date for publish to -today- the post will be published immediately.

A resource that is not published will have an italic title in the document tree.
A resource that is not shown in the menu but is published will be grayed out but not italic in the document tree.
A resource that is shown in the menu will be black and not italic in the document tree.

You want your finished blog posts to be published and not shown in the menu,

This is the tab where you will find the date options for publishing a post:

The main fields where you entered the article is under “General” ..you want “Settings” if you want to set the date for publishing.

Click Save and you are finished. You can preview your post from the context menu (click the square icon next to the resource in the document tree) The post will have the managers from your slide shows showing unless you log out of the admin. But if you do then it should look something like this:

Hopefully this has helped you!

Share

0
Comments