Joomla Article Editor — TinyMCE, JCE and Code Mirror Editors

In this tutorial, you'll learn how to use and configure the three main editors in Joomla — TinyMCE, JCE, and Code Mirror — to create and format articles with images, links, tables, and custom HTML.

What You'll Learn

• Using the default TinyMCE editor: toolbar buttons, formatting, and configuration
• Configuring TinyMCE options: toolbar sets, skins, language, and extended features
• Installing and configuring the JCE editor as an alternative
• Using Code Mirror for plain text and HTML editing with syntax highlighting
• Editor-xtd plugins for inserting readmore, pagebreak, images, and contacts
• Best practices for content formatting and Accessibility in Joomla
• Troubleshooting editor issues and toolbar customization

Why It Matters

The article editor is where you spend most of your time creating content. Knowing how to use it efficiently saves hours over the life of a site. Beyond basic typing, editors have settings that control what formatting options are available, how images and links are inserted, and whether users can access HTML source code. Configuring the right editor for your users prevents frustration and ensures consistent content quality.

Real-World Use

A team of five content authors writes articles for a corporate Joomla site. Two are experienced with HTML and want access to source code. Three are non-technical and should only see the basic formatting toolbar — bold, italic, lists, links, and images. The editor is configured with two toolbar sets: a full set for advanced users and a basic set for content authors. Each user group sees the appropriate toolbar automatically.

Learning Path

flowchart LR
  A["Tags & Organization"] --> B["Article Editor
You are here"]:::current
  B --> C["Content Modules"]
  C --> D["Categories Deep Dive"]
  D --> E["Workflow & Publishing"]

  classDef current fill:#38bdf8,color:#0f172a,stroke-width:2px

TinyMCE Editor

TinyMCE is the default WYSIWYG editor in Joomla. It provides a word-processor-like interface for creating content without writing HTML.

Default Toolbar

When you open the article editor, TinyMCE shows these toolbar buttons by default:

• Formatting: Bold, Italic, Underline, Strikethrough
• Alignment: Left, Center, Right, Justify
• Lists: Bulleted list, Numbered list
• Links: Insert/edit link, Remove link
• Media: Insert/edit image, Insert/edit video
• Tables: Insert table, table properties
• Blocks: Paragraph, Heading 1-6, Preformatted
• Insert: Horizontal rule, Special characters, Anchor
• Tools: Source code, Fullscreen, Find and replace
• Undo/Redo: Standard undo/redo buttons

Understanding the XHTML Output

TinyMCE produces XHTML-compliant code. This means:

• All tags must be closed: <br /> not <br>
• All attributes must be quoted: class="my-class" not class=my-class
• Tags must be properly nested: <strong><em>text</em></strong> not <strong><em>text</strong></em>

This ensures your content works across browsers and screen readers.

Configuring TinyMCE

To customize TinyMCE:

1. Go to Extensions > Plugins.
2. Search for "TinyMCE" and click to edit.
3. In the Plugin tab, you can set:
   • Toolbar: Choose from predefined sets (Small, Medium, Large, Custom)
   • Skin: Visual style (default is oxide)
   • Language: Interface language
   • Text Direction: LTR or RTL
   • Prohibited Elements: HTML elements that cannot be used
   • Valid Elements: Whitelist of allowed HTML elements
4. In the Advanced tab:
   • Set Custom Toolbar Buttons: Define exactly which buttons appear
   • Resize: Allow editor resizing
   • Path Location: Show HTML path at bottom
   • New Document URL: Default stylesheet for editor content

Custom Toolbar Sets

Joomla provides three default toolbar sets:

Small (Basic):

bold, italic, link, unlink, image, code

Medium (Default):

bold, italic, underline, strikethrough, alignleft, aligncenter, alignright, formatselect, bullist, numlist, outdent, indent, link, unlink, image, table, code, fullscreen

Large (Extended):

bold, italic, underline, strikethrough, superscript, subscript, alignleft, aligncenter, alignright, formatselect, bullist, numlist, outdent, indent, link, unlink, anchor, image, video, table, hr, charmap, code, fullscreen, visualblocks, searchreplace

You can create custom toolbar sets by editing TinyMCE plugin options and specifying toolbar button codes.

JCE Editor

JCE (Joomla Content Editor) is a popular third-party editor with more features than TinyMCE. It is not included with Joomla core.

Installing JCE

1. Download JCE from the JCE website or Joomla Extensions Directory.
2. Go to Extensions > Extension Manager > Install.
3. Upload the JCE package ZIP file.
4. JCE appears as two extensions: JCE Editor (plugin) and JCE Media (file browser).

Configuring JCE Profiles

JCE uses profiles to control what different user groups see. This is its most powerful feature. To configure:

1. Go to Components > JCE Editor > Profiles.
2. Each profile has:
   • Name: Profile identifier
   • User Groups: Who this profile applies to
   • Editor Layout: Which toolbar buttons appear
   • File Browser: Media Manager integration or JCE Media browser
   • Editor Parameters: Width, height, font size, CSS classes

Key JCE Features

JCE offers features not in the default TinyMCE:

• Extended file browser: Browse folders, upload multiple files, crop and resize images
• Table editing: Merge cells, split cells, table properties dialog
• CSS styling: Apply custom CSS classes from your template
• Link management: Browse internal articles, contacts, and menu items when linking
• Code highlighting: Syntax highlighting for code snippets
• Spell checker: Built-in spell check
• Image editing: Basic crop, resize, rotate within the editor

Code Mirror Editor

Code Mirror is the plain text editor in Joomla. It provides syntax highlighting for HTML, CSS, PHP, and JavaScript.

When to Use Code Mirror

Use Code Mirror when:

• You need to paste raw HTML without TinyMCE modifying it
• You are editing template files, module positions, or custom module content
• You want to see exactly what is in the source code
• TinyMCE's auto-formatting is interfering with your markup

Switching to Code Mirror

You can switch editors per user:

1. Go to Users > User Manager.
2. Edit your user profile.
3. In the Basic Settings tab, set the Editor to "Code Mirror."

Or switch per session in the article editor by clicking the Toggle Editor button.

Code Mirror Features

• Syntax highlighting for PHP, HTML, CSS, JavaScript, XML
• Line numbering
• Bracket matching
• Automatic indentation
• Search and replace

Code Mirror does not format content for you. What you type is exactly what gets saved. This is both its strength (no unwanted formatting) and its weakness (no visual preview).

Editor-XTD Plugins

Editor-xtd (extended) plugins add buttons to the editor that insert CMS-specific content. These are also called "CMS Content" buttons.

Readmore

The readmore button inserts a <!-- readmore --> tag. This splits an article into intro text and full text. The intro text appears in blog views, and users click "Read More" to see the full article.

Pagebreak

The pagebreak button inserts a <!-- pagebreak --> tag with optional title and table of contents. It splits long articles into multiple pages. The Page Navigation module helps users navigate between pages.

Image

The image button opens the Media Manager to select and insert an image. It generates the <img> tag with configurable attributes (alt text, alignment, caption).

Article

The article button opens a dialog to select and insert a link to another Joomla article. This makes internal linking easy without remembering URLs.

Contact

The contact button inserts a link to a Joomla contact. Useful for staff directories or author pages.

Accessibility Features

Joomla's editors include accessibility features:

• Alternative text: The image dialog requires alt text for accessibility
• Heading structure: Proper heading levels (h1-h6) maintain document outline
• Link text: Meaningful link text instead of "click here"
• Table headers: Option to mark table header cells for screen readers
• Color contrast: Warning when text color lacks contrast with background

When editing content, always provide alt text for images, use headings in order (h2, then h3, not h2 then h4), and write descriptive link text.

Best Practices for Content Formatting

Use Headings Properly

Headings create a document outline that helps both users and search engines. Use them in order:

<h2>Section Title</h2>
<p>Content...</p>
<h3>Subsection Title</h3>
<p>More content...</p>

Do not skip heading levels (h2 then h4 without h3). Do not use headings for visual styling — use CSS instead.

Format Lists Correctly

<h3>Features</h3>
<ul>
  <li>Fast performance</li>
  <li>Built-in multilingual</li>
  <li>Flexible ACL</li>
</ul>

<h3>Installation Steps</h3>
<ol>
  <li>Download Joomla</li>
  <li>Create database</li>
  <li>Run installer</li>
</ol>

Add Meaningful Link Text

<!-- Bad -->
<p>Learn more <a href="/joomla/tutorials">here</a>.</p>

<!-- Good -->
<p>Read our <a href="/joomla/tutorials">Joomla tutorial series</a> for detailed guides.</p>

Use Images with Alt Text

Every image must have alternative text that describes the image content. This helps screen reader users and improves SEO.

Common Mistakes

1. Pasting from Word without cleaning: Word adds invisible XML markup that TinyMCE may or may not strip. Always paste from Word into a plain text editor first, or use the "Paste as Plain Text" button in TinyMCE.

2. Overriding editor settings for all users: TinyMCE settings apply globally. If you give everyone access to the source code button, non-technical users can accidentally break the HTML. Create separate user groups with different editor profiles.

3. Forgetting to switch to Code Mirror for HTML: When you paste raw HTML into TinyMCE, it reformats the code. This can break complex markup. Switch to Code Mirror when working directly with HTML.

4. Not configuring the file browser in JCE: JCE Media needs configuration before it works. Without it, the file browser does not show existing images or allow uploads.

5. Using too many heading levels: Beginners sometimes use h1 for every section title. Use one h1 per page (the article title), h2 for main sections, h3 for subsections, and so on.

Practice Questions

1. What is the purpose of the Readmore button in TinyMCE? Answer: The readmore button inserts a <!-- readmore --> tag that splits an article into intro text and full text. The intro appears in blog views, and users click "Read More" to expand.

2. When would you use Code Mirror instead of TinyMCE? Answer: Use Code Mirror when you need to paste or edit raw HTML without TinyMCE reformatting it, when editing template files, or when troubleshooting markup issues.

3. What is the advantage of JCE over TinyMCE? Answer: JCE offers profile-based toolbars per user group, an extended file browser with image editing, better table editing, CSS class application, and improved link management to internal content.

4. Challenge: Configure TinyMCE with three different toolbar sets. Set up a custom user group called "Content Authors" that uses the small toolbar set with only basic formatting buttons. Set "Administrators" to use the large toolbar set with all buttons including source code. Test both by logging in as each type of user.

FAQ

Mini Project

Your task: Create a style guide for Joomla content authors.

1. Install JCE editor or ensure TinyMCE is active.
2. Configure the editor for non-technical users: remove the source code button, limit headings to h2-h4, enable only essential formatting buttons.
3. Write a 500-word style guide document covering: proper heading usage, image alt text requirements, link text rules, list formatting, and when to use Readmore and Pagebreak.
4. Create a demo article that demonstrates all the formatting rules in your style guide.
5. Publish the style guide as an article on your Joomla site for reference.

What's Next

Now that you can create formatted articles, learn how to display them dynamically using content modules:

Continue to Lesson 8: Content Modules — Display articles with Latest News, Popular Tags, Related Articles, and other content modules.

Related lessons:

• Joomla Tags and Content Organization — Understanding tags before using content modules
• Joomla Modules and Module Positions — Module manager and position assignment details