QuillJS：自定义属性

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 元素触发了点击，则会向用户显示弹出窗口。

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

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

import Parchment from 'parchment'
let blot = Parchment.find(this.currentImg)
// blot contain all what you need, all properties
// and you can change them in this way:
blot.format('alt', e.target.value)

希望对您有所帮助。这只是基本的工具，但我想您应该知道下一步该怎么做，以及它是如何工作的。

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