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:
-
The path where you can find CKEditor. For Joomla 3 the path to CKEditor is:
Here, `%joomla%` is the directory where Joomla is installed to.
%joomla%/plugins/editors/ckeditor/
- 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:
- Open the CKEditor configuration dialog in the Components menu as it was shown in the Step 2 above.
- Press F12 on your keyboard to bring up the browser console.
- Switch to the Elements tab.
- 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:
- Right-click the highlighted element and choose "Edit as HTML":
- Add
id=”adminForm”
inside the form tag as shown below: - Click outside the element to save changes in the HTML code.
- 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:
- Locate this folder in your Joomla installation via FTP or a file browser:
/administrator/components/com_ckeditor/config/views/config/tmpl/
- Download `default.php` file from that folder and make a backup of it, then open it for editing.
- Find the following line in the file:
<form action="index.php" method="post" name="adminForm" class="form-validate form-horizontal">
- Replace this entire line with this one:
<form id="adminForm" action="index.php" method="post" name="adminForm" class="form-validate form-horizontal">
- 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.