0

In JavaScript and J4, to get an editor object from the collection of objects with all editor instances running I use:

let editor = Joomla.editors.instances[myEditorName];

I can see Joomla object in my console with all properties, editors.instances included.

Now in J5 it's deprecated and editors.instances is empty. I have read some information about the reasons to replace this code with JoomlaEditor, but this does not appear in my console. Please, how can I access to the editors instances or editors objects in JavaScript / Joomla 5?

2 Answers 2

0

The Editor API is now an ESM, so you will need to import it in your Javascript file.

import { JoomlaEditor } from 'editor-api';

const editor = JoomlaEditor.get(id); // Replace "id" with ID of your editor element
console.log(editor);

You'll also need to ensure that your own Javascript file is set to be included as a module:

{
    "name": "foobar",
    "type": "script",
    "uri": "your_file.js",
    "attributes": {
        "type": "module"
    }
},
0

@Lodder, thanks but maybe I have doing something wrong because browser console shows:

EDITOR:  false

This is my reduced configuration:

//** /media/com_abaco/js/editor.js

import { JoomlaEditor } from 'editor-api';
const editor = JoomlaEditor.get('myEditorId'); 
console.log('EDITOR: ', editor); 

//** /media/com_abaco/joomla.asset.json
...
    "assets": [
    {
        "name": "com_abaco.editor",
        "type": "script",
        "uri": "com_abaco/editor.js",
        "dependencies": [
            "codemirror"
        ],
        "attributes": {
            "type": "module",
            "defer": true
        }
    }

//** /components/com_abaco/src/View/Editor/HtmlView.php
...
$this->editor = Editor::getInstance('codemirror');
$wa = $this->document->getWebAssetManager();
$wa->useScript('com_abaco.editor');

//** /components/com_abaco/tmpl/editor/default.php

<?= $this->editor->display('myEditorId', 'My custom content', '100%', '900', '300', '3', false, 'myEditorId', null, null, array()); ?>

Codemirror editor is showing as expected but I can't access it in JavaScript. My file editor.js is loaded before editors.js, joomla-editor-codemirror.js and codemirror.js. I don't know if this it's important.

1
  • A delay after Import to load editor-api and it works. I can't understand why not use Web Assets Manager to load editor-api and in other file create the editor object as dependency.
    – Peli
    Commented Nov 8, 2023 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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