@sujeetbuddiga here you go - as I said, quite straight-forward...

First add the Tribute resources to your site

<!-- Tribute - Native @mentions: https://github.com/zurb/tribute/ -->
<link rel="stylesheet" href="/js/tribute/tribute.css" />
<script src="/js/tribute/tribute.min.js"></script>

Then initiate & attach it to the Quill editor as follows

<script type="text/javascript">
// Tribute - Native @mentions
var tribute = new Tribute({
  values: [
    {key: 'Phil Heartman', value: 'pheartman'},
    {key: 'Gordon Ramsey', value: 'gramsey'}
  ],
  lookup: 'key'
});
tribute.attach(document.getElementsByClassName('ql-editor'));
</script>

Note:
you will get a strange behaviour with the cursor position resetting before the @, when you attach it like this:
tribute.attach(document.getElementById('editor'));
So that's why you have to attach it to the Quill editor using it's CLASS .ql-editor. This issue was covered and resolved here: zurb/tribute#86

There is still a bug open regarding the Enter/Return key not working in combination with Tribute & Quill, see here (and upvote if you need it ;) ): zurb/tribute#87

But yeah, above code is basically it! Go to your website where the Quill editor is integrated and try it by typing @p in the richtext editor.

@mentions support in the editor #1816

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions