QuillJS ：自定义 attr alt

Question

感谢您对我的问题感兴趣。

使用技术： PHP/JS

愿望结果：我希望允许将属性“alt”添加到图像中。添加图像时，会将其发送到服务器，然后将带有 url (src) 的 img 标签插入到编辑器中。它工作完美。

我想要的是，当您单击编辑器中的图像时，我们会打开一个框

该框建议自定义属性“alt”，有点像在 quilljs 中自定义链接。

看图片：

问题：有人会遇到这个东西，如果没有我应该采取什么方法？有人知道我应该如何去做吗？

非常感谢你的回答。

Answer 1

我做了这样的事情。首先，我创建自己的图像污点

class CustomImage extends BlockEmbed {
  static create (value) {
    let node = super.create()
    let img = document.createElement('img')
    img.setAttribute('alt', value.alt || '')
    img.setAttribute('src', value.url)
    node.appendChild(img)
    return node
  }
static formats (node) {
    let format = {}
    // do something with format for example format.alt = node.setAttribute('alt')
    // it's need to save changes in Delta
    return format
}
// also need to define static value
static value (node) {
    return {
      alt: node.getAttribute('alt'),
      url: node.getAttribute('src')
    }
  }
// and "public" typical method in JS
format (name, value) {
  if (name === 'alt') {
    this.domNode.alt = value
  }
}

第二件事，我为图像创建简单的弹出设置（它只是html元素）并将其放入文档中。

然后我偷看了鹅毛笔模块（quill-image-drop-module）它是如何以正确的方式实现的。我只处理文档上的点击，如果在img元素上触发点击，我会向用户显示弹出窗口。

class CustomImage extends BlockEmbed {
  static create (value) {
    let node = super.create()
    let img = document.createElement('img')
    img.setAttribute('alt', value.alt || '')
    img.setAttribute('src', value.url)
    node.appendChild(img)
    return node
  }
static formats (node) {
    let format = {}
    // do something with format for example format.alt = node.setAttribute('alt')
    // it's need to save changes in Delta
    return format
}
// also need to define static value
static value (node) {
    return {
      alt: node.getAttribute('alt'),
      url: node.getAttribute('src')
    }
  }
// and "public" typical method in JS
format (name, value) {
  if (name === 'alt') {
    this.domNode.alt = value
  }
}

要从图像中获取所有属性并更改它们，只需使用印迹对象。需要正常处理历史记录（CTRL+Z）。不要直接更改图像DOM元素，请使用 blot。因此，要获取所有属性并使用它们，请使用以下命令：

document.addEventListener('click', e => {
  if (e.target.tagName.toUpperCase() === 'IMG') {
    // just open popup and pass to it all settings from your blot image
    // for get all props from image use let blot = Parchment.find(e.target)
    // read more about this below
  }
}

我希望它对你有帮助。这只是基本的工具，但我想，您了解下一步该做什么以及它是如何工作的。

PS我不确定，这是最正确的方法，但我是这样做的。谢谢。