Editing an Article
Now we'll take our first steps towards editing content in Mambo. We'll change the text in the Welcome to Mambo! article; you can rewrite it completely if you feel inclined. To do this, from the Frontpage Manager, click on the title of the Welcome to Mambo! article, and you will be taken to the Content Item: Edit screen:
Here you can see the details that make up the content item: its Title, Title Alias, and the Intro Text. Scroll down your screen a bit further and you will see the Main Text field.
You can also see the section and category that this article belongs to in the Section and Category drop-down boxes.
You will also notice that a number of new icons have appeared in the toolbar: Preview, Upload, Save, Apply, and Close.
- The Preview icon displays the article in a pop-up window similar to how it would appear on the site. Note that the preview actually displays the current version of the article you are working on, including the changes you have made since you started editing and have not yet saved.
- The Upload icon allows you to add a file to the Mambo file storage. We'll skip past that for now, and think about the Save, Apply, and Close icons.
- The Save icon stores your edits in Mambo, updating the article. After it has finished saving, you are returned to the previous menu (the Frontpage Manager in this case).
- The Apply icon also saves your changes, but keeps you in the Edit screen. This can be useful if you are making a lot of changes, and want to save as you go.
- The Close icon cancels all your edits and returns you to the Frontpage Manager.
To see the importance of these icons, click the Back button in your browser to see the Frontpage Manager again. This time, you will notice a padlock icon next to the Welcome to Mambo! article.
This padlock icon indicates that this article has been "checked out".
You can Check Out Any Time, But You can Never Leave
When you begin to edit an item, it gets checked out. When an item is checked out, it can't be worked on by another administrator or "editor", and also, certain operations cannot be performed on the item by you until you have checked it back in.
Since the padlock icon sits on top of the checkbox to select the item for moving, copying, or deleting, these cannot be done until you have checked the item back in, and the padlock vanishes.
We've seen that leaving an item in the middle of editing leaves it checked out. To check the item back in, you will need to either use the Save or Close icons on the Content Item: Edit screen to terminate your editing session. Clicking the Apply icon will save your changes but will keep the item checked out to you.
You can imagine that this could lead to lots of items being checked out all over your site when you have started work on them, but then decided to do something else without first using Save or Close. To take care of this, there is a feature to check in any item on the site that is currently checked out. This is done with the System | Global Checkin option on the administrator menu bar. The Global Checkin feature trawls the database looking for anything marked as checked out, and proceeds to check it in.
In the same way that the concept of "publication" applies to parts of Mambo beyond articles, so the "check out" concept also applies beyond simply editing articles. Many Mambo components use checking out to protect the "thing" you are working on. When you begin editing something from one of these components in the administrator interface, that element is marked as checked out in the Mambo database, and the same restrictions apply as when editing articles. Also, these elements will be checked in by the Global Checkin feature above.
Now that we've encountered checking in and out, click the title of the Welcome to Mambo! article again and let's get back to editing it.
Editing with the HTML Editor
Under the article details is the HTML editor for working with the article content:
The HTML editor makes adding your article text easier, providing an interface similar to that of Microsoft Word, Wordpad, and so on.
For example, you can format your text in bold or italics, add an underline, or select a style from the Styles drop-down box. You can also add bullets, numbered lists, and other visual styles.
If you like, you can edit the HTML source by clicking the HTML button, and click the Update button when you're finished to return to the HTML editor.
There are two ways in which you can make use of images in your content. The first allows you to add an image when you know its URL, and we'll look at that here.
The second way allows you to upload an image to the server directly, and put that into your content using the mosimage
mambot. We'll see more of that in the coming chapters.
If you know the URL of the image you want to add, you can add it by clicking the Insert/edit image button:
A dialog pops up, which allows you to enter the URL where the image can be found, and also specify things like the image border and its size, among others. After you enter the URL into the Image URL field, click in one of the other fields, and the image will be displayed in the Preview pane:
Clicking the Insert button adds the image into your content:
Click the image to select it, then click the Insert/edit image button again, and you can edit the properties of the image, such as setting a border, or setting the style from the Appearance tab. Here we set the Style of the image to give it a dashed border. The information we use here is the CSS (Cascading Stylesheet) syntax for setting a border:
Click Update, and our image is modified:
Cascading Stylesheets allow you to format your HTML in different ways. You can find more examples of CSS at http://www.w3schools.com/css/css_examples.asp.
Adding a link to your content is straightforward. Simply select the text for the link:
Then the link icons will become active in the editor:
Click the left-hand of the above icons, the Insert/edit link button, and a dialog will pop up into which you can enter the URL for the link:
You enter the URL into the Link URL field and click Insert, and the text you selected will be made into a link:
If you want to edit the link, click on it, then click the Insert/edit link button again. From the Insert/edit link dialog, you can modify other properties of the link, such as the window in which the link will open from the Target option.
Note that if your URL does not begin with http://, then by default, the editor will convert the URL into an absolute URL with http://<server> added to the front. This means if you were trying to link to a page on your site, it will have the current server hardcoded into the link. If you were working locally before deploying to a remote server, you would find that your links still point to the local machine! You can turn off this feature from the configuration of the HTML editor, which you find under Components | MOStlyCE Admin. There are a number of configuration settings that can be made here, including turning off this feature to Convert Absolute URLs:
The Insert/edit link dialog allows you to specify a huge number of options for your link if desired, including a popup to display when the link is clicked.
Email Addresses, Spam, and Mambots
Instead of entering a URL into the Link URL field of the Insert/edit link dialog, you can use mailto: followed by an email address to produce a link that will open the user's email client when clicked, ready to send a mail to that specified email address. Including email addresses like this in page output is a notorious source for "spam harvesters", who collect such email addresses and add them to mailing lists for rather undesirable mails.
However, Mambo comes to your rescue here. If you create a mailto: link in this way, say for the email address <doug@packtpub.com>
, Mambo will include something like this in the HTML of the page, which is almost impossible for a spam harvester to deciper:
<script language='JavaScript' type='text/javascript'> <!-- var prefix = 'ma' + 'il' + 'to'; var path = 'hr' + 'ef' + '='; var addy78528 = 'doug' + '@' + 'packtpub' + '.' + 'com'; var addy_text78528 = 'doug'; document.write( '<a ' + path + '\'' + prefix + ':' + addy78528 + '\'>' ); document.write( addy_text78528 ); document.write( '<\/a>' ); //--> </script>
Mambo keeps you safe like this through the Email Cloaking mambot. Mambots appear every so often in Mambo; they are hooked into various parts of the system and perform a single task, in this case formatting some output. When Mambo wants to display some content, it sees what "content" mambots are plugged in, and passes them the content for some processing. The Email Cloaking mambot for example looks for any HTML of the form <a href=mailto
: (which would be an email link), and processes that into something like the form above.
You have already seen some other mambots in action. This Write Comment link is produced by a mambot, and can be seen under some of the content items: