summernote get my id textarea

Question

I use custom buttons with summernote on bootstrap, with this operations :

• click custom button (done)
• open modal with ajax content (done)
• user chose an item (done)
• modal call callback button param and close (done)
• function callback insert link in textarea (done)

So, what's wrong ?

I want to get the textarea id in the callback function, in order to be dynamical (see the last function).

Question : can i get the textarea id from the context ? With another way ? (i dont find it in the console.log(context);)

And question 2 : how to get the cursor position ? my link is added in first position.

var summernote = {

    run: function(id, type) {
        if(type && type === 'full') {
            this.full(id);
        } else {
            this.simple(id);
        }
    },

    simple: function(id) {
        // todo
    },

    full: function(id) {
        var summernote_params = { height:300,
                                  lang: 'fr-FR',
                                  toolbar: [
                                            ['misc', ['undo', 'redo']],
                                            ['style', ['bold', 'italic', 'underline', 'clear']],
                                            ['font', ['superscript', 'subscript']],
                                            ['para', ['ul', 'ol']],
                                            ['mybuttons', ['docimage', 'docdocument']],
                                           ],
                                  buttons: { 
                                             docimage: summernote.docImage,
                                             docdocument: summernote.docDocument,
                                           }, 
                                };
        $('#'+id).summernote(summernote_params);
    },

    docImage: function(context) {
        var ui = $.summernote.ui;
        var button = ui.button({
            contents: '<i class="fa fa-file-image-o"></i>',
            tooltip: 'Insert image',
            click: function () {
                documents.run({filter:'image', callback:[summernote.docImageCallback, context]});
            }
        });
        return button.render();
    },

    docImageCallback: function(context, doc) {
        context.invoke('editor.insertImage', doc.url);
    },

    docDocument: function(context) {
        var ui = $.summernote.ui;
        var button = ui.button({
            contents: '<i class="fa fa-file-o"></i>',
            tooltip: 'Insert file',
            click: function () {
                documents.run({filter:'document', callback:[summernote.docDocumentCallback, context]});
            }
        });
        return button.render();
    },

    docDocumentCallback: function(context, doc) {
        // here i want to get id dynamically
        $('#description').summernote('createLink', {
          text: doc.name,
          url: doc.url,
          newWindow: true
        });
    },

}

And the call

<textarea id="description"></textarea>
<script>
summernote.run('description', 'full');
</script>

Answer 1

So i found a solution for each issue.

The params in the init are sendend in the context. To get the id in the context i just add it in the init :

var summernote = {

...

full: function(id) {
    var summernote_params = { id: id,   // <-- set id in context, (cutsom data)
                              height: 300,
                              lang: 'fr-FR',
                              toolbar: [
                                        ['misc', ['undo', 'redo']],
                                        ['style', ['bold', 'italic', 'underline', 'clear']],
                                        ['font', ['superscript', 'subscript']],
                                        ['para', ['ul', 'ol']],
                                        ['mybuttons', ['docimage', 'docdocument']],
                                       ],
                              buttons: { 
                                         docimage: summernote.docImage,
                                         docdocument: summernote.docDocument,
                                       }, 
                            };
    $('#'+id).summernote(summernote_params);
},

...

docDocumentCallback: function(context, doc) {
    var id = context.options.id;   // <-- get id from context
    $('#'+id).summernote('createLink', {
      text: doc.name,
      url: doc.url,
      newWindow: true
    });
},

}

And for keep the cursor position with external call, just save the position, and set it in the callback function :

var summernote = {

...

docDocument: function(context) {
    var ui = $.summernote.ui;
    var button = ui.button({
        contents: '<i class="fa fa-file-o"></i>',
        tooltip: app_i18n.summernote_document,
        click: function () {
            context.invoke('editor.saveRange');  // <-- save position cursor
            documents.run({filter:'document', callback:[summernote.docDocumentCallback, context]});
        }
    });
    return button.render();
},

docDocumentCallback: function(context, doc) {
    context.invoke('editor.restoreRange');  // <-- set position cursor to the last save
    if(context.options.id) {
        $('#'+context.options.id).summernote('createLink', {
          text: doc.name,
          url: doc.url,
          newWindow: true
        });
    }
},

}