New to Kendo UI for Vue? Start a free 30-day trial
Implementing Mentions in Kendo Vue Editor
Environment
Product | Kendo UI for Vue Editor |
---|---|
Version | Current |
Description
I am using the Kendo Editor for Vue to post comments and need to add a mention feature. Is it possible to implement mentions in the Kendo Vue Editor? If so, how can I achieve this?
This KB article also answers the following questions:
- How can I add mentions in the Kendo Vue Editor?
- Is there a plugin to add mentions in Kendo Vue Editor?
- How to use prosemirror-mentions with Kendo Editor for Vue?
Solution
To implement the mention functionality within the Kendo Vue Editor, follow the steps below:
- Install the
prosemirror-mentions
plugin:
sh
npm install prosemirror-mentions
- Reference the plugin in your Vue component:
jsx
import {
addMentionNodes,
addTagNodes,
getMentionsPlugin,
} from "prosemirror-mentions";
- Define the mentions data and pass it to the mentions plugin:
jsx
const mentionsData = [
{ name: "Anna Brown", id: "103", email: "anna@gmail.com" },
{ name: "John Doe", id: "101", email: "joe@gmail.com" },
{ name: "Joe Lewis", id: "102", email: "lewis@gmail.com" },
];
const tagsData = [
{ tag: "WikiLeaks" },
{ tag: "NetNeutrality" },
{ tag: "Kendo UI for Vue" },
];
const getMentionSuggestionsHTML = (items) => {
return (
'<div class="suggestion-item-list">' +
items
.map((i) => '<div class="suggestion-item">' + i.name + "</div>")
.join("") +
"</div>"
);
};
const getTagSuggestionsHTML = (items) => {
return (
'<div class="suggestion-item-list">' +
items
.map((i) => '<div class="suggestion-item">' + i.tag + "</div>")
.join("") +
"</div>"
);
};
const mentionPlugin = getMentionsPlugin({
getSuggestions: (type, text, done) => {
setTimeout(() => {
if (type === "mention") {
done(mentionsData);
} else {
done(tagsData);
}
}, 0);
},
getSuggestionsHTML: (items, type) => {
if (type === "mention") {
return getMentionSuggestionsHTML(items);
} else if (type === "tag") {
return getTagSuggestionsHTML(items);
}
},
});
Refer to the example project on CodeSandbox for a complete implementation: Example Project.