'CKEDITOR4 Mentions Plugin with ajax : javascript error

I have a javascript error using CKEDITOR 4 and the Mentions Plugin.

I can't solve this problem for 2 days, I'm stuck.

I've used the online builder to get CKEDITOR + Mentions plugin.

See my build here: https://ckeditor.com/cke4/builder/fbe187b32ec7c025e28e01a537c72c62

With the following configuration it works fine: I see the drop down list with the names : Anna, Thomas, John

CKEDITOR.config.mentions = [{feed: ['Anna', 'Thomas', 'John']}];

However, when doing an ajax call to get the data, I got a javascript error:

The script /ajax_mention.php

displays

["Anna", "Thomas", "John"]

with the following configuration :

CKEDITOR.config.mentions = [{feed: '/ajax_mention.php'}];

when I type in the editor "@anna", the names do not display

the /ajax_mention.php script is launched and displays the correct data (when I look at the "network" tab on Chrome. see screenshot)

["Anna", "Thomas", "John"]

However, this triggers a javascript error (looking at the Chrome console tab. see screenshot)

ckeditor.js?1645882460:916 Uncaught TypeError: Cannot read properties of null (reading 'addClass')
at g.selectItem (ckeditor.js?1645882460:916:473)
at d.onSelectedItemId (ckeditor.js?1645882460:912:276)
at f.q (ckeditor.js?1645882460:10:246)
at f.fire (ckeditor.js?1645882460:12:91)
at f.select (ckeditor.js?1645882460:920:294)
at f.selectFirst (ckeditor.js?1645882460:920:371)
at d.open (ckeditor.js?1645882460:910:503)
at d.modelChangeListener (ckeditor.js?1645882460:911:234)
at f.q (ckeditor.js?1645882460:10:246)
at f.fire (ckeditor.js?1645882460:12:91)

See screen copy: https://polyglotclub.com/bug_ckeditor_mentions.jpg

screen copy

ckeditor


Solution 1:[1]

The solution was given by the Ckeditor team : see https://github.com/ckeditor/ckeditor4/issues/5107

When we use a hardcoded data in the array, such as ['Anna, 'Geralt'] the createArrayFeed() function changes the input structure from the mentioned above to:

[ 
 { 
   id: 1,
   name: 'Anna'
 },
 {
   id: 2,
   name: 'Geralt'
 }
]

I've just adjusted data on the backend side to the structure above.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vincent Scheidecker

Related Questions