Summernote uploading image problem (outside of note-editable)

Question

I have problem regarding uploading image sometimes inside the editor. When I upload image, image is going outside of note-editable div. I saw that some people has same problem but I did not find the solution. Here is the image:

enter image description here

As you can see, the image is outside of note-editable div. I was trying to fix by scss hacks but it's same. Please help me if someone has same issue or know how to fix it. Thank you.

Steps:

When I click on this Image icon, modal will be opened Image Icon
for opening modal
When modal is opened, then I am choosing some picture and modal will be automatically closed and it will show me my page Open modal for adding image
And I put the cursor to add this image after my last one, and as you can see, image is added under the note-editable div. But it needs to be added in note-editable div. Added image outside of
note-editable div

Here is the my .ts file of summernote component:

   @Component({
    selector: 'summernote-editor',
    templateUrl: './summernote-editor.component.html',
    styleUrls: ['./summernote-editor.component.scss'],
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SummernoteEditorComponent),
            multi: true,
        },
    ],
    imports: [FormsModule, NgxSummernoteModule],
})

export class SummernoteEditorComponent implements OnChanges, ControlValueAccessor {
    constructor() {this.InitSummernote(); }

    readonly value = signal(null);
    private onChange: Function = () => {};
    private onTouched: Function = () => {};
    summernoteConfig: any;

    ngOnChanges() {
    }

    handleOnChange(value: any) {
        this.onChangedAndTouched(value?.toString());
    }

    onChangedAndTouched(value: string) {
        this.onTouched();
        this.onChange(value);
        this.writeValue(value);
    }

    setStateTouched() {
        this.onTouched();
    }

    writeValue(obj: any): void {
        this.value.set(obj);
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouched = fn;
    }

    private InitSummernote() {
        // Summer Note / Description
        this.summernoteConfig = {
            disableDragAndDrop: true,
            // airMode: true,
            placeholder: '',
            tabsize: 2,
            height: '400px',
            //uploadImagePath: '/api/upload',
            toolbar: [
                ['style', ['style']],
                ['undoredo', ['undo', 'redo']],
                [
                    'font',
                    [
                        'bold',
                        'italic',
                        'underline',
                        'strikethrough',
                        'superscript',
                        'subscript',
                        'clear',
                    ],
                ],
                ['color', ['forecolor']],
                ['para', ['ul', 'ol']],
                ['insert', ['table', 'picture', 'link', 'video', 'hr']],
                ['misc', ['fullscreen', 'codeview']],
                ['mybutton', ['disableBg', 'enableBg', 'flex', 'imageLink', 'addNote', 'addWarning', 'addTip']],
            ],
            buttons: {
                disableBg: GrayBgButton,
                flex: flexAlign,
                imageLink: ImageLink,
                addNote: addNoteButton,
                addWarning: addWarningButton,
                addTip: addTipButton,
            },
            styleTags: ['h2', 'h3', 'h4', 'h5', 'p'],
            imageAttributes: {
                icon: '',
                figureClass: 'figureClass',
                figcaptionClass: 'captionClass',
                captionText: 'Caption Goes Here.',
            },
            lang: 'en-US',
            popover: {
                image: [
                    [
                        'image',
                        [
                            'resizeFull',
                            'resizeHalf',
                            'resizeQuarter',
                            'resizeNone',
                        ],
                    ],
                    /*['float', ['floatLeft', 'floatRight', 'floatNone']],*/
                    ['remove', ['removeMedia']],
                    ['custom', ['imageAttributes']],
                ],
            },
            callbacks: {
                onInit: () => {
                    const editor = $('#summernote')
                    enableVideoResize(editor);
                },
            }
        };
    }

    insertImageLink() {
        const reader = new FileReader();
        const file = $("#imageFile")[0].files[0];
        const link = $("#linkUrl").val();
        const aNode = document.createElement("a");
        const img = document.createElement("img");
        if (!link) {
            alert('You need to specify anchor link');
            return;
        }
        aNode.target = "_blank";
        aNode.href = link;
        aNode.appendChild(img);

        reader.onload = function (e) {
            img.src = e.target.result as string;
            // selection
            $("#summernote").summernote("editor.saveRange");
            $("#summernote").summernote("editor.restoreRange");
            $("#summernote").summernote("editor.focus");
            $("#summernote").summernote("editor.insertNode", aNode);
            // reset
            $("#imageFile").val("");
            $("#linkUrl").val("");

        }

        reader.readAsDataURL(file);
        this.hideInsertImageLinkModal();
    }
    hideInsertImageLinkModal() {
        $('#imageLinkModal').modal('hide');
    }
}

Summernote uploading image problem (outside of note-editable)

Answers (0)

Related Questions