7

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();
  • 1
    I really need to start testing JCE as people seems to love it. Just on a side note (if you're using not using Joomla 1.5), you don't need the & before JFactory. Do JCE not provide something within their "API" that can get changed content? Not sure if their support is free or not but might be worth asking them – Lodder May 29 '14 at 19:45
  • @Lodder You don't need the & before JFactory if using PHP5 - I don't think this is necessarily related to a particular version of Joomla (apart from the fact that < 1.5 might not work on PHP5)? joomla.stackexchange.com/questions/411/… – MrWhite May 30 '14 at 1:15
  • @w3d - Right you are. Not sure what I was thinking there – Lodder May 30 '14 at 9:32
  • Good points....the price of cut/paste....not sure that I've actually written a new line of code since '03, lol – GDP May 30 '14 at 12:44
3

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.

  • This seems to be the case with TinyMCE as well, so warrants more research, but alas, I've had to redo my code without this knowledge, so won't be able to verify. Thanks for the direction though - would be interested in hearing from anyone that pursues and confirms this! – GDP May 31 '14 at 15:09
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.

  • This works for a single paragraph. If there is more text that that (several paragraphs and/or other tags), drop the last ".find('p')". This will return all of the contents. – Sheldon Seale Jan 7 '17 at 12:39
1

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.

  • 1
    A comparison with what? The OP doesn't seem to be able to access the newly edited text at all? – MrWhite May 30 '14 at 1:08
  • My bad, I mad a too simple response based on assumed knowledge, basically each editor is a different Javascript application, Joomla only expects the field the editor is attached to to be updated at submit time. – Craig May 30 '14 at 3:21
1

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)

  • 1
    Have you tested this code before posting? (If not, please make a habit of this where possible so that future researchers can seamlessly implement your solutions) Shouldn't newHTML's php-delivered value be wrapped in quotes? – mickmackusa Aug 7 '18 at 19:22
0

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.