-
Posts
-
Hi, I have multiple wysiwyg editors in admin edit page/post section.
They work fine, but the issue is when I try to use the Enfold ‘Insert Theme Shortcode’ on any of the additional wysiwyg editors, the shortcode is not inserted into the correct editor. It always goes into the ‘Main’ editor.That is a serious flaw and renders the insert theme shortcode functionality useless. It should be inserting the content to the textarea of the editor it was called from.
Hi Rikard,
It can be reproduced on any enfold theme that has additional wysiwyg editor metabox (could be added by ACF, Metabox.io, other plugins or custom code) in edit post / page screen.
This is not a plugin issue, but rather a flaw in the theme javascript which ‘hardcodes’ the main editor textarea rather than using the dynamic id of the current editor used.Richard
Hi,
That feature or tool was intentionally created to work on the default editor only and it’s not supposed to display on a different editor. As a temporary solution, you can always copy the shortcode generated from the default editor and paste it to the other editors.
We’ll forward the issue to our developers.
Best regards,
IsmaelIntentionally? Why? Hardcoding any values is a bad coding practice!
Also, as the default editor has an existing content with shortcodes, it is very difficult to explain to non-technical users how to copy the newly generated shortcode from the default editor, as they have no idea where the existing text/html/shortcode ends and the newly generated shortcode starts. It is very anti-user-friendly and causes lots of problems with broken pages (by users clipping or pasting partial shortcodes).
Can you please let me know which lines of code in the javascript file need changing?
Thanks,
Richard
Hi,
Sorry for the confusion. That icon is not supposed to display on other editors because it was intentionally created for the default editor. I’m not saying that it was intentionally hard coded. For now, you can modify the config-templatebuilder > avia-template-builder > assets > js > avia-tinymce-buttons-4.js file. Look for this code around line 19:
editor.addButton( av_key, { type: 'menubutton', text: "", title : avia_globals.sc[av_key].title, image : avia_globals.sc[av_key].image, icons : av_key, menu: _self.createMenuValues(editor) });Above that code, add this one:
if( editor.targetElm.className != 'wp-editor-area' ) return;Best regards,
IsmaelI don’t understand what is your code supposed to do as all the editors on the page have the class name wp-editor-area as all of them are standard wp editors.
It has nothing to do with the icon. The icon appears fine and the shortcodes are functioning, the problem is that the generated code is placed in the text area of wrong editor and not the one it was called from.I believe that the problem is located in the avia-modal.js possibly due to using:
parent = current.parents(‘.wp-editor-wrap:eq(0)’),
and also:
window.switchEditors
instead of using something like this:
tinyMCE.activeEditor
Hi,
I installed the ACF plugin on my server and can reproduce what you mean.
The output of the modal box is sent to the active editor TinyMCE – means when you have 2 editors and click in the second editor this becomes the active one.
If you then open the modal window with the button of the this second editor your input is correctly placed in the position of the cursor of this second editor because this is the active editor.
If you open the modal window with the button of the first editor instead your input is still placed in the position of the cursor of the second one because this is still the active editor.
In my opinion if you want to add a shortcode to the text in an editor you want to control where the code is inserted – and click in the editor to have the cursor at that position – and in this case that editor becomes the active one and the code is placed at the cursor position. And this is from my point of view a consistent behaviour.
You can check this in enfold\config-templatebuilder\avia-template-builder\assets\js\avia-tinymce-buttons-4.js – look for tinyMCE.activeEditor.
Best regards,
GünterYes, that is how it should work, but It seems it stops working in that way if the modal window also uses wysiwyg editor (e.g. image with hotspots, if you edit the hotspot content, save it, the shortcode will not be inserted in the ‘active’ editor where you placed your cursor, but into the main editor instead.
Hi,
Thanks for the feedback. Now I can reproduce it.
I will add this to our dev repo and will try to find a fix asap.
Best regards,
GünterHi,
I think I found the fix.
Can you please replace enfold\config-templatebuilder\avia-template-builder\assets\js\avia-tinymce-buttons-4.js
Do not forget to make a backup for a fallback – and clear browser and server cache.
If you need assistance let us know and we can do it for you.
Best regards,
GünterThank you Günter,
It seems to work!
Just one more question, will this code be included in the next version of Enfold? Or will I have to always overwrite it after update?
Kind regards,
Richard
- You must be logged in to reply to this topic.