CODEWITHSUNDEEP
quillngx-quill
Aswin Rajeev
Aswin Rajeev

Reputation: 107

Data attribute for image tag in Quill

I want to add a custom data attribute to an image tag (say, data-filename="abc.jpeg"), that can store certain meta-data in Quill editor. I tried attributors in Quill, but couldn't succeed in getting the job done.

Could anyone help please.

Upvotes: 2

Views: 3884

Answers (2)

Daedra22
Daedra22

Reputation: 46

I extended your answer to accept all attributes originally passed to the img element. I do not understand why quill removes it.

    // Allow img to have all attributes passed originally
    const ImageBlot = Quill.import("formats/image");
    export class CustomImageBlot extends ImageBlot {
      static blotName = "customImage";
      static tagName = "img";
    
      /**
       * Converts the HTML tag to image blot
       * @param value
       */
      static create(value) {
        let node = super.create();
        Object.getOwnPropertyNames(value).forEach((attribute_name) => {
          node.setAttribute(attribute_name, value[attribute_name]);
        });
    
        return node;
      }
    
      /**
       * Converts the image blot to HTML tag
       * @param node
       */
      static value(node) {
        var blot = {};
        node.getAttributeNames().forEach((attribute_name) => {
          blot[attribute_name] = node.getAttribute(attribute_name);
        });
    
        return blot;
      }
    }
    
    Quill.register(CustomImageBlot);

Upvotes: 0

Aswin Rajeev
Aswin Rajeev

Reputation: 107

Solved the issue. I created a new blot by extending the Quill image format.

const ImageBlot = Quill.import('formats/image');
export class CustomImageBlot extends ImageBlot {

  static blotName = 'customImage';
  static tagName = 'img';

  /**
   * Converts the HTML tag to image blot
   * @param value 
   */
  static create(value) {

    let node = super.create();

    node.setAttribute('src', value.url);
    node.setAttribute('data-attr', value.data);

    return node;
  }

  /**
   * Converts the image blot to HTML tag
   * @param node 
   */
  static value(node) {

    var blot = {};

    blot.url = node.getAttribute('url');
    blot.data_attr = node.getAttribute('data-attr');

    return blot;
  }
}

Thanks a lot Loa for the suggestion for edit. I was able to solve a few of the issues with default support of the image format.

Upvotes: 3

Related Questions