translogo Joomla Specialist Nottingham

Call:  0115 9621218

JCE for Joomla – Basic Content Editing

JCE for Joomla – Basic Content Editing

The JCE Editor in Joomla is used to add/edit content in articles and in custom modules.  Whilst it’s easy enough to type your content directly into a Joomla article, many people write their content first using a word processing application like MS Word.

Copy & Paste from MS Word

Although this is OK, there are some pitfalls!  Once you have your document prepared the temptation is to copy and paste this content directly into Joomla using the JCE Editor.  Unless you have configured your JCE User Profiles correctly, this is a BAD IDEAPasting directly from MS Word inserts masses of unwanted code into your article which is highly detrimental to your SEO (search engine optimization) efforts and makes it inaccessible to screen readers.

It is much better to paste the content of your MS Word document into something like Notepad first, remove all extra lines spacing, bulleted and numbered lists, the copy and paste from Notepad into your Joomla article.

You will then use the JCE Editor to style your content.  This ensures that the styling of your content uses the CSS (cascading style sheet(s)) that comes with your template ensuring your styling is kept consistent throughout the site and you are taking steps to be standards-compliant. 

It means that you can use the JCE options to style your content in a ‘semantically’ correct way according to the internet’s governing body which means using the proper standards. 

NOTE: ‘Semantic’ here simply means using the correct html tags to ensure that the search engines can understand what your content is all about and index it quickly and accurately. Semantic mark-up is also used is to maintain well-structured pages, which are essential in order to deliver a good user experience to those using assistive technologies such as screen readers.

If you must copy and paste from MS Word please ensure you have configured your JCE Default Profile correctly.  See previous article.

Example; MS Word document

 word doc

Content Copied and Pasted Directly form Word without JCE Configured

frontend pasted from word

 On the face of it, at a cursory glance this looks ok.  But if you check the code you will see that masses of unwanted and detrimental code has been copied from MS Word.  The image below shows just a small sample of it - there's masses more!



word copy and paste code

If you are planning on copying and pasting from MS Word, I highly recommend that you follow the instructions on configuring JCE's profiles to clean up code in my previous tutorial.

Once you've done this, you will be able to copy and paste from Word using the 'Copy as Plain Text' tool.



Follow the instructions and press CTRL+V to paste your text into the window.  It's not perfect - this is how it looks from the frontend.  It needs some styling which we can do in JCE but it hasn't copied all that unwanted code over.

It's necessary to remove the bullets and use the backspace key at the beginning of every paragraph until it joins the previous paragraph, then press the Return Key to put a line space in.


frontend pasted as plain text

Now you can use JCE to style your headings and bullet lists. This is what it looks like from within the editor.



This is what the above looks like from the frontend.




Next, we'll see step-by-step how to use JCE to style your headings and lists.

 Basic Styling - Headings and Lists

Heading Tags run from h1 through to h6. H1 is the most important and h6 the least important heading.

The P tag defines a paragraph of text.

According to these headings should be used for headings only, and not to make text BIG or BOLD.

Not only do search engines use your headings to index the structure and content of your web pages, users skim your pages by its headings. It is important to use headings to show the document structure. An h1 heading should be main heading, followed by h2 headings, then the less important h3, and so on.

Below is some unformatted copy.

unformatted copy

This is what the copy will look like whether you’ve typed it into the editor directly or pasted in as described above and inserted line breaks between paragraphs.

To make a heading, simply place your cursor anywhere within the text and use the drop-down format list to select the heading – 1 to 6, as appropriate.



Repeat for all the other headings – only use 1 x h1.

This image shows 4 headings – heading1, heading2, heading3 and heading4.


4 headings

Next we’ll style the unordered or bulleted list.

Select all three items in the list and choose the ‘Unordered List’ tool in the toolbar. If you want a numbered list, choose the ‘ordered list’ tool instead.


unordered list

Now if we save and close the article, we can view it from the front end with properly formatted headings (1 through 4) and a bulleted (unordered) list.

This makes the text easy to read and is correctly formatted for the search engines.

This is an image of all your copy formatted with proper headings and a bulleted list.


formatted copy


The styles for these headings and lists are set up in an external style sheet (CSS) which means we don’t have to style them every time. It also has the advantage of making your headings, lists etc consistently styled throughout the site and should you ever wish to change the size or colour of a heading, you only need make a small change to the stylesheet to affect all the styles for that element on the whole site.


Get In Touch

Joomla Specialist Nottingham

Tel:  0115 9621218

Mb:  07775 510326

12 Redhill Lodge Drive, Redhill,  Nottingham NG5 8JH

LJN Web Design Logo