You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)

Please post your question in the Forum and we will get back to you as soon as we can.

  Friday, 25 September 2020
  5 Replies
  6.5K Visits
Hi!

I am trying to get the JCE editor to work inside an UIkit3 modal. It has to do something with focus... When I put the editors outside a modal it works, inside you can use CODE and PREVIEW but we're prevented to edit tekst in EDITOR mode. This is most likely because the modal blocks it somehow. So I hope someone has the solution for me :-)

I have 1 or more modals in a page. In the modal there are JCE editors. I put them there with PHP. They do show up but the content is only visible and editable in CODE. How can we trigger the editor active... fingers crossed :D

Regards,
Marc
more than a month ago
·
#105389
PS
It is also okay that we don't use php to load the editor but then we need to know how to load the javascripts from jce. Initializing tinymce on an textarea works in a modal but when we remove the editor created via php also the editor js is not included in the document and it offcourse doesn't work.
more than a month ago
·
#105402
I have 1 or more modals in a page. In the modal there are JCE editors. I put them there with PHP


Please post an example (or screenshot) of how you are doing this.

Just because you're not paranoid doesn't mean everybody isn't out to get you.

more than a month ago
·
#105407
Hi Ryan,

PHP version that works outside of the modal but not inside:

$editor =& JFactory::getEditor();

<form id="form-for-item-y">
$editor->display( 'title', 'Some text', '100%', '400', '20', '20', false, 'title_for_item_y', null, null, $params);
$editor->display( 'description', 'Some text', '100%', '400', '20', '20', false, 'description_for_item_y', null, null, $params);
</form>

<form id="form-for-item-x">
$editor->display( 'title', 'Some text', '100%', '400', '20', '20', false, 'title_for_item_x', null, null, $params);
$editor->display( 'description', 'Some text', '100%', '400', '20', '20', false, 'description_for_item_x', null, null, $params);
</form>


The JS one:
<textarea id="unique_id"></textarea>
UIkit.util.on('#modal-nieuw', 'show', function () {
tinyMCE.execCommand('mceAddControl',false,'unique_id');
});

The last one creates the editor (and uses JCE) after the field is visible and I can type. The PHP does render it in hidden area on page load but not with the information (text) in it and on display of the modal you can use the code/preview but not type in editor tab :)

Offcourse the JS one depends on the JCE to be loaded. When I do both together (php and the JS) it works for the modal on the 'unique_id' textarea; but when I delete the PHP one it doesn't because you make you code in the correct way so the files are not loaded when the page doesn't request JCE :D

Regards,
Marc
more than a month ago
·
#105488
Hi!
I think it is because Yootheme Pro 'injects' the modal just above the closing BODY tag so that elements (editors f.e.) are not in the DOM to be targeted by the JS of editors, does that make sense? And perhaps you know a way to trigger the Joomla Editor with the show function that is in UIkit or Bootstrap; so on a certain event we need to 'fire' of the JCE editor JS. Something like JCE.init() or well, you know better then me :D

Regards!
more than a month ago
·
#105489
Load the editor using PHP, then try this when the modal loads:


UIkit.util.on('#modal-nieuw', 'show', function () {
jQuery(document).trigger('subform-row-sort', '#modal-nieuw');
});


This uses a jQuery event that was set up for Joomla subform fields, to remove then create an editor (effectively re-initialise it);

Just because you're not paranoid doesn't mean everybody isn't out to get you.

  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!