How to retrieve the CHANGED text from Joomla Editor?

Question

I have a page that allows the user to edit the intro text of a particular article, and I'm using this code to allow them to do so:

$editor = & JFactory::getEditor();
$params = array('smilies'=> '0' ,'style'  => '0' ,'layer'  => '0' ,'table'  => '0' ,'clear_entities'=>'0');
echo $editor->display('introtext',$this->introtext  , '96%', '100px', 250, 40, false, null, null, null, $params);

The problem is that when I go to save the changes with jQuery/AJAX, I am only able to access the original HTML that the editor was initialized with. I used TinyMCE editor while developing, but the users prefer JCE, so editor specific answers found with Google don't do the trick for me.

How does one get to the edited text that the user wants to save, in order to be posted? I had assumed that this, or similar, would work, but clearly it doesn't:

var newHTML = $('#introtext').val();

Answer 1

If I remember it right, JCE uses an iframe for the content. Thus, you need to get a reference to the iframe first, then access the inner document of the iframe, which will provide the innerHTML as the text you are looking for. I did this once, but unfortunately I can't acces the code until Sunday.

I would start with something like this (this is how I remember it, can't test it right now):

var iframe = document.getElementById('jform_articletext_ifr');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var currentText = innerDoc.innerHTML;

With currentText being the "new" text.

Answer 2

The question by "GDP" was

"How does one get to the edited text that the user wants to save, in order to be posted?.

"elk" got me started on the right path but I resorted to jQuery to actually get the edited text. This is what I did:

jQuery("#Array_ifr").contents().find("body").find("p").html();

Where "Array_ifr" is the id of the iframe the JCE editor uses. I found this by examining the elements with Firebug.

This worked for me in a Joomla! environment but I don't see it being a problem in any others. Hope this helps other folks with their coding.

Answer 3

There is no method that I'm aware of, you'll have to store the original text and then do a comparison on submission.

More details, so generally the Editor is set on a Global level but users can choose to alter their profile to select their preferred editor.

Joomla 3.x+ era loads the Editor using a JFormFieldEditor which load the selected editor. The user makes changes in the editor but as you've noted they are not reflected to the field immediately. e.g. in an article that would be the #jform_articletext element.

However for most editors by time the item is saved, the form element jform[articletext] has the updated content. (This doesn't seem to apply to the AJAX editors I've seen).

I'm just speculating here, but I imagine they (the editors) attach a submit event to the main form and inject their contents into the field at that point. The other place you could check is the "Toggle Editor" link that JCE and TinyMCE have.

In an Article, TinyMCE has this click event trigger attached to the "Toggle Editor" button:

function onclick(event) {
    tinyMCE.execCommand('mceToggleEditor', false, 'jform_articletext');
    return false;
}

Which causes the editors content to be flushed to the field #jform_articletext.

Another approach may be to send a submit event to the active editor hopefully causing it to update the field with the changed text.

Given that each editor could implement handling the submit in a different way and not all of them have MCE's "Toggle Editor" button, you may have to build a special case for each editor you want to support.

Answer 4

try to put just before

<?php echo $editor->save('introtext'); ?>
var newHTML = $('#introtext').val();

or

var newHTML = <?php echo $editor->getContent('introtext'); ?>

so the text from the editor will be copied into that newHTML variable

of course your javascript code must be in the same php form file (not in a standalone js file)

Answer 5

This thread is quite old but this might help others...

elk's reply is almost exactly spot-on, except that I had to modify to

var currentText = innerDoc.body.innerHTML;