Artof Editor is a plugin extension for Joomla that provides support for the WYSIWYG CKEditor in text edit area.
CKEditor is a text editor to be used inside Joomla articles. It’s a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice.
- CKEditor 3.6.2
For more information see the end-user features page on the CKEditor site.
In addition, this plugin exhibits the follow features of interest to developers for training purposes:
- A custom parameter element to support the loading of local language files (see
- A custom parameter element to add help text within the parameters area of the plugin (see
- Joomla 1.5, 2.5 or 3
- PHP 5.2+
This extensions requires a low working knowledge of Joomla to configure and use to its maximum potential. Please familiarise youself with all instructions first.
All extensions are automatically installed from the one package.
- The CKEditor editor plugin with CKEditor 3
License and Support
The CKEditor plugin is free to download (no registration required) and use on any number of Joomla web sites. It is released as Open Source under the GNU General Public License.
The full source code can be found on Github.
No documentation is available. Please see the CKEditor.com site for end-user features and instructions.
No official support is provided. However, usage difficulties can be reported on the Art of Joomla issue tracker.
Improvement suggestions are welcome. Commissioned feature improvements can be negotiated.
If you find any this extension useful, please consider paying us forward (not paying us back) by supporting one of our nominated charities Kiva.org or World Hope Australia and help fight world poverty! Let us know if you do.
Installing and Upgrading
Download the extension package using the link above.
Log into the Joomla Administrator.
Select Extensions -> Install/Unistall from the menubar.
Click Browse and select the extension package from where you downloaded it onto your computer.
Click Upload & Install File (alternatively use the other installation methods available if desired).
Before upgrading it is always good practice to backup your web site files and database. It is also a good idea to test the upgrade on a copy of your web site.
To upgrade to a new version of the extension just repeat the steps above with the new package when it becomes available. You do not need to uninstall the extension first. Just install the new version over the top of the existing one.
The Artof Editor extension installs as a plugin in the “editors” group. It has a number of settings that you can customise.
CKEditor comes with a number of languages and you can select from one of these. Please note that these language files may not be complete and are maintained by the CKEditor developers, not us.
You are allowed to choose the editor toolbar to use for users logged into the backend administrator.
CKEditor has two built-in toolbars named “Full” and “Basic”. You also have the ability to define and extra two custom toolbars (explained below).
You are allowed to choose the editor toolbar to use for users logged into the frontend site the same as for the Backend Toolbar.
Custom Toolbar 1
Custom Toolbar 2
You can define your two of your own custom toolbars. For more information see the CKEditor Developers Guide or you can use the suggestions below.
You can choose one of three skins that come with the CKeditor.
If you are using the Kama skin, you can define the HTML code for the background colour.
Suggestion for Custom Toolbar 1
['Source'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About']
Suggestion for Custom Toolbar 2
['Source'], ['Cut','Copy','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['Link','Unlink','Anchor'], ['Image','Table','SpecialChar','PageBreak'], ['Format']
To edit hyperlinks and images, just double-click on them in the editor area.
There is an odd bug in some browsers where if you type text, then insert a Read More or Page Break, you will not be able to add text after the HR that is inserted into the text area. To work around this, always ensure that you insert a Read More or Page Break between paragraphs, not at the very end of the text.
Also, the editor does not fill the text area box fully sometimes when you first open an article. Just click in the WYSIWYG area and it should automatically expand.