New to Kendo UI for VueStart a free 30-day trial

Implementing Mentions in Kendo Vue Editor

Environment

ProductKendo UI for Vue Editor
VersionCurrent

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:

  1. Install the prosemirror-mentions plugin:
sh
npm install prosemirror-mentions
  1. Reference the plugin in your Vue component:
jsx
  import {
    addMentionNodes,
    addTagNodes,
    getMentionsPlugin,
  } from "prosemirror-mentions";
  1. 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.

See Also

In this article
EnvironmentDescriptionSolutionSee Also
Not finding the help you need?
Contact Support