Fixes #2422 - Browser resize for pasted images is not resizing the image in edit view.
This commit is contained in:
Martin Edenhofer
parent
a17137c4a5
commit
4a67fcd10b
2 changed files with 42 additions and 19 deletions
|
|
@ -296,7 +296,10 @@
|
|||
var result = e.target.result
|
||||
var img = document.createElement('img')
|
||||
img.src = result
|
||||
maxWidth = this.$element.width() || 500
|
||||
maxWidth = 1000
|
||||
if (this.$element.width() > 1000) {
|
||||
maxWidth = this.$element.width()
|
||||
}
|
||||
scaleFactor = 2
|
||||
//scaleFactor = 1
|
||||
//if (window.isRetina && window.isRetina()) {
|
||||
|
|
@ -309,7 +312,7 @@
|
|||
this.log('image inserted')
|
||||
result = dataUrl
|
||||
if (this.options.imageWidth == 'absolute') {
|
||||
img = "<img tabindex=\"0\" style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">"
|
||||
img = "<img tabindex=\"0\" style=\"width: " + width + "px; max-width: 100%;\" src=\"" + result + "\">"
|
||||
}
|
||||
else {
|
||||
img = "<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
|
||||
|
|
@ -440,12 +443,11 @@
|
|||
this.log('image inserted')
|
||||
result = dataUrl
|
||||
if (this.options.imageWidth == 'absolute') {
|
||||
img = $("<img tabindex=\"0\" style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">")
|
||||
img = "<img tabindex=\"0\" style=\"width: " + width + "px; max-width: 100%;\" src=\"" + result + "\">"
|
||||
}
|
||||
else {
|
||||
img = $("<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">")
|
||||
img = "<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
|
||||
}
|
||||
img = img.get(0)
|
||||
|
||||
if (document.caretPositionFromPoint) {
|
||||
var pos = document.caretPositionFromPoint(x, y)
|
||||
|
|
|
|||
|
|
@ -23,11 +23,10 @@
|
|||
this._defaults = defaults
|
||||
this._name = pluginName
|
||||
|
||||
// only run if needed
|
||||
if (!document.queryCommandSupported('enableObjectResizing')) {
|
||||
// disable browser based image resizing, use shim anyway
|
||||
document.execCommand('enableObjectResizing', false, false);
|
||||
this.bindEvents()
|
||||
}
|
||||
}
|
||||
|
||||
Plugin.prototype.bindEvents = function () {
|
||||
this.$element.on('click', 'img', this.createEditor.bind(this))
|
||||
|
|
@ -46,15 +45,23 @@
|
|||
|
||||
Plugin.prototype.destroyEditors = function () {
|
||||
this.$element.find('img.objectResizingEditorActive').each(function(i, img){
|
||||
editor = $(img).data('objectResizingEditor')
|
||||
$img = $(img)
|
||||
editor = $img.data('objectResizingEditor')
|
||||
|
||||
// remove editor by object
|
||||
if(editor){
|
||||
editor.destroy()
|
||||
}
|
||||
|
||||
// remove editor fragments manually
|
||||
else {
|
||||
$img.removeClass('objectResizingEditorActive')
|
||||
$img.siblings().remove()
|
||||
$img.unwrap()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
Resize Editor
|
||||
|
|
@ -107,12 +114,13 @@
|
|||
}
|
||||
|
||||
Editor.prototype.startResize = function (event) {
|
||||
var $handle = $(event.currentTarget)
|
||||
var $handle = $(event.currentTarget),
|
||||
maxWidth = this.$element.closest('[contenteditable="true"]').width() || ''
|
||||
this.resizeCorner = $handle.index()
|
||||
this.resizeDir = this.resizeCorner == 0 || this.resizeCorner == 3 ? -1 : 1
|
||||
this.startX = event.pageX
|
||||
this.startWidth = this.$element.width()
|
||||
this.$clone = this.$element.clone().css({width: '', height: ''}).addClass('enableObjectResizingShim-clone enableObjectResizingShim-clone--'+ this.resizeCorner)
|
||||
this.$clone = this.$element.clone().css({width: '', height: '', 'max-width': maxWidth}).addClass('enableObjectResizingShim-clone enableObjectResizingShim-clone--'+ this.resizeCorner)
|
||||
this.$element.after(this.$clone)
|
||||
this.isResizing = true
|
||||
$(document).on('mousemove.enableObjectResizing', this.resize.bind(this))
|
||||
|
|
@ -121,17 +129,33 @@
|
|||
|
||||
Editor.prototype.resize = function (event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
var dx = event.pageX - this.startX
|
||||
this.$clone.css('width', this.startWidth + (this.resizeDir * dx))
|
||||
}
|
||||
|
||||
Editor.prototype.resizeEnd = function (event) {
|
||||
var maxWidth = this.$element.closest('[contenteditable="true"]').width(),
|
||||
width = this.$clone.width(),
|
||||
height = this.$clone.height(),
|
||||
naturalWidth = this.$clone.get(0).naturalWidth,
|
||||
naturalHeight = this.$clone.get(0).naturalHeight
|
||||
|
||||
if (maxWidth && maxWidth < width + 10) {
|
||||
height = ''
|
||||
width = ''
|
||||
if (naturalWidth) {
|
||||
width = naturalWidth / 2
|
||||
}
|
||||
}
|
||||
|
||||
$(document).off('mousemove.enableObjectResizing')
|
||||
$(document).off('mouseup.enableObjectResizing')
|
||||
|
||||
this.$element.css({
|
||||
width: this.$clone.width(),
|
||||
height: this.$clone.height()
|
||||
width: width,
|
||||
height: height,
|
||||
'max-width': '100%'
|
||||
})
|
||||
this.$clone.remove()
|
||||
|
||||
|
|
@ -141,9 +165,6 @@
|
|||
}.bind(this))
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
$.fn[pluginName] = function (options) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, 'plugin_' + pluginName)) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue