Quilleditor eigene Buttons erstellen, die ein div um den text mit einer klasse machen

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

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert