Why use Ark instead of JCE as a Text Editor and Media Manager for Joomla!

Ark Editor DesktopOver the years, I have been approached by developers and clients alike with the question of what editor to use for Joomla. My answer has always been an emphatic appreciation for the ARK editor (formerly Joomlack). As I go through the process of migrating dozens of Joomla 1.5 and 2.5 websites to Joomla 3x, I decided it was time to question my assumptions once more to ensure I was using a software solution that serves to simplify the lives of my clients and my maintenance team. After reviewing both text editors again, I recommend ARK editor in conjunction with their media manager. Here are the reasons why:

 

Design

I mention this point first coming from the perspective of a designer with an MFA in fine art. I inherently value the user experience (UX) design that has gone into the Ark toolbar. I appreciate that their interface is well balanced with an attention to color, contrast, typography and intuitive, consistent iconography. The Ark editor is a pleasure to work with on a daily and even hourly basis. It is modern and completely customizable in terms of layout (so I can place my icons where I want them to be). Furthermore, my template typography styles load within the editor so I can see how the content will look on the front-end. Finally, the Ark editor is responsive, so the icons will shift and stack vertically as your viewport window gets smaller. Since Joomla 3x has an administrator interface that is responsive (the first of all of the most popular CMS’s) it is critical that the editor toolbar also be responsive; otherwise, you’re stuck on your tablet one day trying to scroll left to right to find that icon. Here’s a visual side by side of the two editors for you to judge for yourself.

ARK Editor

Ark Editor Administrator Toolbar

 

Detail View of ARK

Detail of Ark Editor Toolbar in Administrator Mode

JCE Editor

JCE Editor Toolbar in Administrator View


Client Features

The ARK editor has made it extremely easy for my clients to intuitively edit their content wherever they see it on their website. This means that a logged in user with frontend editing permission can click on any content that they see and edit it on the fly. It creates a seamless editing experience for them because they don’t have to think about where their content is located (ie:sidebar module, article, category description). The logged in user simply recognizes that a piece of content is out of date, misspelled or ready for new content and they click on the pencil icon right next to the content and edit it right there. The ease with which someone may edit supports the quality of their content, giving them the keys to realize the notion that “Content is King” (Bill Gates, 1996): a SEO truth that has become the backbone of page rankings and user engagement.

Demo: Inline Editing on a Phone, Tablet or Computer

  1. Click the pencil icon which is fixed on the right hand side of the screen.

  2. Enable the option for inline editing and turns the pencil teal.

  3. Click on the text that you want to edit.

  4. The simplified front-end toolbar shows up and the text is fully editable.


Inline Editing with the Ark EditorHow To Activate Inline Editing with the Ark Editor
 

Video Demonstration (for those of you who love to watch)

 

Clean Code

So this may all seem too good to be true. There must be a catch right? How about the HTML and CSS, is it bloated? The simple answer is no. The Ark editor writes very clean HTML that you can edit and view by simply clicking the “Source” or “Elements” tab depending on your comfort level with HTML. The HTML is formatted with color coding and spacing to make it easy to identify issues in the structure.

Source View

Ark Editor Source Code View

 

Elements View

Ark Editor Elements Code View

Here is the same HTML in JCE which lacks the color coding for easy identification:

JCE Source Code View

One Stop for Image Uploading and Editing

I use the Ark editor in conjunction with Ark Media Manager to provide a total solution for my clients. Oftentimes preparing images for the web is the highest barrier to entry for most clients who wish to manage their own website. They want something easy to use, fail safe, and intuitive. Even with preparing detailed tutorials and video demos for editing images in a desktop software, I still found my clients uploading 10mb images to their blog or slideshow. As such, the release of the Ark Media Manager Pro has provided me with a tool that I can install and configure on my sites to ensure client satisfaction. With the release of this product, JCE as truly lost it’s edge since the image editing (cropping, resizing, etc) was its main advantage.

To show you how the Ark Media Manager Pro works, here’s sequence of screenshots and steps demonstrating the workflow. I’ve also created a quick video below as well.

From your editor window, place your cursor where you want the image to go in your text. Click the image icon in your toolbar to add a new image.

Inserting and Adding a New Image to the Website’s Media Manager

Choose an image with Ark Editor

Navigate to the folder where you want to place your image or Create a New Folder for your image.  

Double-click on the folder where the image will be placed to open it. Click the “Upload” button.

Ark Media Manager - Images Add New Folder       

Click the “Add Files” button or drag and drop your photos into the designated space.

Navigate to, and choose, the pictures of your listing that are on your computer

Finally click Start Upload

Insert and Edit your photos with resize, crop, rotate, flip and more.

Hover over a photo you’ve just uploaded and click the pencil icon ‘edit’

Ark Media Manager - Images  Edit

Click the “Resize” button to make the image web ready. Note: I create predefined sizes for my clients in the configuration so they don’t have to remember what size. In this demo, I have set the size to by 1200px wide or tall. Within the resize toolbar, click the arrow to show the dropdown menu next to Resize.  Choose ‘1200 x auto’ if your photo is horizontal. Or choose ‘auto x 1200’ if your photo is vertical. Click the “Checkmark” button to apply the change.

Ark Media Manager - Images Resize

You can rotate, flip, or crop your image if necessary by using the other button in this toolbar. Save with the green checkmark.

Once all edits are completed, click the “Save or Checkmark” button.

Ark Media Manager - Save Edits

Add any styles, a lightbox, or a dataset to its Settings and finish with the click of the “Insert” button.

Ark Media Manager - Add Description

And for the skeptics out there, here’s a look at the HTML it wrote:

Ark Media Manager - Source Code

 

Video Demonstration of Uploading, Editing and Inserting an Image.


Conclusion

Artisan Web and Print is dedicated to providing our clients with solutions that make their lives easier while supporting their marketing efforts by building successful applications. It is clear to me that editing content on the web needs to be as simple and straightforward as possible for my clients to encourage consistent and frequent blog entries, content updates, and engagement. The best solution to date is the pairing of the Ark Editor with their Media manager. Why it is not the most widely used, I can only attribute to the habits and established patterns of developers who simply use what is familiar. JCE has been around the longest and thereby cultivated the lion's share of users from the beginning. I hope that this article will encourage you to branch out and try something new; in the end, I think you will find this editor to be a refreshing alternative.



 

Let's Be Connected

Back to top