question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

model does't change on image drag and drop

See original GitHub issue

hi, I’m experiencing an issue when drag/dropping in image from a folder to ckeditor. The issue appears only when I drop an image and dont add anything else after it. If I add some text after dropping an image, the model ‘refreshes’.

the editor

                <ckeditor *ngIf="showCkEditor"
                id="signatureTemplate"
                name="signatureTemplate"
                [(ngModel)]="signatureTemplate"
                (change)="onTemplateChange($event)"
                (focus)="focusChanged('htmlTemplate',$event)"
                [config]="{
                  extraPlugins: 'uploadimage,font,footnotes',
                  contentsCss:'/assets/css/ckeditor.css',
                  uploadUrl: '...',
                  filebrowserUploadUrl: '...'
                }"
                debounce="50">
              </ckeditor>

after droping the image, the model, signatureTemplate, stays the same, if I add a letter after the img the model shows both the image and the letter

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
DelGuapocommented, Mar 14, 2018

Expanding on @pgarzina, i think another solution would be to implement ViewChild to gain access to the CKEDITOR class. Its a little cleaner, but still a work-around.

in my HTML:

            <ckeditor 
                #ckEditor
                [(ngModel)]="wysiwygModel"
                (change)="modifyParam($event)"
                [config]="WYSIWYGConfig">
            </ckeditor>

in my class:

@ViewChild('ckEditor') ckEditor: ElementRef;

modifyParam() {
    const cke: any = <any>this.ckEditor;
    this.wysiwygModel = cke.instance.getData();
  }
0reactions
pgarzinacommented, Feb 26, 2018

ok thx, ill probably try the new version on a new project 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

With HTML5 drag and drop, how can I change the drag image ...
You are able to set the drag image using dataTransfer.setDragImage method. It exists in the event objects of all of the drag events,...
Read more >
Drag and drop onto image question type - MoodleDocs
In the Draggable items section, you can upload images if you leave the type as 'draggable image' or you can type in words...
Read more >
Using the HTML5 Drag and Drop API - web.dev
The HTML5 Drag and Drop API means that we can make almost any element on our page draggable. In this post we'll explain...
Read more >
Setting a custom ghost image when using HTML5 drag and drop
Setting a custom ghost image when using HTML5 drag and drop. In the HTML5 spec it's possible to make elements drag-and-drop-able. This is...
Read more >
An Essential Guide to JavaScript Drag and Drop By Examples
By default, the browser doesn't change the appearance of the dragged element. Therefore, you can customize its appearance based on your preferences. Events...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found