import * as Quill from 'quill';
let Inline = (Quill as any).import('blots/inline');
(Quill as any).register(class extends Inline{
static blotName = 'spanblock';
static tagName = 'div'; static create(value){ let node = super.create(); node.setAttribute('class',this.blotName); return node; }
});
.....
export class ....
ngOnInit() {
this.modules = {
toolbar: [
['spanblock',.....
dann noch die css:
/**für alle (dynamischen) Buttons in der toolbar**/
quill-editor .ql-toolbar .ql-formats button:after {
color:black;
line-height: 19px;
display: inline;
position: relative;
bottom: 4px;
}
quill-editor .ql-toolbar .ql-formats button{
background-color: #F8F8F8;
border: 1px solid #CCC;
line-height: 19px;
padding: 6px 10px;
border-radius: 3px;
margin: 15px 0;
width:initial;
}
/**speziell der Button*************/
quill-editor .ql-toolbar .ql-formats button.ql-spanblock:after{
content:"wichtig";
font-weight: bold;
}
https://stackoverflow.com/questions/49247878/how-to-add-css-class-to-a-quill-selection