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.

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)