image and video alignments do not save in quill.

See original GitHub issue

Hi, Thank you for making this library. I have an issue with image and video alignments. When I click on an image or video I inserted in the quill editor (I am using react-quill), I can align left, right, and center using the resizer box provided by quill-blot-formatter. But, as soon as I remove the editor and display the content in <div class="ql-editor" dangerouslySetInnerHTML={{ __html: content }} />, all the contents, images and videos are there but alignments are ignored.

Could you tell me what I may be missing? or at least can I hide the alignment boxes in quill-blot-formatter so that users can just use the alignment options in the quill-toolbar?

Thanks

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:8
  • Comments:16

github_iconTop GitHub Comments

10reactions
BrenoLopescommented, Aug 7, 2020

Using the code above I had to make some changes to make quill accept it and register.

import Quill from 'quill';

const Image = Quill.import('formats/image'); // Had to get the class this way, instead of ES6 imports, so that quill could register it without errors

const ATTRIBUTES = [
  'alt',
  'height',
  'width',
  'class', 
  'style', // Had to add this line because the style was inlined
];

class CustomImage extends Image {
  static formats(domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      const copy = { ...formats };

      if (domNode.hasAttribute(attribute)) {
        copy[attribute] = domNode.getAttribute(attribute);
      }

      return copy;
    }, {});
  }

  format(name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}

export default CustomImage;

And them register it

Quill.register({
     // ... other formats
    'formats/image': CustomImage
});

Thanks miczed for pointing out the way

4reactions
oxdccommented, Jul 3, 2018

Same issue. And I find a solution here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Formats - Quill Rich Text Editor
Quill supports a number of formats, both in UI controls and API calls. By default all formats are enabled and allowed to exist...
Read more >
How to register alignment styles in react-quill - Stack Overflow
I am able to get the react-quill editor to work but I am not able to get the image styles/paragraph styles that are...
Read more >
Quill Editor script to read from database - SitePoint
PS… The alignments of left, right, center, justify don't work. In the editor they properly display, but once posted all alignments are left....
Read more >
quill | Yarn - Package Manager
Important: This documentation covers modern versions of Yarn. For 1.x docs, see classic.yarnpkg.com. Yarn.
Read more >
Events | Documentation - Froala
Take a look through all the Events that are a part of the Froala WYSIWYG editor. ... The passed link is either incorrect...
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