Sections of website that contain main text and images are called ‘Articles’. They’re the rectangle part of the website image below. The square rectangle parts are modules, which you can’t edit in the frontend. If you click on the circled paper and pencil icon, you’ll get to the article editor.

You may be using JCE 1.5.7.4 editor, and it looks like this (other versions are almost identical to this one):

We’ll go through some of it’s features because once you begin to work with it, you will learn many things yourself, and it’s not so hard to work with it at all. Let’s go through each letter-marked feature on the image above:

A: show/hide

This refers should the editor show or hide the html code. It might happen that when you open the editor only the html code appears, so to go the actual editor, just click on that button.

B: Formatting

This refers to spacing formatting. If you want a spacing that’s marked with letter D on the image, you should choose ‘Paragraph’ formatting, and if you want a spacing marked with E, you choose ‘Div’ formatting. If you stack up ‘Div’ formatting one of them gets lost when exiting the editor. Play with it a bit, and you’ll see it yourself.

C: HTML code

If you want to edit the HTML code of the article, click on that button.

F: Table

Those dashed lines represent a table. Creating a table helps in customizing the article layout, because it gives you much more control over it. If you want to add a new table, click on the button marked with letter ‘H’. You will have this editor:

It’s pretty simple. You choose how much columns and rows you want, how should they be aligned, etc. And in advanced options you can put a background image, as well as frames, which look really nice if properly placed. If you right-click on the table in the JCE editor, you’ll find options to add new columns and rows there.


G: Images

You can input any images from your server or your computer in your articles. But make sure you optimize your images before that. They shouldn’t be over 150kB, because they make the page open slower. You can optimize them with image softwares such as IrfanView, Photoshop, etc.

How to add them?
Put a pointer on the article, where you want to insert the image, and click the image button on the editor (marked with letter I). It looks like this:

Let’s go from bottom up. On the bottom left side you can choose folders on server, from which you add images to display them. On the right you have the option to upload files from your computer. When naming files make sure they contain _ instead of regular spacing. Insert the file with the icon on the bottom right side. Url will automatically fill out. Then edit Alternate text according to your niche. Add dimensions (in pixels), but you’ll be able to drag ‘n’ drop and resize image in the JCE editor later on. Set alignment on your will and margins. If you put margins the image will make space as you choose between itself and text. And make sure you put a border. Every image on your site has a border sized 2 px and with inset style. Put color at your will. Click insert.


J: Linking

Select the text you want to link, and then click on the button under letter ‘J’ (lower button is for linking, upper button is for unlinking the item). It will open this editor:

You can manually type in the url to redirect once the link is clicked, or you can choose the link on the link browser below. There you have all the menu items, articles and other things that items can be linked to. Below you can choose anchors, target (will the link open in new window, page, or in the same window and whatnot). You can also write text to display on the link if you haven’t already marked it before opening the link editor.


JCE Editor offers much more options, but you can feel free to explore them through trial and error. Everything is easy to handle and fix if something happens.