|
|
@@ -31,7 +31,7 @@ ClassicEditor
|
|
|
feeds: [
|
|
|
{
|
|
|
marker: '@',
|
|
|
- feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ],
|
|
|
+ feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ],
|
|
|
minimumCharacters: 1
|
|
|
}
|
|
|
}
|
|
|
@@ -65,12 +65,30 @@ When using a callback you can return a `Promise` that resolves with the list of
|
|
|
The callback receives the query text which should be used to filter item suggestions. It should return a `Promise` and resolve it with an array of items that match to the feed text.
|
|
|
|
|
|
```js
|
|
|
+ClassicEditor
|
|
|
+ .create( document.querySelector( '#editor' ), {
|
|
|
+ // This feature is not available in any of the builds.
|
|
|
+ // See the "Installation" section.
|
|
|
+ plugins: [ Mention, ... ],
|
|
|
+
|
|
|
+ mention: {
|
|
|
+ feeds: [
|
|
|
+ {
|
|
|
+ marker: '@',
|
|
|
+ feed: getFeedItems
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ .then( ... )
|
|
|
+ .catch( ... );
|
|
|
+
|
|
|
const items = [
|
|
|
- { id: '1', name: 'Barney Stinson', username: 'swarley', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
|
|
|
- { id: '2', name: 'Lily Aldrin', username: 'lilypad', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
|
|
|
- { id: '3', name: 'Marshall Eriksen', username: 'marshmallow', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
|
|
|
- { id: '4', name: 'Robin Scherbatsky', username: 'rsparkles', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' },
|
|
|
- { id: '5', name: 'Ted Mosby', username: 'tdog', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
|
|
|
+ { id: '@swarley', userId: '1', name: 'Barney Stinson', link: 'https://www.imdb.com/title/tt0460649/characters/nm0000439' },
|
|
|
+ { id: '@lilypad', userId: '2', name: 'Lily Aldrin', link: 'https://www.imdb.com/title/tt0460649/characters/nm0004989' },
|
|
|
+ { id: '@marshmallow', userId: '3', name: 'Marshall Eriksen', link: 'https://www.imdb.com/title/tt0460649/characters/nm0781981' },
|
|
|
+ { id: '@rsparkles', userId: '4', name: 'Robin Scherbatsky', link: 'https://www.imdb.com/title/tt0460649/characters/nm1130627' },
|
|
|
+ { id: '@tdog', userId: '5', name: 'Ted Mosby', link: 'https://www.imdb.com/title/tt0460649/characters/nm1102140' }
|
|
|
];
|
|
|
|
|
|
function getFeedItems( queryText ) {
|
|
|
@@ -97,7 +115,7 @@ function getFeedItems( queryText ) {
|
|
|
// Include an item in the search results if name or username includes the current user input.
|
|
|
return (
|
|
|
item.name.toLowerCase().includes( searchString ) ||
|
|
|
- item.username.toLowerCase().includes( searchString )
|
|
|
+ item.id.toLowerCase().includes( searchString )
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
@@ -132,13 +150,13 @@ function customItemRenderer( item ) {
|
|
|
const itemElement = document.createElement( 'span' );
|
|
|
|
|
|
itemElement.classList.add( 'custom-item' );
|
|
|
- itemElement.id = `mention-list-item-id-${ item.id }`;
|
|
|
+ itemElement.id = `mention-list-item-id-${ item.userId }`;
|
|
|
itemElement.textContent = `${ item.name } `;
|
|
|
|
|
|
const usernameElement = document.createElement( 'span' );
|
|
|
|
|
|
usernameElement.classList.add( 'custom-item-username' );
|
|
|
- usernameElement.textContent = `@${ item.username }`;
|
|
|
+ usernameElement.textContent = item.id;
|
|
|
|
|
|
itemElement.appendChild( usernameElement );
|
|
|
|