Image Upload uploadded image not shown on store when I use more than 2 summernote editor

[mshukurlu]

Hi friends, I want to upload images to my server this is working well I even see the image on the editor. but when I submit to store text on the database I releaze that the inserted text is missing. After reviewing codes I catch this is related using multi summernote . The first summernote editor works well to store its text to database.

See my codes :

Summernote 1:

{{isset($data->text_az) ? $data->text_az : ""}}

        <script>
            $(document).ready(function() {
                var editor = $('#summernote2');
                editor.summernote({
                    callbacks: {
                        onImageUpload: function(files) {
                            for(let i=0; i < files.length; i++) {
                                $.upload(files[i]);
                            }
                        }
                    },
                    height: ($(window).height() - 250),
                    focus: false,
                    toolbar: [
                        ['fontstyle',['fontname']],
                        ['insert',['link','picture','table']],

                        ['misc',['undo','redo']],
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['Arial','strikethrough']],
                        ['fontsize', ['fontsize']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['view', ['fullscreen', 'codeview']],
                    ],
                    oninit: function() {
                        // Add "open" - "save" buttons
                        var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Add Code" data-event="something" tabindex="-1"><i class="fa fa-file-text"></i></button>';
                        var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
                        $(fileGroup).appendTo($('.note-toolbar'));
                        // Button tooltips
                        $('#makeSnote').tooltip({
                            container: 'body',
                            placement: 'bottom'
                        });
                        // Button events
                        $('#makeSnote').click(function(event) {
                            var range = window.getSelection().getRangeAt(0);
                            var node = $(range.commonAncestorContainer)
                            if (node.parent().is('code')) {
                                node.unwrap();
                            } else {
                                node = $('<code />')[0];
                                range.surroundContents(node);
                            };

                        });
                    },

                });

                $.upload = function (file) {
                    let out = new FormData();
                    out.append('file', file, file.name);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        method: 'POST',
                        url: '/admin/summernote_upload',
                        contentType: false,
                        cache: false,
                        processData: false,
                        data: out,
                        success: function (img) {
                            $('#summernote2').summernote('insertImage', img);

                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.error(textStatus + " " + errorThrown);
                        }
                    });
                };

            });
        </script>

Summernote 2 :

   <textarea name="text_en" rows="40"  id="summernote2_en">{{isset($data->text_en) ? $data->text_en : ""}}</textarea>
        <script>
            $(document).ready(function() {
                var editor = $('#summernote2_en');
                editor.summernote({
                    callbacks: {
                        onImageUpload: function(files) {
                            for(let i=0; i < files.length; i++) {
                                $.upload(files[i]);
                            }
                        }
                    },
                    height: ($(window).height() - 250),
                    focus: false,
                    toolbar: [
                        ['fontstyle',['fontname']],
                        ['insert',['link','picture','table']],

                        ['misc',['undo','redo']],
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['Arial','strikethrough']],
                        ['fontsize', ['fontsize']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['view', ['fullscreen', 'codeview']],
                    ],
                    oninit: function() {
                        // Add "open" - "save" buttons
                        var noteBtn = '<button id="makeSnote" type="button" class="btn btn-default btn-sm btn-small" title="Add Code" data-event="something" tabindex="-1"><i class="fa fa-file-text"></i></button>';
                        var fileGroup = '<div class="note-file btn-group">' + noteBtn + '</div>';
                        $(fileGroup).appendTo($('.note-toolbar'));
                        // Button tooltips
                        $('#makeSnote').tooltip({
                            container: 'body',
                            placement: 'bottom'
                        });
                        // Button events
                        $('#makeSnote').click(function(event) {
                            var range = window.getSelection().getRangeAt(0);
                            var node = $(range.commonAncestorContainer)
                            if (node.parent().is('code')) {
                                node.unwrap();
                            } else {
                                node = $('<code />')[0];
                                range.surroundContents(node);
                            };

                        });
                    },

                });

                $.upload = function (file) {
                    let out = new FormData();
                    out.append('file', file, file.name);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        method: 'POST',
                        url: '/admin/summernote_upload',
                        contentType: false,
                        cache: false,
                        processData: false,
                        data: out,
                        success: function (img) {
                            $('#summernote2_en').summernote('insertImage', img);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.error(textStatus + " " + errorThrown);
                        }
                    });
                };

            });
        </script>

What is your Operating System, Browser and Version and Summernote Version you are using:

This can help find and resolve any issues.

1. Operating System:Windows 10

2. Browser and Version: Chrome

3. Summernote Version:v0.8.7

4. Bootstrap Version or Lite:3.3.5

[DennisSuitters]

The easiest way would be to give each area it's own ID, then initialise each instance seperatly.

[mshukurlu]

@DiemenDesign your mean is need I use this areas on different page?. I think that the last option.I think there is a way to solv this

[DennisSuitters]

NO, that's not what I said at all. The URL to upload images doesn't look right, have you checked if your getting script errors?

[mshukurlu]

@DiemenDesign Yes I have checked it Everything works well on server side, I have wach Network tab on developer tools, I understand my scripts works bad when Summernote is couple.

[DennisSuitters]

Did you find a solution for your issue?

[mshukurlu]

@DiemenDesign I solved this problem creating GET routes to each group of editor .

Before I was used editors on one page now I seperate them into every prefix.

For example I am using /az /en /ru in the my params then I just generate summernote codes regarding this.

[DennisSuitters]

I never ran into this issue, as I use each instance of Summernote within a form, so if that form is submitted via a toolbar button plugin I created to have a save button similar to a word processor, it send the correct data every time. Glad you found a solution, I'll close this now.