CODEWITHSUNDEEP
angularquillngx-quill
manoyanx
manoyanx

Reputation: 181

Remove colors when pasting on ngx quill field

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?

Upvotes: 4

Views: 3626

Answers (3)

Sujeet Jaiswara
Sujeet Jaiswara

Reputation: 95

// 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;
    });
}

Upvotes: 1

Sivaraman
Sivaraman

Reputation: 217

  • 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/

Upvotes: 0

manoyanx
manoyanx

Reputation: 181

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;
    });
  }

Upvotes: 10

Related Questions