How to add and use quill mention modules

See original GitHub issue

I used to vue 2.5.* and wanna to use quill-mention.

By your document I write this code to use mention module:


<script>

  // you can also register quill modules in the component
  import Quill from 'quill'
  import mention from 'quill-mention'
  Quill.register('modules/mention ', mention )


export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
             ....

               modules: {
                    mention: {
                        allowedChars: /^[a-zA-Z0-9_]*$/,
                        mentionDenotationChars: ["@"],
                        offsetLeft: ($('body').hasClass('rtl') ? -250 : 0),
                        renderItem: (item)=> {
                            return item.display
                        },
                        source: (searchTerm, renderList, mentionChar)=> {
                            let values = [{id:1,value:"admin",display:"admin "},{id:2,value:"john",display:"john"}];

                            if (searchTerm.length === 0) {
                                renderList(values, searchTerm);
                            } else {
                                const matches = [];
                                for (let i = 0; i < values.length; i++)
                                    if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
                                renderList(matches, searchTerm);
                            }
                        }
                    },
                },
             ....
        }
      }
    },
  

but when I type @ mention popover doesn’t display. What should I do?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:12

github_iconTop GitHub Comments

2reactions
LucasvlLimacommented, May 9, 2019

put mention objects inside modules object, i guess this import already register the module so comment register and put object mention inside of module: { }

0reactions
essivisioncommented, May 11, 2019

I solved problem with add Quill as global variable in app.js:

import Quill from 'quill';
window.Quill = Quill 

also in Laravel Mix we used autoload instead of above solution like this:

mix.autoload({
    jquery: ['$', 'window.jQuery','window.$'],
    quill: ['window.Quill','Quill']
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

quill-mention - npm
Start using quill-mention in your project by running `npm i quill-mention`. There are 51 other projects in the npm registry using quill-mention.
Read more >
Quill Mention
Quill Mention is a module to provide @mentions or #hashtag functionality for the Quill rich text editor. Simple Demo. Advanced Demo. Asynchronous retrieval, ......
Read more >
Angular Quill Mentions - StackBlitz
{ insert: "54" }. ] }; modules = {. toolbar: false,. import. Enter to Rename, Shift+Enter to Preview. Compiling application & starting dev...
Read more >
Quill-mention does not insert the selected ... - Stack Overflow
quillEditor = new Quill(editor, { formats: ['mention'], modules: { mention: { allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/, mentionDenotationChars: ['#'] ...
Read more >
Modules | VueQuill - GitHub Pages
Modules allow Quill's behavior and functionality to be customized. To enable a module, simply include it in a modules prop. Example #. In...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found