diff --git a/src/js/base/module/HintPopover.js b/src/js/base/module/HintPopover.js index d39d30f39..65a562e98 100644 --- a/src/js/base/module/HintPopover.js +++ b/src/js/base/module/HintPopover.js @@ -14,7 +14,6 @@ export default class HintPopover { this.ui = $.summernote.ui; this.$editable = context.layoutInfo.editable; this.options = context.options; - this.target = context.options.container; this.hint = this.options.hint || []; this.direction = this.options.hintDirection || 'bottom'; this.hints = Array.isArray(this.hint) ? this.hint : [this.hint]; @@ -45,7 +44,7 @@ export default class HintPopover { className: 'note-hint-popover', hideArrow: true, direction: '', - }).render().appendTo(this.target); + }).render().appendTo(this.options.container); this.$popover.hide(); this.$content = this.$popover.find('.popover-content,.note-popover-content'); @@ -228,10 +227,10 @@ export default class HintPopover { this.$content.empty(); const bnd = func.rect2bnd(lists.last(wordRange.getClientRects())); - const targetOffset = $(this.target).offset(); + const containerOffset = $(this.options.container).offset(); if (bnd) { - bnd.top -= targetOffset.top; - bnd.left -= targetOffset.left; + bnd.top -= containerOffset.top; + bnd.left -= containerOffset.left; this.$popover.hide(); this.lastWordRange = wordRange; diff --git a/src/js/base/module/ImagePopover.js b/src/js/base/module/ImagePopover.js index fcf1764d5..daf550a0d 100644 --- a/src/js/base/module/ImagePopover.js +++ b/src/js/base/module/ImagePopover.js @@ -43,15 +43,21 @@ export default class ImagePopover { update(target, event) { if (dom.isImg(target)) { const position = $(target).offset(); - const editingOffset = $(this.context.layoutInfo.editingArea).offset(); - const pos = { - left: position.left - editingOffset.left, - top: position.top - editingOffset.top, - }; + const containerOffset = $(this.options.container).offset(); + let pos = {}; + if (this.options.popatmouse) { + pos.left = event.pageX - 20; + pos.top = event.pageY; + } else { + pos = position; + } + pos.top -= containerOffset.top; + pos.left -= containerOffset.left; + this.$popover.css({ display: 'block', - left: this.options.popatmouse ? event.pageX - 20 : pos.left, - top: this.options.popatmouse ? event.pageY : pos.top, + left: pos.left, + top: pos.top, }); } else { this.hide(); diff --git a/src/js/base/module/LinkPopover.js b/src/js/base/module/LinkPopover.js index 602b1541f..7b49cb0a2 100644 --- a/src/js/base/module/LinkPopover.js +++ b/src/js/base/module/LinkPopover.js @@ -8,7 +8,6 @@ export default class LinkPopover { this.ui = $.summernote.ui; this.options = context.options; - this.target = context.options.container; this.events = { 'summernote.keyup summernote.mouseup summernote.change summernote.scroll': () => { this.update(); @@ -30,7 +29,7 @@ export default class LinkPopover { const $content = $node.find('.popover-content,.note-popover-content'); $content.prepend(' '); }, - }).render().appendTo(this.target); + }).render().appendTo(this.options.container); const $content = this.$popover.find('.popover-content,.note-popover-content'); this.context.invoke('buttons.build', $content, this.options.popover.link); @@ -56,9 +55,9 @@ export default class LinkPopover { this.$popover.find('a').attr('href', href).html(href); const pos = dom.posFromPlaceholder(anchor); - const targetOffset = $(this.target).offset(); - pos.top -= targetOffset.top; - pos.left -= targetOffset.left; + const containerOffset = $(this.options.container).offset(); + pos.top -= containerOffset.top; + pos.left -= containerOffset.left; this.$popover.css({ display: 'block', diff --git a/src/js/base/module/TablePopover.js b/src/js/base/module/TablePopover.js index da8eb2db5..e4c77dfab 100644 --- a/src/js/base/module/TablePopover.js +++ b/src/js/base/module/TablePopover.js @@ -55,6 +55,10 @@ export default class TablePopover { if (isCell) { const pos = dom.posFromPlaceholder(target); + const containerOffset = $(this.options.container).offset(); + pos.top -= containerOffset.top; + pos.left -= containerOffset.left; + this.$popover.css({ display: 'block', left: pos.left,