Custom link with class in Angular 2 integration

[denlight]

Hi,

I need to create a custom link format that will simply do same thing as link but additionally it adds a custom class to the link. I was able to make it work on codepen. See https://codepen.io/denlight/pen/JNoXyv?editors=0010 . Toolbar button 'SB' is the one that creates that custom link.

But I have a trouble reproducing this behavior in my ng2 app. I npm installed quilljs and type type for it. I am able to create editor and format text using built in functionality. But I can't make 'SB' to work. Button shows and shows the promt to input href. When I click ok, format is not applied to selected text...

Here is the code I have in my ng2 app:

import { Component, Input, OnInit, Output, EventEmitter, AfterViewInit } from '@angular/core';
const Quill = require('quill');
let editor;

@Component({
    selector: 'quill-editor',
    template: `
        <div id="editor"></div>
    `
})

export class QuillEditor implements OnInit {

    @Input() modules: Object;
    @Input() model: string;
    @Input() placeholder: string;

    @Output() change: EventEmitter<string> = new EventEmitter();

    ngOnInit() {
        this.createEditor();
    }

    createEditor() {
        this.registerCustomBlots();

        // create editor
        editor = new Quill('#editor', {
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['link', 'senebutton']
                ]
            },
            theme: 'snow',
            placeholder: 'Enter text here ...'
        });

        editor.clipboard.dangerouslyPasteHTML(this.model, 'silent');

        editor.on('text-change', () => {
            this.change.emit(editor.root.innerHTML);
        });

        this.addSeneButon();
    }

    registerCustomBlots() {
        // register icon
        let icons = Quill.import('ui/icons');
        icons['senebutton'] = 'SB';

        // register new link
        let Inline: ObjectConstructor = Quill.import('blots/inline');
        class Senebutton extends Inline {
            static create(value) {
                let node = super.create(value);
                node.setAttribute('href', value);
                node.className = 'button';
                node.setAttribute('target', '_blank');
                return node;
            }
        }
        Senebutton['blotName'] = 'senebutton';
        Senebutton['tagName'] = 'A';

        Quill.register(Senebutton, true);
    }

    addSeneButon() {
        let seneButton = document.querySelector('.ql-senebutton');
        if (seneButton) {
            seneButton.addEventListener('click', () => {
                let value = prompt('Enter link URL');
                editor.format('senebutton', value);
            });
        }
    }
}

Have you ever had this problem or anyone you know?

Thanks for your help.

[jhchen]

To add a custom class to a Blot all you should have to do is specify className: http://codepen.io/anon/pen/PmwzGG. Parchment docs are here https://github.com/quilljs/parchment if you want to extend more.