4

I am using the ngx-quill editor and so far it has all the features that I need. However, I don't see any options on how to remove the background colors and font colors of the text coming from the clipboard.

I want to retain all the other formatting except the colors. Is this possible?

manoyanx
  • 171
  • 1
  • 10

3 Answers3

10

For anyone having the same issue with me, I managed to find a workaround for this.

On my view :

<quill-editor (onEditorCreated)='editorInit($event)'></quill-editor>

On my Controller

editorInit(quill: any){
    quill.clipboard.addMatcher(Node.ELEMENT_NODE, function(node, delta){
      delta.forEach(e => {
        if(e.attributes){
          e.attributes.color = '';
          e.attributes.background = '';
        }
      });
      return delta;
    });
  }
manoyanx
  • 171
  • 1
  • 10
  • 3
    Glad you not only found the solution to your problem, but also shared it here with the community. Thank you. I should only add one small detail: Next time you ask something, please try to be clearer and provide more details about your problem. As a tip, read [this page](https://stackoverflow.com/help/how-to-ask). Hope to see you here again, okay? See you later. – Loa Jan 10 '20 at 19:38
  • Please mark as verified it's a working code. – Sujeet Jaiswara Aug 04 '22 at 06:16
1
// If you want to remove complete formating use this code.
onEditorCreated(quill : Quill) {
    quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {          
      delta.forEach(e => {
        if (e && e.attributes) {
          delete e.attributes;
        }     
      });
      return delta;
    });
}

// If you want to remove individual formating use this code.
onEditorCreated(quill : Quill) {
    quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {          
      delta.forEach(e => {
        if (e && e.attributes) {
          e.attributes.color = '';
          e.attributes.background = '';
          e.attributes.fontSize = '1rem';
          e.attributes.fontWeight = 'normal';
          e.attributes.header = 0;
        }     
      });
      return delta;
    });
}
Sujeet Jaiswara
  • 85
  • 1
  • 3
  • 13
  • Nice approach. Just an addition: Instead of re-setting chosen properties, you can also turn it around: keep chosen properties and remove all others: if(e && e.attributes){ for (let prop in e.attributes) { switch(prop) { case 'bold': case 'background': case 'color': case 'link': break; default: delete e.attributes[prop]; break; } } } – S. Doe Jun 10 '23 at 07:04
0

  • If you don't want to remove color and background using event listeners as mentioned in @manoyanx's answer, you can use

      const myQuillEditorFormats = ["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"];

  • In the above myQuillEditorFormats array, I have added all default quill editor options. You can specifically remove the options which you don't want.

  • Then in your NgModule's imports

      QuillModule.forRoot({ formats: quillEditorFormats })

Source: https://quilljs.com/docs/formats/

Sivaraman
  • 168
  • 1
  • 7