question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Image align styles not being retained when they are already set

See original GitHub issue

I cannot get the image styles that are set with the align to be kept when re-displaying the image inside a quill editor.

Use case:

  1. Add and right align an image in the editor.
  2. Save the editor innerHTML in a database
  3. Redisplay the edited HTML in a new quill editor to allow user to update the HTML

Expected: image in the new editor should still be aligned right. Actual: image in new editor has had all the style attributes removed

I’ve updated the demo Plunk to show the issue. In this example, I’ve added the align style attributes to the first image in the HTML (style="display: inline; float: right; margin: 0px 0px 1em 1em;"). The editor has removed them and the image is not being aligned right.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:23
  • Comments:28

github_iconTop GitHub Comments

99reactions
MaximusBatoncommented, Jul 25, 2017

@bdurand , you’re absolutely right! thanks!

here’s my solution:

var BaseImageFormat = Quill.import('formats/image');
const ImageFormatAttributesList = [
    'alt',
    'height',
    'width',
    'style'
];

class ImageFormat extends BaseImageFormat {
  static formats(domNode) {
    return ImageFormatAttributesList.reduce(function(formats, attribute) {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }
  format(name, value) {
    if (ImageFormatAttributesList.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}

Quill.register(ImageFormat, true);
                
                
var quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        imageResize: {}
    }
});

21reactions
mxgr7commented, Jun 20, 2017

Have you tried adding 'width’ to the formats: [...] option?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Align and Float Images with CSS | Web Design
Images can easily align and float images with CSS. They can be aligned and floated to allow the images to be placed in...
Read more >
Alignment of inserted images doesn't work... [#1111808] - Drupal
When you save image with align set , those settings are saved (look at source of your html page -> there is float...
Read more >
Align and float images on your website with HTML and CSS
Aligned images : using image align, you can choose a left, center, or right placement. The text doesn't flow around the image but...
Read more >
right align an image using CSS HTML - Stack Overflow
My workaround for this issue was to set display: inline to the image element. With this, your ...
Read more >
Image Alignment Problem in UI for ASP.NET AJAX - Telerik
It's working before i saved into database. Again i opened the page, now i try to change the image alignment left -to- right...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found