Installing CKEditor to Joomla

Here is a quick step by step guide on installing CKEditor on your Joomla-powered website.

Step 1: Download CKEditor

Download the CKEditor for Joomla extension from this link: http://js.plus/products/ckeditor-for-joomla
Choose the version of the package corresponding to the version of Joomla you have. For the sake of this tutorial we will use Joomla 3.

Step 2: Install CKEditor to Joomla

Login to your Joomla administrator panel and go to “Extensions | Manage”, then select “Install”:

We need the first option: “Upload Package File”. Click the “Choose File” button and select the Joomla package you downloaded on Step 1. Then click the “Upload & Install” button. Joomla will start uploading the file and installing CKEditor.
Once it finishes, you should see the successful installation message and CKEditor settings opened automatically:

If it doesn’t, you can open CKEditor in your administration panel at any time by using the Components menu:

Step 3: Activate CKEditor

Now, you need to set CKEditor as a default editor in Joomla. Open the “System | Global Configuration” and choose CKEditor as shown on the screen below:

Step 4: Install plugins to CKEditor

Please refer to corresponding plugin installation guides if you need to install some add-on to CKEditor. Specific to Joomla are two things:

1. The path where you can find CKEditor. For Joomla 3 the path to CKEditor is:

           %joomla%/plugins/editors/ckeditor/

   Here, `%joomla%` is the directory where Joomla is installed to.
2. You don’t need to manually edit `config.js` when you customize CKEditor or install plugins to it. Here is how you can modify `config.js`. Open CKEditor Configuration from the Components menu as shown above. Switch to the Advanced Settings tab and scroll down:
   
   In the Custom Configuration section you can add any parameters you would otherwise define by directly editing the `config.js` file. So, whenever in a JS+ plugin installation guide you read “edit config.js” and you are using Joomla – know that you can use the built-in possibility to do this. Finally, you can start using CKEditor both in the administration and frontend editors of Joomla:
   
   Here, you can see JS+ Image Editor plugin is installed to CKEditor.
   

Known issues

Installing CKEditor to Joomla 3 may lead to being unable to save its settings using the Joomla Components dialog. The problem is as follows: whenever you click the “Save”, “Save and Exit” or “Close” buttons nothing happens. This is too bad, because now you cannot install a plugin to CKEditor, nor can you adjust default settings of CKEditor itself.

If you experience the same problem, here is a workaround:

One-time solution:

1. Open the CKEditor configuration dialog in the Components menu as it was shown in the Step 2 above.
2. Press F12 on your keyboard to bring up the browser console.
3. Switch to the Elements tab.
   
   
4. Press Ctrl+F and type <form to the search box to locate the form tag in the HTML source. The nearby code fragment should look as shown below:
   
   
5. Right-click the highlighted element and choose "Edit as HTML":
   
6. Add id=”adminForm” inside the form tag as shown below:
   
7. Click outside the element to save changes in the HTML code.
8. Now, you can modify CKEditor settings and save them.

NB! This works for one save operation only. Whenever you need to edit CKEditor settings again you will have to change the <form> tag again.

Permanent solution

This solution will require you to have an FTP access to .php files of the CKEditor for Joomla source code.

Here is a step-by-step:

1. Locate this folder in your Joomla installation via FTP or a file browser:
   

   /administrator/components/com_ckeditor/config/views/config/tmpl/

2. Download `default.php` file from that folder and make a backup of it, then open it for editing.
3. Find the following line in the file:
   

   <form action="index.php" method="post" name="adminForm" class="form-validate form-horizontal">

4. Replace this entire line with this one:
   

   <form id="adminForm" action="index.php" method="post" name="adminForm" class="form-validate form-horizontal">

5. Save the file and upload it back to your server replacing the existing one. Reload Joomla administration panel in your browser. Now, you can edit CKEditor settings and save them.