How to register a custom module?

[wlecki]

How a custom module can be registered into ngx quill editor?
For example, if I want to use this one: https://www.npmjs.com/package/quill-mentions what should I do to make it available to ngx quill?

Thanks.

[suparnavg]

@wlecki I'm facing the same issue. Did you find a solution? (I'm trying to integrate quill-mention)

[suparnavg]

Putting this here in case anyone finds it useful.

In a similar angular-quilljs library, I found the following approach

1. Install the quill-mention library
2. In the component where your quill editor is located, include the line import 'quill-mention'; in the imports
3. Use the example given on the quill-mention page above to add the module in the editorOptions

You should have a working dropdown at this stage, but the css does not seem to get applied. I just took the css from the library and added it to my main styles file - this fixed it!

[wlecki]

@suparnavg Yes, I've integrated it pretty easily after all - I should have closed the issue :)

How I did it:
I'm building a bigger portal, that has three different configurations for Quill, depending on where it is used and I needed to customize quill mention module, so I've downloaded source files, modify them, made them exportable, later I created a shared Quill configuration service, so all configurations and Quill itself is initialized only once.

1. Imports in my service:

import * as QuillNamespace from 'quill';  
const Quill: any = QuillNamespace;
import AutoLinks from 'quill-auto-links';
import Mention from '../../external-modules/quill-mention/quill.mention.js';
import MentionBlot from '../../external-modules/quill-mention/blots/mention.js';

2. Method initializing Quill and all the modules that is called only once, by e.g. you main component:

registerQuillAdditionalOptions() {
    MentionBlot.blotName = 'mention';
    MentionBlot.tagName = 'span';
    MentionBlot.className = 'mention';
    Quill.register(MentionBlot);
    Quill.register('modules/autoLinks', AutoLinks);
    Quill.register('modules/mention', Mention);
}

3. In my service, there is couple configurations, so every component that uses Quill and needs something specific, can use this service like this:

<quill-editor
[options]="quillService.chosenConfig">
</quill-editor>

Also, remember that if you specify formats in Quill config, e.g.: formats: ['bold', 'italic', 'underline', 'strike', 'list', 'link', 'mention'],, you HAVE to include 'mention' in the array - otherwise this module won't work.

---

In your case, if you do not feel the need to modify quill mention, your service could look like this:

import { Injectable } from '@angular/core';

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;
import AutoLinks from 'quill-auto-links';
import 'quill-mention';

@Injectable()
export class QuillConfigService {
    constructor() {}

    registerQuillAdditionalOptions() {
        Quill.register('modules/autoLinks', AutoLinks);
    }

    getGeneralWysiwygConfig() {
        return {
            debug: 'error',
            placeholder: '',
            modules: {
                autoLinks: true,
                mention: {
                    // mention configuration
                },
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['image', 'video'],
                ],
            },
            formats: [
                'bold',
                'italic',
                'underline',
                'strike',
                'list',
                'link',
                'mention',
            ],
        };
    }
}

And if the styles don't get applied, try in angular-cli.json in styles array add:
"../node_modules/quill-mention/dist/quill.mention.min.css" before your main css file.