GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.95k stars 393 forks source link

Replacing only src of an IMG tag #524

Open kilobyte2007 opened 5 years ago

kilobyte2007 commented 5 years ago

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.

kilobyte2007 commented 5 years ago

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)
    }
PubliAlex commented 4 years ago

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.

anthonyjb commented 4 years ago

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.

PubliAlex commented 4 years ago

Nice to hear, do you have a roadmap for CT2 ?