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 a p 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.

score 1 · Accepted Answer · answered Jun 11 '21 at 02:04

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)

Thank you so much. I will try and improve. However, if we can add a tag we want to the last clicked place in the quill editor, it seems more logical to create and add an img tag. Is there a way to add a tag to this place after getting the last place clicked with getselection() ? Do you have any information? — , Jun 11 '21 at 18:49
Do you mean something like this? `""` Write this in the editor to upload an image? — FER31, Jun 11 '21 at 23:49
i mean `this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);` We can add an image on the editor with the code. Do you know an api code that will replace the selected content when we enter an html where it says 'image'? Also this editor is problematic in many ways. Do you know of a text editor that allows html editing? Thank you very much for your interest and help. — , Jun 12 '21 at 22:06

score 1 · Answer 2 · answered Mar 17 '22 at 03:50

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);

score 0 · Answer 3 · answered Aug 03 '22 at 23:38

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

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

3 Answers3