Ngx-quill: On ngx-quill toolbar. addHandler ('image', this. imageHandler. bind (this)); insertEmbed custom insert picture failed

[HvanTao]

EditorCreated(quill: any) {
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler.bind(this));
}

imageHandler() {
const ths = this;
ths['quill'].insertEmbed(0,'image','https://avatars2.githubusercontent.com/u/49151748?s=80&v=4','user');
}

This. imageHandler can call the value of pages TS if it uses. bind (this), but it cannot insert images normally. You can't use the value of TS without. bind (this), but you can insert the image normally.

[KillerCodeMonkey]

could you describe your problem a little more in details. i do not really get it.

you have to add bind(this) because image handlers are inside of quilljs - native javascript and is not connected to your class or app. so sure, if you do not add bind(this) this inside of a third party lib is different... this is just the way javascript works.

inside a quilljs handler this = the editor instance

[HvanTao]

At present, I am using angular 8. I want to upload Base64 pictures customized. But it was found that the binding toolbar. addHandler ('image', this. imageHandler); this in the imageHandler method became a toolbar object, which is not my current page's NewsDetailComponent. TS object. I can't call http.upload() custom upload picture

[KillerCodeMonkey]

and why do you not use .bind(this)?

[HvanTao]

Yeah, I've tried. But after using insert Embed of ngx-quill. Rich text on the page does not show pictures.

EditorCreated(quill: any) {
this.quillEditorRef = quill;
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', this.imageHandler.bind(this));
}

imageHandler() {
const ths = this;
ths.quillEditorRef.insertEmbed(0,'image','https://avatars2.githubusercontent.com/u/49151748?s=80&v=4','user');
}

[KillerCodeMonkey]

could you create a little stackblitz or plunkr to demonstrate the problem?
Do you use ngModel or formControls?

[HvanTao]

No use. bind (this), ths ['quill']. insertEmbed (0,'image','https://avatars2.githubusercontent.com/u/49151748? S = 80&v = 4','user');
Qull rich text on the page can successfully display pictures.

-- use formcontrols

[KillerCodeMonkey]

yeah but i have a fulltime job, and you want to solve your specific case. so i think it is valid to provide a working example to reproduce your issue i can work on ;-).

[HvanTao]

That's fine. Thank you! I'm using stackblitz create demo.

[HvanTao]

hi, stackblitz :https://stackblitz.com/edit/angular-tbkt7e

I've done it, but I don't know why it's successful...

[KillerCodeMonkey]

hehe, and that is why it is good to try to reproduce a problem in a clean an minimal environment ;-).

So just check the differences between your project and the example.

e.g. Changedetection strategy or and so on

[HvanTao]

(；′⌒`) I used the framework of Fuse - Angular 8 + Material Design Admin Template, which does not contain rich text. So I used ngx-quill. It's a little troublesome.

[KillerCodeMonkey]

yeah, but just checkout your Module or Component. there should be the differences i think, if you do not use editor somewhere else.

But it looks for me like some changedetection stuff.

[HvanTao]

In fact, the editor - > delta of ngx-quill has the value of illustration pictures. Can we solve the problem of not showing pictures in this respect?

[KillerCodeMonkey]

but the correct behavior is to show images right?

why not showing them?

Just check the value of the formControl and not of the editor reference.

[HvanTao]

ohhhhhhhhhhhhhhhhhhhhh!~ Thank you for your advice. I see that the value of formControl is the image I inserted. But I don't know how to update it so that it can be displayed in rich text.

[KillerCodeMonkey]

Than You have another Problem... If Editor instance and Control values are
correct.

So You have multiple quill components in that Page or something similar?
Maybe You are changing the wrong Editor?

Or Check If there are Errors in the js console

HvanTao [e-mail] schrieb am Do., 10. Okt. 2019, 12:33:

ohhhhhhhhhhhhhhhhhhhhh!~ Thank you for your advice. I see that the value
of formControl is the image I inserted. But I don't know how to update it
so that it can be displayed in rich text.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/568?email_source=notifications&email_token=AARI4YANZ5FPD2SLY4A5QOLQN4AGFA5CNFSM4I7JDAT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEA3X74A#issuecomment-540508144,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YFZWR5CDKHEIWLIZV3QN4AGFANCNFSM4I7JDATQ
.

[KillerCodeMonkey]

any updates?

[HvanTao]

I'm sorry, but I may be excited and misread. Control has no value in editor

[KillerCodeMonkey]

then check if you have a special ChangeDetectionStrategy in your component or application.

[HvanTao]

I used the ChangeDetectorRef page which is still not displayed.
Constructor (private_change DeteRef: Change Detector Ref) {}
Ths. _change DeteRef. markForCheck ();
Ths. _change DeteRef. detectChanges ();

[HvanTao]

[KillerCodeMonkey]

and did you checked the differences in your project to the stackblitz where it is working?
And in your screenshot you does not pass the 'user' source as last parameter of insertEmbed

Per default ngx-quill only tracks user changes.

[HvanTao]

Yeah, I added'user'and it didn't work either.

Sorry, I'm at 1:47 a.m. in China. I feel very sleepy and need to go home to rest and sleep. (⊙﹏⊙)

But thank you very much for answering all the time. It takes me 8 to 9 hours to get to the company. 9:30 am get to the company.

[KillerCodeMonkey]

yeah sleep well. maybe you see the problem after some rest ✌️.

But in general i think it has something to do with the your project. When it is working in the stackblitz.

[HvanTao]

Thank you. So are you.

[HvanTao]

Hey, I succeeded. The original reason is that the use of Control is not good, the change to ng-module is directly successful. But the quill. getSelection () gets null, and how to get the correct location for the insert picture

[KillerCodeMonkey]

in general you can listen to ngx-quill onSelectionChange there you get the old an new range of selected text.

just grab it from there.

I do not know how the image handling stuff works, but the original image handling remembers the current cursor position. just check it in the quilljs source code :).

Maybe it is "null", because the editor lost the focus.