Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Choosing an Editor

In the Article Manager, you can create new articles using a what-you-see-is-what-youget (WYSIWIG) editor. However, the editors that come with Joomla aren’t very good at representing how an article will look on your site. This is because all the styles available in your templates are not fully represented in the standard editors.

Editors are plug-ins, and Joomla comes with three of them. The Code Mirror and No Editor editors are best for hand coding content in HTML. The TinyMCE editor is similar to a word processor, but it’s very simplified and limited in its features. More robust third-party editors are available at no cost, and we strongly recommend you try one of them (see “Popular Joomla Editors”).

To use the Joomla editors:

  1. Log in to the back end.
  2. Choose Content Article Manager, and open the article titled “Editor.”

    TinyMCE editor is the default editor for the site. Wherever you can enter content, this is the editor that is used circle-a.jpg.

  3. Close the article, and choose Extensions > Plug-in Manager.

    The Plug-in Manager displays all plug-ins installed on the site. Plug-ins are like mini-applications, such as editors, that work with Joomla features.

  4. From the Select Type drop-down list, choose editors circle-b.jpg.

    This list offers two editor-related choices: editors, which includes all the editors in use by Joomla; and editors-xtd, which are additional features for those editors such as the add image, read more, and page break buttons.

    All three Joomla editors are currently enabled circle-c.jpg:

    • Code Mirror: A pure coding editor. It displays code with tabs, line numbers, and color-highlighted coding.

    • None: A plain text editor.

    • TinyMCE: The Joomla WYSIWYG editor.

  5. Click the Editor-TinyMCE title.

    Editor plug-ins have parameter settings to completely customize the editor for your workflow and level of expertise circle-d.jpg.

  6. Close the TinyMCE editor plug-in.

To install a third-party editor:

  1. Download the editor plug-in you want to install.
  2. Choose Extensions > Extension Manager.

    The Extension Manager is where you install or uninstall all Joomla components, modules, plug-ins, and templates circle-e.jpg.

  3. Click Browse and locate the editor plug-in on your computer.
  4. Click Upload & Install.

    If the plug-in installs successfully, you will see a success message and information about the plug-in circle-f.jpg.

    Now that you have successfully installed the plug-in, make sure it is enabled.

  5. Choose Extension > Plug-in Manager.
  6. Sort the list to display only editor plug-ins, by choosing Type > editors.

    Some extensions are enabled during installation; however, you should always verify that a newly installed extension is enabled.

    The Artof Editor is installed and now appears in the Plug-in Manager circle-g.jpg.

  7. In the Enabled column, click the circle to enable the Artof Editor plug-in for use on the site.

    When the Enabled column displays a red and white circle, the plug-in is not enabled.

To assign an editor to a user:

  1. Log in to the back end as a Super User.
  2. Choose Site > My Profile to open your profile details.

    The My Profile link is associated with the user logged in to the back end of the site. To manage other users, you would use the User Manager circle-h.jpg.

  3. Under Basic Settings, choose an editor from the Editor drop-down menu circle-i.jpg.

    If you do not see the desired editor in the list, it may not be enabled. Enable the editor in the Plug-in Manager.

    You can select an editor on a per user basis, or use the editor that is set as the site default in Global Configuration. By identifying a specific editor in your profile, you change only the editor that you use. All other users will still use the default site editor.

  4. On the toolbar, click Save & Close.
  5. If you want to assign the new editor as the default for both the front and back ends of the entire site, choose it under Site > Global Configuration > Site circle-j.jpg.
  6. Choose Content > Article Manager.
  7. Open the article titled “Editors.”

    The new editor plug-in is installed, enabled, and selected for your profile. Whenever you edit any content on the site—front or back end—this editor will be used circle-k.jpg.

To link an editor to your template styles:

  1. Choose Extensions > Template Manager.
  2. Choose Templates to open Template Manager: Templates circle-l.jpg.
  3. Scroll down and select the title beez_20 details to list all the index.php and .css files used by the selected template circle-m.jpg.

    Some editors, but not all, allow you to choose styles from your template so you can apply specific styles directly to your content in the editor. The default file used by the system is editor.css, but most template providers store typography styles in the template.css or typography.css files.

    By examining the .css files, you can find where your template stores the typography styles.

  4. Close the Template Manager.
  5. Choose Extensions > Plug-in Manager.
  6. Choose and open the TinyMCE editor plug-in.
  7. Under Basic Options in the Custom CSS classes, type the full path to the .css file used by your template circle-n.jpg.
  8. Under Basic Options in the Functionality drop-down menu, choose Extended.

    We will be using the extended TinyMCE editor for the remainder of this book circle-o.jpg.

  • + Share This
  • 🔖 Save To Your Account