Tutorials

The tutorials below will give you an insight into the 2.6.x and 3.x series of the editor. There is a section on Frequently Asked Questions, Installation and Trouble Shooting. If you are unable find an answer, please feel welcome to voice your query to the community on the support forums or purchase a subscription for professional support.

Toggle all descriptions Collapse all descriptions
FAQs

Please be advised that some features are not present in the 3.x series.

# Article Title Author Hits
1 Creating custom templates?

A template is a predefined piece of HTML that can be applied to the editors editing area. By default the editor comes with three sample templates which can be modified
fitting the end users needs. These templates can be created and changed by simply modifying the default.js file found at:-

/public_html/plugins/editors/jckeditor/plugins/templates/templates/default.js

You can create and define your templates by simply adding your custom HTML code to the default.js file as detailed below:-

{
        title: 'Image and Title',
        image: 'template1.gif',
        description: 'One main image with a title and text that surround the image.',
        html: '<h3><img style="margin-right: 10px" height="100" width="100" align="left"/>Type the title here</h3><p>Type the text here</p>'
    }

Example file:-

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.addTemplates('default', {
    imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates') + 'templates/images/'),
    templates: [
    {
        title: 'Image and Title',
        image: 'template1.gif',
        description: 'One main image with a title and text that surround the image.',
        html: '<h3><img style="margin-right: 10px" height="100" width="100" align="left"/>Type the title here</h3><p>Type the text here</p>'
    },
    {
        title: 'Strange Template',
        image: 'template2.gif',
        description: 'A template that defines two colums, each one with a title, and some text.',
        html: '<table cellspacing="0" cellpadding="0" style="width:100%" border="0"><tr><td style="width:50%"><h3>Title 1</h3></td><td></td><td style="width:50%"><h3>Title 2</h3></td></tr><tr><td>Text 1</td><td></td><td>Text 2</td></tr></table><p>More text goes here.</p>'
    },
    {
        title: 'Text and Table',
        image: 'template3.gif',
        description: 'A title with some text and a table.',
        html: '<div style="width: 80%"><h3>Title goes here</h3><table style="float: right" cellspacing="0" cellpadding="0" style="width:150px" border="1"><caption style="border:solid 1px black"><strong>Table title</strong></caption></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table><p>Type the text here</p></div>'
    }]
});

For more information on this topic please see the cksource documentation: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Templates

Read More
Administrator 747
2 How to add new font types?

It is possible to configured the list of font’s names to be displayed in the Font combo in the toolbar. To do this you will need to simply configure the 'config.js' file.

This is found at:-

plugins/editors/jckeditor/config.js

You can define new fonts by adding a new parameter to the config.js file as detailed below:-

config.font_names = 'Arial;Times New Roman;Verdana';
Read More
Administrator 592
3 How to @import in Cascading Style Sheets?

The @import rule allows you to include external style-sheets in your (defult) template.css file. Both versions of the editor support this rule.

  1. Set the editor to look at your (defult) template.css file or equivalent defult css file.
  2. At the top of the template.css file (or equivalent css file) use the css important rule to include external style-sheets. It should look something like this:
Code:
@import url(doclink.css);

 

Read More
Administrator 488
4 Configuring the editor toolbars?

By default version 3.0 comes preconfigured with 5 different toolbar sets. These toolbar sets can be configured by modified the .php toolbar files found in:-

Read More
Administrator 937
5 Configuring the editor for real-time editing?

The editor will automatically load in any text area element, where it has been call to display. If set to ‘false’ or ‘0’ in the plug-in's parameters, it will only load on click for real-time editing. This is set for components where it is necessary to use multiple text area in a real-time environment, but can be overridden and set to operate in Joomla’s, Sections, Categories and Articles by configuring the parameters in the startconfig.php file to ‘True’ or ‘1’.

Read More
Administrator 551
6 Where can I find my systems information?

Joomla has a helpful set of tools that informs the Administrator of the system configuration and software version. This information can play an essential part when troubleshooting setup problems. To locate this information, please select Help (on the top menu admin) and click on System Info.

Read More
Administrator 601
7 Setting the background colour of the editor?

Visit the backend (administration section), go to ‘Extensions’ on the top menu bar and then clicks on ‘Plug-in Manager’.
Read More
Administrator 301
8 Setting the font colour in version 2.6x?

To do this you will need to login into the backend (administration section) and then go to ‘Extensions’ on the top menu bar and then clicks on ‘Plug-in Manager’. Scroll down and click on the ‘JoomlaCK' or 'JoomlaFCK ’(depending on the version), once opened you will be able to change the 'Location path of the files?’ in parameters on the left-hand side.

Read More
Administrator 243
9 How to manually uninstall version 2.6x?

In some instances users have reported that their version upgrades have corrupted or do not function correctly. This could be due to number factors but if Joomla! hasn’t completely uninstalled the editor correctly you may need to remove the files manual!

Read More
Administrator 244
10 Changing the location path of the Flash, Media and Documents files?

To do this you will need to login into the backend (administration section) and then go to ‘Extensions’ on the top menu bar and then clicks on ‘Plug-in Manager’. Scroll down and click on the ‘JoomlaCK' or 'JoomlaFCK ’(depending on the version).

Once opened you will be able to change the 'Location path of Flash, Media and Documents files’ in parameters on the left-hand side.

Read More
Administrator 474
11 Changing the image director path?

By default the editor’s image pathway is set to:

/images/stories/ 

This is set to Joomla!’s default configuration however, it is possible to customise the pathway in the editor's plug-in.

Read More
Administrator 356
12 Setting the width of the editor?

By default the editor’s width is set to 100% this calls the editor to atomically grow and fit different browsers sizes. As different configuration vary it is possible that you many want to define the width in pixels!

Read More
Administrator 274
Installation Guide
# Article Title Author Hits
1 Installation Guide

The new CK architecture, marks the next generation of internet based editors. Its performance is truly amazing, thanks to its brand-new state-of-the-art JavaScript API engine and boasts in a fully customizable platform. It's up-to-date with the new JavaScript development requirements, offering a rich and powerful integration and interaction API. Its architecture is totally plug-in based, and it can be extended and modified in all senses to fit all needs.


System Requirements

The editor’s server-side requirements are the same as Joomla!'s, so if you using the recommend configuration, the editor will work out of the box.

Joomla! runs on the php pre-processor. Php comes in many flavours, for a lot of operating systems. Beside php you will need a web server. Most of the times Apache is used, but also php can run on different web-servers like Microsoft IIS. From version 1.5.8 Joomla requires php 5, this was due to a new JURI method--isInternal($url)— being introduced which addressed a security hole in previous versions.

Read More
Administrator 11557
2 JoomlaCK Manager - Installation Guide

The JoomlaCK Editor Manager opens up a world of possibilities! In it simplest form - it’s a way of effortlessly extending the JoomlaCK framework, without any programming knowledge! And because the JoomlaCK editor is built upon a state-of-the-art plug-n-play framework, you can expand it and shape it in any direction! However, it’s not mandatory for the editor to work, and not a requirement if you wish to manually install and configure JCK plugins.

Read More
Administrator 360
3 Installing the PSPELL module on Windows based servers

PSPELL can be used starting with PHP version 4.3.3. To use it on your server, follow the instructions below:

If using Microsoft Windows, you must allow the web server user to execute the aspell program. For this you must: Open the <windows_root>System32\ folder.
Right-click on the cmd.exe file and select the Properties item. On the Security tab select the user that runs the web server and check the Read and Execute options on the Allow column. Click OK to apply the changes.

Read More
Administrator 252
4 Updating / Installing Aspell (Pspell) on Unix

Note that many servers' default installation of GNU Aspell is outdated, so if you update the spellerpages/server-scripts/spellchecker.php ( or .cfm/ .pl) to use the defaults as entered by FredCK, your spellchecker will likely fail. cPanel-based servers in particular will only have v 0.33, which does not have the HTML filter available, nor the encoding option.

Read More
Administrator 233
5 How to Installing Joomla Components, Modules and Plugins? Administrator 58
6 How to install the 2.6.x series (JoomlaFCK editor) on Joomla! 1.0.x

The plug-in is relatively simple to install and setup. It does not require FTP access or programming knowledge and can be installed via the Administrator section using Joomla! installer.

Read More
Administrator 348
Trouble Shooting
# Article Title Author Hits
1 How to Change File Permissions in Joomla!?

As a Joomla developer, you have seen a CSS file or template show in red as "unwritable" in the administration area after you make a change to the file. This is very common and can be a bit unnerving at first. This change does not affect the file or cause it to stop working properly, it just means that the permissions have been changed on the server. There is a simple way to change the permissions on these files so that they are shown in green as "writable" and this article will explain how to make the change.

For the purpose of this article, I assume that you are familiar with the Joomla administration area and understand how to use FTP to access the files on the server that is hosting the site.

First, you will have to use an FTP program and login in to the location of your Joomla site. You will have to use an FTP program that allows you to change permissions directly on the server, most do. Also, you will have to have your site hosted by an ISP that allows you to change file permissions. It's rare these days to have an ISP that will not allow you to change permissions.

If you want to change the permissions on a template, after logging in to the root of your server via FTP, go to "Templates" and then look for your default template, enter that directory and then look for "CSS". Look for the name of the file that needs to have its permissions changed. Highlight it then select "Info" or "Permissions" or use whatever method your FTP program uses for allowing you to view the permission setting on a particular file.

You want to make sure that "Owner Access" is set to on. This is giving permission for the file to be "Writable" by only the owner. DO NOT make any of the other owners writeable, the other two are "Group Access" and "Others" as this will create a security problem by allowing visitors to change the document.

Close the FTP Program. Go back to the Administration area of your Joomla install, check the CSS area and your file should now show as "Writable" in green.

The same technique can be used on any document that is showing as unwritable, regardless of what type of file it is. You will just have to find the location of the document on your server to make the change.

Please make sure you understand this procedure well before attempting to make any permissions changes. If you feel uncomfortable with this, contact your ISP for assistance.

Since 1996, Marc Harris has been a principal of a web design firm and has managed site development projects for numerous clients. Marc now works almost exclusively with Joomla and is writing articles about understanding Joomla. You can find more free Joomla video tutorials at 5minutejoomla.com.
Read More
Marc B. Harris 177
2 JFTP:: Write: Bad Responce
JFTP:: Write: Bad Responce. Unable to Write Entry

If you have received the following error when installing the editor; it is possible that your Joomla FTP library has not been configured correctly.  The simplest solution is to switch it off and install the editor again via Joomla’s extension manager.

Read More
Administrator 194
3 This connnector is disabled (2.6x Series)

When trying to add an image, if I try and upload, or "browse server" I get an alert box saying:

This connnector is disabled. Please check the editor/filemanager/connectors/php//config.php

What should I do?

Read More
Administrator 151
4 You don't have permission to access

You don't have permission to access...The error message is telling us that the editor does not have permission to talk to the necessary file. In other words the editor is trying to access a file but your servers file permission setting are not allowing this to happen. Every directory or file in the Linux file system contains settings for who can read, write or execute the file. These settings are called permissions. Each file or directory is assigned to a specific user and group.

The recommended sever-side requirements for Joomla to work correctly is:

• To use the file permission values, 755 and 0644 for folders and files respectively
• PHPsuExec, php_suexec or suPHP installed


For more help please see:

  • For more information on Joomla’s and the editor’s system requirements please see the following documentation for help: - Read more...
  • How to Change File Permissions in Joomla!: - Read more…
Read More
Administrator 234
5 Maximum execution time exceeded
Fatal error: Maximum execution time of 60 seconds exceeded in H:\Joomla\administrator\index2.php on line 40

If you have received the error above or a similar error your server has a maximum execution time of 60 seconds. This means that your server is unable upload and install the editor within the allocated time set by your hosting provider.

Read More
Administrator 317
6 “Warning: css/template.css does not appear to be a valid file...

As standard practice the editor look for a CSS file called “template.css” in the CSS folder in the template folder.  If your template uses a differently file name for your CSS stylesheet or stylesheet is located in a different folder you would have received the following error: -
 

Read More
Administrator 350
7 Why does some HTML get removed from articles?

From Joomla! 1.5.8, a default filtering choice was placed for those who have not selected an Article Filter option. The default applied for those who have not made a selection implements "black list" filtering as a security precaution against possible XSS.

Read More
Administrator 427