ContentTools
ContentTools copied to clipboard
Replacing only src of an IMG tag
Hey, First of all thanks for the great tool, I like it a lot and use in a pretty big project.
My question is, is it possible to do the following: When editing a region containing an Image separately - is it possible that after uploading the image in the image dialog and confirming it - it only changes the src of the currently selected image?
I hope my question is pretty clear.
The solution from the sandbox doesn't really work for me because it uses a background-image style and I need it to be an IMG tag. I suppose it has to do something with changing the imageUploader.save method but I don't reall understand where to go from there.
I actually came up with the following solution. Maybe someone has thoughts why this isn't exactly good?
Inside the ImageUploader.prototype._onSave I put this:
let imageSrc = imageUrl + '?' + Math.random()
let focused = ContentEdit.Root.get().focused()
let oldAttributes = {}
for (let key in focused._attributes) {
oldAttributes[key] = focused._attributes[key]
}
delete oldAttributes['src']
delete oldAttributes['srcset']
this._dialog.save(imageSrc, imageSize)
if (focused.type() === 'Image') {
focused.parent().detach(focused);
setTimeout(() => {
let newFocused = ContentEdit.Root.get().focused()
for (let key in oldAttributes) {
newFocused._attributes[key] = oldAttributes[key]
}
if (!oldAttributes.width) {
delete newFocused._attributes['width']
}
if (!oldAttributes.height) {
delete newFocused._attributes['height']
}
}, 10)
}
Replacing div with background with a real img tag is a long time issue, and I think it will not be fixed if somebody don't propose a PR to add this as a completly new tool : real image.
I believe that the problem was that image don't support pseudo element, that is needed by content tools (for image cropping ?), to be brief, it would need a completly image management revamp.
This wont be fixed in this release of CT (e.g 1.0) support for images is lacking in CT1 and in CT2 we'd like to add support for the picture element to resolve various responsive challenges we face currently, this will mean a rewrite from scratch of the image element and associated tools.
Nice to hear, do you have a roadmap for CT2 ?