What are the JS dependencies of the Joomla frontend editor?

Question

The Problem

I'm trying to implement a functioning frontend editor within my Joomla template which has been developed in-house at my company. For the most part it works - a user can make basic text changes to articles and save their work. However, none of the editor-xtd buttons work correctly (article, image, page break, read more insertion). Specifically, they will navigate to a new browser window instead of opening as a modal popup, which means they fail to insert anything to the content being edited, as they are looking for a parent window that no longer exists.

The Question

I need to figure out which parts of the core Joomla files are missing from our template build so that we can incorporate them back in and allow users to add images from the frontend editor. In other words, what are the dependencies of the frontend editor?

Template background

The template uses Joomla version 3.4.6; we are using the TinyMCE frontend editor (all other editors have been disabled in the plugin manager). The template was developed in-house and has a lot of the core Joomla functionality deliberately stripped out. For example, this line:

<jdoc:include type="head" />

is omitted in favour of writing our own head and parameter content. This is far from ideal, but not something I am at liberty to change. I have verified that if I switch our template to use Protostar or Beez3, the frontend editor works perfectly, including the editor-xtd buttons, complete with a working modal popup that allows for successfully adding images to articles. My leading theory on the problem is that we have stripped out something from core Joomla that the frontend editor needs.

What I have tried so far

We started with the frontend editor not working at all. Adding these scripts to my template index file has improved editor functionality:

• media/system/js/core.js (enables the save/cancel buttons on the editor to work)
• media/editors/tinymce/tinymce.min.js (enables the 'toggle editor' button to work)

Adding these scripts to my template has seemingly no impact on the broken editor-xtd functionality (ie. I still can't add an image to an article in the frontend editor):

• media/system/js/mootools-core.js
• media/system/js/mootools-more.js
• media/system/js/mootree.js
• media/system/js/frontediting.js
• media/system/js/modal.js

Other research

A similar problem to what I'm having is described here, but is from 2010 with no specified solution.

This question suggests the error originates from the 'editor' and not mootools, but I am using TinyMCE, and therefore the 'solution' presented here is unhelpful.

This question explains a bit more about how the jInsertEditorText method works but doesn't get me any further with figuring out which files I'm missing.

How the image upload modal looks using protostar template

How the image upload modal looks using our template

Answer 1

If you are wanting to add in the additional editor features like images and whatnot there is more to it that just added the js files.

Personally I would recommend using Joomla's native method of displaying the editor, this is gonna give you the best results and all of the features you want. It should also work with whatever your default current editor is.

So:

1) you need a layout for editing which I am assuming that you have.

2) you need to load the editor into your layout, using the following code.

`<?php`
$editor =& JFactory::getEditor();
$params = array(
    'smilies'=> '0' ,
    'style'  => '1' ,  
    'layer'  => '0' , 
    'table'  => '0' ,
    'clear_entities'=>'0'
);
echo $editor->display('field_name','$field_content','600', '400', '20', '20', true, null, null, null, $params );

?>

$field_content should be the content of your article, you will have to query this from the database. If you are using a layout for editing it is easy enough to query the data in your model and set it to a variable accessible from the edit layout like $this->content.

Wrap that up inside a nice form with a task that is set to your controller function for saving the data and boom.... do a happy dance.

Answer 2

What are the JS dependencies of the Joomla frontend editor?

Short answer:

The frontend editor is dependent on whatever JS files are being loaded by the Joomla core head file.

Explanation:

This code:

<jdoc:include type="head" />

makes use of this file:

[root]/libraries/joomla/document/html/renderer/head.php

Around roughly line 171 is the following:

// Generate script file links
        foreach ($document->_scripts as $strSrc => $strAttr)
        {
            $buffer .= $tab . '<script src="' . $strSrc . '"';
            $defaultMimes = array(
                'text/javascript', 'application/javascript', 'text/x-javascript', 'application/x-javascript'
            );

            /// more code ...

This foreach loop retrieves and loads various JavaScript files into the <head> of your document. Adding an echo statement will output the names of all of these JS files for your reference:

// Generate script file links
        foreach ($document->_scripts as $strSrc => $strAttr)
        {
            echo($strSrc . '<br/>'); // ADD THIS LINE
            $buffer .= $tab . '<script src="' . $strSrc . '"';
            // etc

This gives you a fairly good idea of what JS might be missing from your own template, if it happens to be one which omits the core Joomla <head> content. Here is an example of what my specific Joomla 3.4 setup generated (your setup may vary):

How this helped me solve the JavaScript conflict problem

I found that the frontend editor just didn't work the way I wanted if the core Joomla <head> wasn't present, no matter what else I tried (like manually importing the files I thought were missing). If I included the Joomla <head> using <jdoc:include type="head" />, it caused endless conflicts with our own template JS (which incidentally we load at the bottom of the <body> and not in the <head>).

Solution: check to see if the user is in 'edit' mode and load in the Joomla head or our template JS depending on the result.

I added this PHP to my custom code, somewhere near the top:

$app = JFactory::getApplication();
$layout = $app->input->getCmd('layout', '');

$layout will return the string "edit" if the user is currently inside the frontend editor view.

Towards the bottom of my <head> code I added this:

<?php
        if($layout == "edit" ){
            echo('<jdoc:include type="head" />');
        }
?>  

Towards the bottom of my <body> HTML I added this:

<?php
    if($layout != "edit" ) {
        echo('<script src="templates/myTemplate/myScript.js"></script>');
    }
?>  

This solution achieves exactly what I needed, which is that the frontend editor now allows all standard editing to take place, without conflicting with any custom template code. (Every time you go in/out of the 'edit' mode, the page refreshes which allows the PHP logic on the index.php file to run again.)