logo wide 2000x350
The JCE Editor is the tool we will use to insert content and images into our web pages. The default text editors that come with Joomla lack the ability to strip adverse code when copying and pasting a new article from a WORD document to your website. Sadly, most of the free editors on the Joomla Extension Directory do too good a job of stripping code. They not only remove the bad code, they also remove all the font type, font size and font color formatting you used to create your Word document. Many editors which worked for older versions of Joomla do not work as well on Joomla 3.5. There is however one editor that strips the bad code while leaving the good formatting. This is called the JCE Editor. This free editor also permits setting different editors for different groups of users – something we will discuss in a future book. To get the latest version of the JCE editor, log into your Joomla Control Panel and click on Extensions, Extension Manager, Install from Web.

01

Then click on JCE.

Click Install.

02

Click Install again. Congratulations, you now have the JCE Editor installed on your website! But there are still some steps you need to take to insure the Editor works right.

Set JCE as your Default Editor

To make sure JCE is set for the default editor, you will need to change the settings in both the User Manager and under Global Configurations. First, go to Users, then User Manager. Then click on your name to open your profile. In the Basic settings tab, set the JCE Editor as your new default editor.

04

Then SAVE and CLOSE this screen.

Next go to the Site, Global Configurations, and set the Global Default Editor as JCE:

05

Then click SAVE AND CLOSE.

Customize Options on the JCE Editor
There are many settings which can simplify the JCE Editor and make it more useful for creating articles. You can configure the JCE Editor by going to Components, then JCE Administration, then Control Panel


06

The Control Panel has four tabs. But we will only adjust one: Editor Profiles.

Editor Profiles Tab

Clicking on the Editor Profiles Tab shows that there are three editor profiles included by default with the JCE editor. Only one, called Default is active:

07

This brings up the Edit screen for the Default Editor.

08

JCE allows you to have different editors for different groups and for different areas on your website. This is useful if folks will be posting articles and comments to the front end of your website and you would like to give them a simpler editor to use. Having a simpler editor is important because the default editor has a lot of buttons which may confuse your readers. To change the settings on the Default editor, select it and click on Edit to bring up the Edit Profile Screen for the Default Profile. There are four tabs in the Edit Profile screen: Setup, Features, Editor Parameters and Plugin Parameters. We will not make any changes to the SETUP tab. Click on the Features tab. Then scroll Down to the section called Current Editor Layout:

09

The JCE Editor Default Settings comes with quite a few buttons. Many of these tend to confuse people. Thankfully, you can remove these buttons from the Editor making it easier to find the buttons you actually will need. To remove buttons, simply drag them from the Current Layout down to the Available Buttons.

Which buttons should you remove?

Basically, you should remove any button which you do not know how to use or do not think you will need. If you hover over a button, a pop up screen will tell you what the button does. Alternately, you can just remove the same ones I have removed above using the icons for the three rows of retained buttons and the four rows of removed buttons. When you have the Editor Functions you want, click on SAVE. Then click on the Editor Parameters Top Tab:

10

Click Typography and scroll down to font styles. Add font sizes to the Editor Profiles. 6pt, 10pt, 12pt, 14pt, 16pt, 18pt, 20pt, 22pt, 24pt, 28pt, 32pt, 36pt,

Then click SAVE. Then click on Image Manager and set alignment for Center.
Then click Link and set Targer for Open in New Window.

Then click on Plugin Parameters, Media Support. For Allow I Frames click YES. Then click SAVE and Close. When you have made all of the changes you want to the JCE Editor, click on SAVE and CLOSE.

There are many other benefits of using the JCE editor which we will describe throughout this book and course. In particular, the JCE Editor is excellent for inserting and formatting images. Using the Joomla image button to insert images requires navigating through folders every time we add an image – and there are no setting options for formatting the image as we add it. We will therefore use the JCE editor Image manager. This will allow us to quickly select, format and insert images into our articles.

11

Click on the Blue Picture icon which brings up the following JCE Image Manager screen. Clicking on the JCE blue image button to select your images is faster because you do not have to navigate through all of the folders like you do if you just click on the Joomla images button at the bottom of the workspace.

Relative or Absolute URLS?

One problem of the JCE Editor is that it has a Code Checker which likes to replace absolute URLs with relative URLs. Since all images are URL links, this means that for all images, if you make a link
(http://www.example.com/images/stories)

JCE will replace it with relative URL (../images/stories). That is generally no problem – unless the article you are writing is for a mass email newsletter. Relative URLs are not allowed for email newsletters. We want to change this to No. Go to JCE Editor Profiles, Default, Editor Parameters, Setup and set Relative URLs to No. Then click Save. The sole advantage of using relative URLs is that we might not have to change links if we move an article from one website to another. But there are other problems created by moving articles from a website. So there is really no benefit to relative URLs. The JCE image manager now inserts full urls for images

There are many web functions, such as newsletters, that require full URLs rather than relative URLs. So we will use the JCE Editor set for absolute or full URLs right from the start of our web building when inserting images. The JCE Editor also has an easy tool for inserting links into articles and many other useful functions which we will review as we build our website. Now that we have installed a better text editor, we should take several steps to protect our new website from hackers. This is the subject of our next chapter.