How to add alt and title attributes along with image in quill editor

Question

  var range = this.quill.getSelection();
  var value = prompt('please copy paste the image url here.');
  if(value){
      this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
  }

I solved the problem of adding images by linking in the quill editor with the api code above. But I couldn't find how to add alt and title properties with the help of api. I can edit it later with the following javascript code, but I need to edit it at the image insertion stage.

if (e.target.tagName=='IMG') {
  console.log(e.target.tagName)
  var el =   e.target;
el.setAttribute("title", "asdasdasd");
}
})

Also, when I add a or tag to the editor, it is surrounded by ap tag and cannot be edited. It puts everything in the p tag and doesn't allow tags like br. How can I solve these problems? Sorry for the bad english.

Answer 1

There seems to be no easy and elegant way to do it. The API does not allow it (or I have not seen it) and the source code does not seem to be documented. I propose this code while waiting for a better solution. It is based on a solution to observe dynamically created elements . I have added the caption of the title and alt attribute.

To get the code to work, you will need to explain the following to your users: They must write the title and alt in this format wherever they want to insert the image:

%title% A title %alt% An alternative text

Then, they must select that same:

%title% A title %alt% An alternative text

With that text selected they must click the image button and open the image.

Notice, at the moment, you cannot escape "%alt%" , so you cannot use the "%alt%" expression within the value of an attribute. Example:

 %title% The title is before %alt% %alt% the %alt% attribute

This causes an unwanted alt attribute.

Paste this code after creating an editor. BTW, it is only valid for the first editor that exists.

var FER_alt;
var FER_title;

function FER_callback(records) {

 records.forEach(function (record) {
  var list = record.addedNodes;
  var i = list.length - 1;

  for ( ; i > -1; i-- ) {
   if (list[i].nodeName === 'IMG') {
     if(FER_title.length > 0){
      list[i].setAttribute('title',FER_title)
     }
     if(FER_title.length > 0){
      list[i].setAttribute('alt',FER_alt)
     }      
    }
   }
 });
}

var FER_observer = new MutationObserver(FER_callback);
var FER_targetNode = document.querySelector('.ql-editor')

FER_observer.observe(FER_targetNode, { 
   childList: true,
   subtree: true
 });

function FER_getTitleAlt(){
  var selection = quill.getSelection();
  var texto =quill.getText(selection.index,selection.length);

  var titleE = texto.search("%alt%")
  FER_title = texto.substr(7,titleE-7);
  var titleI = titleE + 5
  FER_alt = texto.substring(titleI)
 }

 var FER_imageboton = document.querySelector(".ql-image")
  FER_imageboton.addEventListener("click",FER_getTitleAlt)

Answer 2

Instead of insertEmbed you can use getContents and setContents.

let delta = {
  ops: [
  {
    attributes: {
      alt: yourAltValue
    },
    insert: {
      image: yourSrcValue
    }
  }]
};
let existingDelta = this.quill.getContents();
let combinedDelta = existingDelta.concat(delta);
this.quill.setContents(combinedDelta);

Answer 3

Extends Image blot and override the create method

const Image = Quill.import('formats/image');

class ImageBlot extends Image {
  static create(value) {
    const node = super.create(value);
    if (typeof value === 'string') {
      node.setAttribute('src', this.sanitize(value));
      node.setAttribute('alt', this.sanitize(value).split('/').reverse()[0]);
    }
    return node;
  }
}

Quill.register(ImageBlot);

In this example, we set alt attribute with image's basename