如何在羽毛笔编辑器中添加 alt 和 title 属性以及图像

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

我通过在 quill 编辑器中使用上面的 api 代码链接解决了添加图像的问题。但是我找不到如何在 api 的帮助下添加 alt 和 title 属性。我可以稍后使用以下 javascript 代码对其进行编辑，但我需要在图像插入阶段对其进行编辑。

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

还有，当我在编辑器中添加一个或标签时，它被一个p标签包围着，无法编辑。它将所有内容都放在 p 标签中，并且不允许像 br 这样的标签。我该如何解决这些问题？对不起英语不好。

Answer 1

似乎没有简单而优雅的方法来做到这一点。 API 不允许（或者我没有看到）并且源代码似乎没有记录。我在等待更好的解决方案时提出此代码。它基于 observe dynamically created elements 的解决方案。我已经添加了title和alt属性的标题。

要使代码正常工作，您需要向用户解释以下内容：他们必须在要插入图像的任何位置以这种格式编写 title 和 alt：

%title% A title %alt% An alternative text

然后，他们必须 select 同样：

%title% A title %alt% An alternative text

使用该文本 selected 他们必须单击图像按钮并打开图像。

请注意，目前您无法转义 "%alt%"，因此您无法使用 "%alt%"属性值内的表达式。示例：

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

这会导致不需要的 alt 属性。

创建编辑器后粘贴此代码。顺便说一句，它只对存在的第一个编辑器有效。

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

您可以使用 getContents 和 setContents 代替 insertEmbed。

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

如何在羽毛笔编辑器中添加 alt 和 title 属性以及图像

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

javascript

quill