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
- Forum
- JCE Editor
- JCE in UIkit3 modal not 'focus/editable' in 'Editor mode'
Support is currently Online
Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)
From 09:00 To 17:00 Europe/London (BST)
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
Regards,
Marc
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
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.
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
·
#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
Regards,
Marc
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
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
Regards!
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
Regards!
Load the editor using PHP, then try this when the modal loads:
This uses a jQuery event that was set up for Joomla subform fields, to remove then create an editor (effectively re-initialise it);
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!
Be one of the first to reply to this post!