how to use/import DynamicQuillTools in angular?

[sunilpune]

Hello Sir,

how to use/import DynamicQuillTools in angular? please help me out

[T-vK]

Please elaborate. I don't know what you mean.

[sunilpune]

i want to implement your DynamicQuillTools to bellow code but not able to configure...

<quill-editor id="myEditor" [styles]="{height: '500px'}" [theme]="'snow'" formControlName="letterformat" [(ngModel)]='FormatValue'>

or how to get/set html contents to quill object like quill-editor

[sunilpune]

<div id='myEditor'></div>

`this.quill = new Quill('#myEditor', {
theme: 'snow',
height: 500,
modules: {
toolbar: {
container:
[
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],

          [{ 'header': 1 }, { 'header': 2 }],               // custom button values
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
          [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
          [{ 'direction': 'rtl' }],                         // text direction

          [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

          [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
          [{ 'font': [] }],
          [{ 'align': [] }],

          ['clean']                                    // remove formatting button

      ]
    }
  }
});

const dropDownItems = {
  'Mike Smith': 'mike.smith@gmail.com',
  'Jonathan Dyke': 'jonathan.dyke@yahoo.com',
  'Max Anderson': 'max.anderson@gmail.com'
};

this.myDropDown = new QuillToolbarDropDown({
    label: "Email Addresses",
    rememberSelection: false
});

this.myDropDown.setItems(dropDownItems);

this.myDropDown.onSelect = function(label, value, quill) {
    // Do whatever you want with the new dropdown selection here

    // For example, insert the value of the dropdown selection:
    const { index, length } = quill.selection.savedRange;
    quill.deleteText(index, length);
    quill.insertText(index, value);
    quill.setSelection(index + value.length);
};

this.myDropDown.attach(this.quill);


// Add a custom Button to the Quill Editor's toolbar:

const myButton = new QuillToolbarButton({
    icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>`
});
myButton.onClick = function(quill) {
    // Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.

    // For example, get the selected text and convert it to uppercase:
    const { index, length } = quill.selection.savedRange;
    const selectedText = quill.getText(index, length);
    const newText = selectedText.toUpperCase();
    quill.deleteText(index, length);
    quill.insertText(index, newText);
    quill.setSelection(index, newText.length);
};
myButton.attach(this.quill);`

above code is working fine but not able to get/set html contents from/to editor

[kaos2404]

If you are using ngx-quill, then you need to get a reference to the quill object. The following is the entire code for running DynamicQuillTools with ngx-quill.

Download and either serve DynamicQuillTools.js as an asset(include script in index.html) or
in you angular.json, provide DynamicQuillTools as a build dependency.

"architect": {
    "build": {
         ...,
         "options": {
            "scripts": [
                ...,
                "PATH_TO_FILE/DynamicQuillTools.js"
            ]
        }
    }
}

Declare object in your component to avoid build errors

declare const QuillToolbarDropDown

Get reference of QuillEditorComponent from the dom

<quill-editor #quill (onEditorCreated)="onCreated()"></quill-editor>

@ViewChild('quill') quill: QuillEditorComponent

Attach your custom dropdown when the editor is created.

public onCreated() {
    const dropDownItems = {
        'Mike Smith': 'mike.smith@gmail.com',
        'Jonathan Dyke': 'jonathan.dyke@yahoo.com',
        'Max Anderson': 'max.anderson@gmail.com'
    }

    const myDropDown = new QuillToolbarDropDown({
      label: 'Variables',
      rememberSelection: false
    })

    myDropDown.setItems(dropDownItems)

    myDropDown.onSelect = (label, value, quill) => {
      const { index, length } = quill.selection.savedRange
      quill.deleteText(index, length)
      quill.insertText(index, value)
      quill.setSelection(index + value.length)
    }

    myDropDown.attach(this.quill.quillEditor)
}

Also, as a side note, if you are using reactive forms the form will not be updated with the new value when any item from the dropdown is selected. To work around that you have to set the value of the form yourself on the onContentChanged event(on the quill-editor component).

public onChanged(data) {
    const editor = this.form.get('editor')
    if (data.html != editor.value) {
      editor.setValue(data.html)
    }
}

[BrianWClausen]

@kaos2404

Thanks for your short guide, it pointed me in the right direction. Here are a couple of minor improvements which works with killercodemonkey/ngx-quill

First of, you can pass the editor in the onEditorCreated event like this:
<quill-editor #quill (onEditorCreated)="onCreated($event)"></quill-editor>

You can then access the editor inside the scope of the method by passing it like so:
(This is especially useful if you have multiple instances of the editor)

public onCreated(editor:Quill) {
    const dropDownItems = {
        'Mike Smith': 'mike.smith@gmail.com',
        'Jonathan Dyke': 'jonathan.dyke@yahoo.com',
        'Max Anderson': 'max.anderson@gmail.com'
    }
    const myDropDown = new QuillToolbarDropDown({
      label: 'Variables',
      rememberSelection: false
    })

    myDropDown.setItems(dropDownItems)

    myDropDown.onSelect = (label, value, quill) => {
      const { index, length } = quill.selection.savedRange
      quill.deleteText(index, length,'user') //If you set the source to user, then it will work fine with reactive forms without the additional onChanged method
      quill.insertText(index, value,'user') //Same as above
      quill.setSelection(index + value.length)
    }

    myDropDown.attach(editor) //You just pass the editor here, no need for viewChild anymore
}