JoomlaEditor is undefined

[Viper]

Hi!

When I trying to get editor value via 

editor = Joomla.editors.instances['jform_myeditor'];

I see in console "Direct access to Joomla.editors.instances is deprecated. Use JoomlaEditor.getActive() or JoomlaEditor.get(id) to retrieve the editor instance."

But when I do

editor = JoomlaEditor.get('jform_myeditor');

I'm always getting error "JoomlaEditor is undefined".

What am I doing wrong?

[Grant Hood]

The way I do it in J4 is to make sure I have the main Factory imported into my class with:

use Joomla\CMS\Factory;

Then to identify the current editor I use

$editor = Factory::getApplication()->get('editor');

In my case that returns the string 'jce';

Hope that gets you what you need.

[Harold Smith]

Not real sure if this helps you either but you could use $editor = Editor::getInstance(Factory::getApplication()->getConfig()->get('editor'));

[Viper]

Thanks for reply, but I'm trying this in javascript, not a php.

[shumisha]

I'm guessing you're doing this with Joomla 5 (what you do should be OK on Joomla 3 and 4).

Per a discussion with Dimitris, here is a snippet that should help:

  <script type=module>
    import { JoomlaEditor } from 'editor-api';

  requestAnimationFrame(() => {
      const instances = JoomlaEditor.instances;
      const editorInstance = JoomlaEditor.get('jform_articletext');
      console.log(editorInstance)
  });
  </script>

This is an example, you don't need to use requestAnimationFrame or anything, adjust to your use case.

[Neo314]

Did this help you viper? I am trying to access the editor in a view, not a module because the editor, marked required, is not validating.

The import is only for modules. I used webasset manager to ->useScript('editor-api'), and I am getting the same thing you are. JoomlaEditor is undefined.

[Viper]

Yes and no. Currently I'm rewrote my javascript code in module format. But I decide to stay with the old Joomla.editors.instances[] code(will update when Joomla core javascript will updated).

"the editor, marked required, is not validating"

It's not an error. HTML validation on client side is a non-trivial task. So validator skip this.

I'm just get an editor value in javascript and checking only for empty value(because user can delete default <p></p> from editor) while user submit the form. All other validations in $model->validate() method.

[Steven Berkson]

Can you elaborate on writing your JavaScript code in module format, and/or how you're getting the editor value? I'm familiar with the issues around validating an html editor, so I'm trying to test it myself and/or set a minimum length.

The module terminology here is new to me, and, using webassetmanager I don't have control over the script tag as far as I can tell.

Over a similar issue in terms of dynamic elements, I've also been struggling with detecting subform/multiple and list/multiple select deletion events. As a work around, I had to resort to setInterval to scan for changes.

Steven Berkson

sber...@blazingimages.com

---

From: joomla-de...@googlegroups.com <joomla-de...@googlegroups.com> on behalf of Viper <goodla...@gmail.com>
Sent: Saturday, March 9, 2024 11:56:20 PM
To: Joomla! General Development <joomla-de...@googlegroups.com>
Subject: [jgen] Re: JoomlaEditor is undefined

 

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/10aa41fe-05e7-40dd-b6b2-22cb34cc40d6n%40googlegroups.com.

[Viper]

Example in shumisha  post. It's minimum changes required.

Using webassets manager you can set up some attributes for <script> tag.

For dynamically created elements use delegated events binding.

Something like this:

myClass.on = function (el, eventName, eventHandler, selector) {
if (selector) {
const wrappedHandler = (e) => {
if (!e.target) return;
const el = e.target.closest(selector);
if (el) {
eventHandler.call(el, e);
}
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
}
}

myClass.on('body', 'click', myFunctionToExecute, '.element-where-click');

[Steven Berkson]

I had to finish up other elements of the project before returning to this.

 

Thanks for the reply. I could not get it to work, at least not for the subform. I got myClass.on undefined, or if I changed both to myClass (no on), I got addEventListener not a function. I tried passing an element, but I think el gets overwritten, doesn’t it?

 

I did, however, upon returning to this, solve the matter to eliminate the setInterval.

 

I still could not get any event to trigger by the button clicks on the subform, but when I look at the event pattern in the Joomla JavaScript, the event triggers on click and keydown of the element joomla-field-subform. Presto! So I have been able to trigger on that event for any click or keyup in the subform.

 

I’m still using jQuery for now. Please don’t judge me harshly ;0)

 

jQuery('joomla-field-subform').on('click keyup', function (){

                             checkGuestValidation();

                             updateClues();

                             updateFee();

                             alert('It works!');

              });

 

Still have not gotten around to tackling accessing the editor…

To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/3084bda5-f357-4848-9bae-1a1d50f6398fn%40googlegroups.com.