Joomla JCE editor video tutorial. Joomla text editing

• Video tutorial.
• JCE Editor Core vs Pro.
• JCE vs TinyMCE.

The information is almost entirely up to date for Joomla 5 (note added on October 21, 2023).

Video tutorial

• Installation and editor switching – 00:00:35.
• Copying and pasting text – 00:01:58.
• Color, size, style, font type – 00:03:22.
• Text alignment – 00:04:57.
• Heading 1-6 levels – 00:05:26.
• Ordered list, Unordered list – 00:06:22.
• File Browser – 00:07:25.
• Image – 00:08:36.
• Image pop-up (JCE MediaBox) – 00:11:32.
• Inserting a link to a video in a pop-up window (JCE MediaBox) – 00:12:50.
• Link – 00:14:13.
• Anchor (link to a specific place on the page) – 00:15:45.
• Tables – 00:18:06.
• Read more (text division into introductory and full) – 00:23:33.
• Find and replace – 00:24:15.
• Quotes – 00:24:42.
• Indent – 00:25:26.
• Undo, Redo – 00:25:38.
• Code – 00:26:30.
• Subscript and Superscript – 00:26:40.
• Insert custom character – 00:27:01.
• Uppercase – 00:27:17.
• Insert horizontal ruler – 00:27:34.

Better watch video with «1080p HD» quality. This and other video reviews and tutorials can be found on my YouTube channel.

Links from the video:

• Joomla 4 video tutorials.
• JCE website.

In previous video tutorials we create responsive company website from scratch with a blog, portfolio and uploaded it to hosting. During video tutorials, we many times used the visual text editor TinyMCE to format the text. In this video tutorial, we will take a closer look at the alternative to built-in editor – JCE.

JCE, also known as JCE (Joomla Content Editor), is a popular content editor extension for the Joomla content management system (CMS). JCE is designed to enhance the content editing experience within Joomla, providing users with a more robust and user-friendly interface. Editor offers a range of features and capabilities to simplify the process of creating and editing content in Joomla.

Video tutorial recording date – June 30, 2023. Software from video review. Joomla 4.3.2, JCE Core 2.9.38 with JCE MediaBox 2.1.3.

JCE Editor Core vs Pro

Here are Pro features, but you will have to pay €29. You will also receive technical support from the developer on the forum.

Image Manager Extended.

• Modify image size, create thumbnails, and apply watermarks during the upload process.
• Utilize the Image Editor to resize, crop, rotate, and adjust various aspects like Brightness, Contrast, Saturation, and Gamma. Explore a range of creative effects inspired by photography and camera techniques, including Sepia, Grayscale, Polaroid, Pinhole, and Kodachrome.
• Generate a thumbnail of any specific portion of an image using the Thumbnail Editor.
• Select and insert multiple images within a single dialog session.
• Design responsive images for different devices using the srcset attribute.
• Easily create image popups with just a few clicks, requiring JCE MediaBox or a compatible Popup Extension.

Media Manager.

• Effortlessly manage and incorporate audio and video assets on your website. Pro version offers comprehensive support for popular media formats like mp4 and mp3, as well as legacy media formats such as Adobe® Flash®, Apple Quicktime®, and Windows Media Player®.
• Inserting videos from Youtube and Vimeo is a breeze – simply paste the URL and click Insert. You can also edit and customize various parameters for audio, video, Youtube, and Vimeo content.
• For quick insertion of media, including mp4, mp3, and content from media providers like Youtube, Vimeo, Dailymotion, Scribd, Slideshare, Soundcloud, Spotify, TED, and Twitch, you can utilize Quick Media. It's a convenient dropdown input available on the Media Manager button.
• Alternatively, you can directly paste a URL into the component to instantly embed content from any of the aforementioned media providers. This method employs the HTML markup provided by the respective providers for a seamless integration.

Columns.

• Designing horizontal layouts that combine text, images, and videos can be quite challenging, often requiring manual coding and a deep understanding of CSS or your template's CSS framework. However, with the help of columns, this process becomes much simpler.
• Columns provide a convenient solution by utilizing a generic set of Flexbox CSS styles or your template's CSS framework (currently supporting Yootheme UIKit and Bootstrap 4). This allows you to effortlessly create horizontal block layouts with equal-sized columns for various types of content. Additionally, you can enhance the responsiveness of these layouts for mobile devices by setting a minimum stack width. Furthermore, the component provides a collection of pre-defined layouts designed for different size configurations, further streamlining the design process.

File Manager.

• You can easily generate links to images, documents, media, and other commonly used file types. When linking files, Pro version allows you to display a corresponding file type icon, along with details like file size and modification date.
• Furthermore, you have the option to insert files as a link or embed the document using an iframe. This flexibility enables you to choose the most suitable method for displaying and interacting with the file content.
• Moreover, Pro version supports the creation of downloadable files by utilizing the download attribute. This attribute facilitates the generation of files that users can download directly from your website with a simple click.

Template Manager.

• You can conveniently insert pre-defined content from HTML or text files into your articles. Pro version allows you to create content snippet files by extracting specific content from entire articles or any selected portion, which can then be saved for future use and insertion.
• Additionally, you have the ability to set the initial content for new articles using a template file. This ensures that new articles start with the desired content structure and elements in place.
• To simplify the process of inserting content from saved files or HTML snippets, you can utilize the template items list accessible through the Template Manager button.
• Excitingly, Pro version now supports Markdown files, enabling you to effortlessly convert Markdown content to HTML. Whether you insert Markdown content directly or drag a Markdown file into the component, it is instantly converted to HTML for seamless integration.

Captions.

• You can easily create captions for images using Pro version. The component provides various styling options to customize the appearance of the caption text. You can modify attributes such as color, background, alignment, margin, and padding to achieve the desired visual effect for the caption text.
• Furthermore, Pro version allows you to style the caption container itself. You can customize the background color, alignment, margin, and padding of the caption container to complement the overall design of your website. These options give you greater control over the presentation of image captions and ensure they seamlessly integrate with the surrounding content.

Source Code Editor.

• Pro version offers a comprehensive set of features for source code editing. You can enjoy syntax highlighting, which visually distinguishes different elements of the code for improved readability. The component also supports tag matching and closing, making it easier to navigate and manage HTML or XML tags.
• Additionally, Pro version includes a powerful search and replace functionality. You can search for specific code snippets or patterns within your code, and even utilize regular expressions for more advanced search operations.
• To help you maintain a tidy workspace, code folding is available. This feature allows you to collapse sections of complex code, reducing visual clutter and allowing you to focus on specific areas of interest while working on your project.

Iframes.

• With Pro version, you can effortlessly create and edit iframes, which are commonly used to embed content from external sources into web pages. This feature allows you to include various types of media, such as videos, maps, or interactive elements, within your website.
• When it comes to inserting Youtube and Vimeo videos, Pro version offers a simple and user-friendly process. All you need to do is paste the URL of the desired video into the component and click Insert. This streamlined method ensures that your Youtube and Vimeo videos are seamlessly integrated into your content with ease.

Microdata.

• Pro version provides Microdata tools that enable you to structure your content with hidden metadata. By utilizing these tools, you can add additional information to your content, allowing search engines to gain a better understanding of its context and improving search results. This inclusion of metadata assists with search engine optimization (SEO) efforts, ultimately enhancing the visibility and discoverability of your content on the web.

JCE vs TinyMCE

TinyMCE and JCE are both popular rich text editors used in web development, but they differ in terms of their features, supported platforms, and integration capabilities.

Features.

• TinyMCE is a highly customizable and feature-rich WYSIWYG (What You See Is What You Get) editor. It offers a wide range of formatting options, including text styling, tables, lists, media embedding, and more. TinyMCE also supports plugins, which allows developers to extend its functionality.
• JCE (Joomla Content Editor) is a specific component designed for the Joomla content management system. It provides a user-friendly interface with features like image and file management, advanced link handling, table creation, and multimedia embedding. JCE also supports a variety of plugins to enhance its capabilities.

Supported Platforms.

• TinyMCE is a platform-independent component that can be integrated into various web applications and content management systems, including but not limited to Joomla, WordPress, Drupal, and others.
• JCE, as mentioned earlier, is specifically designed for the Joomla CMS. It is tightly integrated with Joomla and is not intended for use with other platforms.

Integration.

• TinyMCE provides extensive documentation, APIs, and integration guides, making it relatively easy to integrate into different platforms. It offers flexible customization options and allows developers to tailor the editor to their specific requirements.
• JCE is built specifically for Joomla, and its integration with the CMS is seamless. It is usually installed as a Joomla extension, and its configuration and usage are tightly integrated into the Joomla administration interface.

In the table below:

• «-» – there is no such possibility/tool.
• «+» – there is such an possibility /tool.
• «++» – there is such an possibility /tool with more advanced functionality/settings.

Below you can see examples of some of the JCE tools.

In the next video we will work with Articles and look at the Com_content component.

Article author – Aleksej Khoroshevskij

Ph.D., lecturer at Kharkiv National University of Radio Electronics, web developer, and SEO specialist with over 15 years of experience. Expert in website creation using Joomla and WebSite X5. Author of scientific publications, video courses, and educational content on web development and SEO. Runs a blog and a YouTube channel, sharing knowledge and practical experience. Provides services in website development, customization, maintenance, and promotion. Learn more about the author… Contacts: +38 095 840 24 29 +38 095 840 24 29 +38 095 840 24 29 email@aleksius.com Social networks: LinkedIn Facebook YouTube (Twitter) Publications and work: Google Scholar Scopus Upwork Freelance.ua

Useful links:

• JCE official site.