Base solution for your next web application
Open Closed

Summernote in Modal, Enter button #4383


User avatar
1
rvanwoezik created

Hi, I am on ASP.NET CORE MVC & JQuery v5.0.4, and i have added a Modal with a summernote editor: [http://keenthemes.com/metronic/preview/?page=components/forms/widgets/summernote&demo=default])

In the Metronics demo if you press enter the editor goes to next line, in my modal if you press enter the data is saved and modal closes. How to prevent enter key to do this.

Here is my _AddEmployeeNoteModal.js

(function () {
    app.modals.AddEmployeeNoteModal = function () {

        var _modalManager;
        var _employeeService = abp.services.app.employee;
        var _$form = null;

        this.init = function(modalManager) {
            $('#summernote').summernote({
                height: 150,
                dialogsInBody: true
            });

            _modalManager = modalManager;
            _$form = _modalManager.getModal().find('form[name=EmployeeNoteForm]');
        };

        this.save = function () {
            var employeeNote = _$form.serializeFormToObject();
            var markupContent = $('#summernote').summernote('code');
            employeeNote.content = markupContent;

            _modalManager.setBusy(true);
            _employeeService.addEmployeeNote(
                employeeNote
            ).done(function () {
                _modalManager.close();
                abp.event.trigger('app.addEmployeeNoteModalSaved');
            }).always(function () {
                _modalManager.setBusy(false);
            });
        };
    };
})(jQuery);

4 Answer(s)
  • User Avatar
    2
    alirizaadiyahsi created

    Hi @rvanwoezik,

    you can change modal behavior. There are lines in *.Web.Mvc\wwwroot\Common\Scripts\ModalManager.js

    _$modal.find('.modal-body').keydown(function (e) {
                        if (e.which === 13) {
                            if (e.target.tagName.toLocaleLowerCase() === "textarea") {
                                e.stopPropagation();
                            } else {
                                e.preventDefault();
                                _saveModal();
                            }
    
                        }
                    });
    

    you can add summernote editor element into this keydown event. For example, I mean something like this:

    ...
        if($(e.target).arrt('class')=='note-editor')
    ...
    
  • User Avatar
    0
    rvanwoezik created

    Thanx! it's working now!

    _$modal.find('.modal-body').keydown(function (e) {
                        if (e.which === 13) {
                            if ((e.target.tagName.toLocaleLowerCase() === "textarea") || ($(e.target).arrt('class') === 'note-editable')) {
                                e.stopPropagation();
                            } else {
                                e.preventDefault();
                                _saveModal();
                            }
    
                        }
                    });
    
  • User Avatar
    0
    alirizaadiyahsi created

    Glad it helped!

  • User Avatar
    1
    dmux created

    I know this is closed two years ago, but for those (like me) finding this solution from a search...

    The solution above did not work for me, and I was also reluctant to edit the ModalManager.js in case a future upgrade of ASPNETZERO reverted my change.

    So I did this in my CreateOrEditModal.js file, in the "this.init" function, right after invoking summernote():

           $('.note-editing-area').keydown(function (e) {
               if (e.which === 13) {
                   e.stopPropagation();
               }
           });
    

    Because SummerNote uses the note-editing-area class for its text input box.