Joomla comes with a WYSIWYG editor installed, this is called TinyMCE, and the editing area looks like this ...
The range of options is very limited and consists of a basic font styling and alignment, lists, indentations, links, anchors, images, basic tables, symbols, and the option to use HTML code. This editor is also well-known for stripping code from articles, thereby causing webpages to act in an unpredictable manner.
My personal choice of editor is JCE, which stands for Joomla Content Editor and is free. If you look at the image below you will see the options are considerably greater than the default editor.
Most Common Mistake
One of the first points I would like to make, regardless of editor chosen, is that the most common mistake that people make is to copy and paste content from Microsoft products such as Word and Excel directly into an article. The problem with this is that while it looks like you are only copying across the text you require, you are also copying across all of the formatting applied by Microsoft. In some cases this can mean the file size could be three times more than it needs to be due to all of the extra code. With page loading speeds being far more important these days then it is essential to minimise unnecessary code. Just look at the code below and see all of the extra code (highlighted for ease of recognition).
The document that this was copied from obviously had a paragraph class called ToolkitNormal and in terms of our web page this isn't a problem because it just doesn't exist in our CSS styling. But it does raise the question about "What would happen if we did have a style called ToolkitNormal?"
To avoid these sorts of problems please copy content from MS Word and then paste into a text editor such as Notepad to remove the MS formatting codes. It may take a little while to format your content again but at least it would be formatted to suit your website.
If you want to see if your content has extra code then select HTML view and see if you have lots of extra code inserted in your article.
What are all the buttons for?
With JCE all you need to do is hover your mouse over any of the buttons and you will see a description of the buttons function. The majority of these buttons are fairly obvious as they are seen in various software packages, for example the four text buttons for alignment - justify, centre align, left align, right align.
You may notice that some of the buttons appear faded, or greyed out, which signifies that they cannot be used at that point in time. A typical example is the third row of buttons where the last 11 buttons cannot be used until a table is created. Those buttons are designed to delete the table, insert or delete rows, insert or delete columns, and merging cells. There will be other buttons that only become functional when text or content is selected.
Some of the buttons and options have a small blue triangle placed to the right, which signifies that these options have drop downs for further information. In a row two we have font family and font size, which are self-explanatory. In the first row we can see the word 'paragraph' in one drop-down and the word 'styles' in the other.
The first drop-downs use some basic information regarding styling such as paragraphs, divs, and headings. So if I were to highlight some text and then click on the drop-down and select Heading 2 this would apply the H2 setting to the highlighted text.
By clicking on the [show/hide] option we can see the code content...
The text PROFESSIONAL TEMPLATE is now inside
tags.
These drop-down options can save you a lot of time if you don't know the correct HTML tags for some of the layouts used within Joomla.
If you would like to experiment with the various options available then I would suggest you create an article as uncategorized and set access as special. This way you can play on a live site without people being able to see the results of your experiments. One advantage of doing this is that you can see how your template styling and affects the way you set up an article.
Most frustrating editing task?
For many users this will be adding images to content. The initial task of adding the image is quite simple but getting it to go where you want can be a nightmare if you are not familiar with HTML and CSS. For this section I will be using Joomla 2.5 with RocketTheme's Clarion template.
When I am placing an image into an article I place my cursor at the start of the paragraph where I want the picture to be displayed. In this example it will be at the start of the article. I then click on the insert/edit image button.
Once this button is clicked you will see a pop-up like this...
It is worth noting that the editor will use your Joomla images directory as the default folder for images. In the above example we have the Root folder (your-domain/images) selected and it is showing possible selection options in the middle column. For most users the images they want to use in an article is likely to be in the stories directory.
By selecting the appropriate folder I can make my selection of image for inclusion in the article. I click on the image name and it appears bold and at the same time the various fields are also populated with data.
URL – the correct path to the image is stored.
Alternate Text – in this instance the file title is used but I can overtype that with a more practical text.
The dimensions are displayed and set to remain as proportional. Un-ticking will allow you to override sizes.
The following options are the interesting elements that you don't get with some of the basic WYSIWYG editors.
The alignment drop-down gives me options to position my image. As I select a position the preview window shows me what that will look like. By selecting 'right' the image is placed to the right of the text positioned at my cursor, the start of the article. The Clear setting works in the same way as the alignment, your selection is shown in the preview window.
The next setting down is the margin. The default is to set equal values all around the image and that is taken from the first value, which is top. I personally avoid this approach as I like my images to look aligned with text edges, especially if the images are part way through an article. So if I have an image right aligned, as above, I un-tick the Equal Values and add my own. In this case 8px margin to left and bottom, that way the top edge of the image aligns with top of text and the right edge of the image aligns with right edge of text that is below the image.
I also have the option to add a border if I require one. For demonstration purposes I have added a red border to the image. This is what my settings look like now...
As you can see, the preview pane has added the margin and border too.
We still have two tabs on this modal pop-up, they are Rollover and Advanced. The Rollover tab allows you to select an image that will be displayed when you mouse-over the original image. My advice is to make sure that the images are identical sizes if you want the effect to be clean.
The Advanced tab is very useful as we will now see.
The first field is for style and contains all of the settings we have previously entered for margins and borders.
Beneath that we have a Class List and this contains the majority of classes available within Joomla and the template you are using. If you cannot find a specific class in the list but you know it exists in your template and css then you can manually add it in the next field.
I know that the class of rt-image does not appear in the Class List so I have added it to the Classes field.
The Title is the text that appears when somebody mouses over an image so I have added the title here. You also have an option to set the language code if you wish to. The image map will allow you to add hotspots etc. but that is for another article.
I now save my image by clicking on the Insert button and my article shows up like this...
When I look at my article in code view I can see all of the extra code generated by the editor...
1.
border: 1px solid #e51010; float: right;" class="rt-image"
3.
title="Gantry is fantastic" alt="gantry-framework-logo"
4.
src="/images/stories/demo/general/gantry-framework-logo.jpg"
5.
height="172" lang="en-GB" width="223" />
So how does it look on the front of my site?
For clarity I have shown the top image with red border and no rt-image class and the bottom image has the rt-image class but no border. So by adding the existing rt-image class I get the margin and border effect to match other images in the template.
That process is all well and good if the images are uploaded and you can find them. But what about those times when you are editing an article and you realise you need a different image? This is where JCE provides a great little upload tool.
Select the folder where you wish to upload the image to. If you want a new folder then click on the new folder icon...
Once you have the correct folder selected click on the upload icon (second in image above). This will open a pop-up where you can just drag and drop images or click on browse to choose from your pc. You can add multiple files but with the browse option you can only select them individually. Once you have selected all of your files for upload to the directory then click on the upload button.
You now have the pictures loaded and you haven't even had to leave the article editor.
Summary
This article is just a basic guide to using a powerful WYSIWYG editor to help you get best layouts from your content.
Having a good editor is one of the key points to having fewer display problems with your website. I use JCE on every Joomla site that I build. The editor is free and can be obtained from http://www.joomlacontenteditor.net
I personally subscribe to the extras as I feel that I use this product so much that my subscription is just a little thank you for such a great tool.
Source: http://www.rockettheme.com/magazine/1368-joomla-content-editors
Source: http://www.rockettheme.com/magazine/1368-joomla-content-editors
No comments:
Post a Comment