Pet Peeves With Tech Minded Extension Developers - JCE Editor

JCE (Joomla Content Editor) is by far, the best text editor for Joomla Content Manager! It adds valuable article publishing tools that makes publishing a breeze.

All the icons on the JCE Editor toolbar have HTML title attributes which explains its purpose, and the image tries to visually indicate the same purpose. Clearly the icons are necessary to allow the vast amount of tools to be contained on the bar without going off screen, however, visually the functions are not easily identified by all users.

One could say that only dumb asses would not recognize the common icons as used on editor toolbars since the Personal Computer was invented, but not all users today have used applications that show these supposed common icons.


New users have to be guided through the tools to know what will give the result they seek and when you have to be constantly pointing out where the image insert is, it gets very frustrating for yourself and eventually the client.

While Joomla does include a clearly indicated image insert button below the editor text area, it does not provide the great options included with JCE's Image Manager standard or extended plugin.

Being that the most common tasks when posting an article are Insert Image, Insert Video/Audio and Insert Hyperlink, it would be best if those tools were clearly indicated by text instead of an icon to return a bar that looks like this:


The user now clearly knows what to click and will never call you again.

So here is how you can make your JCE behave the way a lay person likes it. All done with CSS.

If you already have a duplicate of your default administrator template, simply add the following styling to the template.css file

span.wf_editor_toggle {margin-bottom: 10px; display: inline-block !important;}
span.wf_editor_toggle span {
	background: #dddddd;
	color: #222222;
	padding: 5px;
	border: 1px solid #888888;
	border-radius: 2px;
span.mce_imgmanager_ext img.mceIcon, 
span.mce_mediamanager img.mceIcon {display: none;}
span.mce_link {background: transparent !important;}

a.mce_imgmanager_ext, a.mce_mediamanager, a.mce_link,
span.mce_imgmanager_ext, span.mce_mediamanager, span.mce_link {
	width: 90px !important; 
	text-align: center; 
	font-size: 11px;
	background: #d8ff70 !important;
span.mce_imgmanager_ext:before, span.mce_imgmanager:before {content:"Insert/Edit Image"}
span.mce_mediamanager:before {content:"Insert/Edit Media"}
span.mce_link:before {content:"Insert/Edit Link"}


If you allow frontend use of the editor, you will need to add the code to the frontend default template also.

The other option is to download and install the plugin and it will handle both ends.


Modifying The File Upload Buttons To Ease The Stress

The next area that stumbles the lay person is the file upload.

Common question from users while looking at the JCE Image Manager insert image modal window

"I don't see any way to upload the image. How do I do that?" Then you say "Look for a question sign icon then click the icon at the left of it" and they say "That is so stupid. Why not just have it say upload" and you get upset because they said 'stupid', and rightly so because they are not tech minded so anything they expect to be simple and it's not, they deem stupid.

This is what it is now


After the CSS hack it now looks like this and you will never again be labeled as 'stupid'


The image / media / file insert modal window is in an iFrame so the CSS is not loaded within the parent page. This modification requires hacking its core file called manager.css. Unfortunately this will be overwritten on updates of the JCE extension so it may not be suitable for all. Maybe if enough users nag the JCE developer Ryan Demmer to include text buttons for upload, future releases will include text buttons.

Anyway, edit components/com_jce/editor/libraries/css/manager.css

Add the following at the very end of the file, below the last line. Note: If you have CSS cache enabled in the JCE Global Settings, you will need to disable it for this to take effect, then re-enable after the mods are done. The same is true if you have any other global file cache system in use.

div#browser-message {width: 60%;}
div#browser-actions {width: 40%;}
span#upload, span#folder_new {
	background: transparent;
	background-color: #d8ff70 !important; 
	width: 110px; 
	height: auto; 
	margin: 0; 
	vertical-align: top;
	padding: 7px 2px;
	border-radius: 3px;
	border: 1px solid #333333;
	text-align: center;
	font-weight: bold;
span#upload:before {content: "Upload File"}
span#folder_new:before {content: "Create Folder"}
span#folder_new {width: 90px;}

span#help {display: none;}


Copyright © 2020 All Rights Reserved.
This website is powered by the Joomla!©™ 3 Website Framework | File download and article manager component by CMSE Custom Fields | Website hosting and development by WebsiteDons is owned and operated by Emuzement Net Inc, Tampa, Florida USA