如何在Quill编辑器中添加图像属性?我想添加 'alt' 和 'title' 属性

问题描述 投票:0回答:2

当我上传图像时,仅保存其“src”。我想添加替代文本和标题以用于 SEO 目的。我尝试在 Quill 文档中搜索模块,但找不到任何模块。

html angularjs image text-editor quill
2个回答
4
投票

也许不是直接答案,但相关。 以下是从全文 html 初始化时保留图像属性的解决方案。

解决方案1:

class ImageBlot extends Image {
  static create(value) {
    if (typeof value == 'string') {
      return super.create(value);
    } else {
      return value;
    }
  }

  static value(domNode) {
    return domNode;
  }
}
Quill.register(ImageBlot);

解决方案2:

class ImageBlot extends Image {
  static get ATTRIBUTES() {
    return [ 'alt', 'height', 'width', 'class', 'data-original', 'data-width', 'data-height', 'style-data' ]
  }

  static formats(domNode) {
    return this.ATTRIBUTES.reduce(function(formats, attribute) {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute);
      }
      return formats;
    }, {});
  }

  format(name, value) {
    if (this.constructor.ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value);
      } else {
        this.domNode.removeAttribute(name);
      }
    } else {
      super.format(name, value);
    }
  }
}
Quill.register(ImageBlot);

您可以使用solution2指定属性白名单。


0
投票

当我粘贴代码时,出现错误:super.create 不存在。我应该从哪个图像延伸?

© www.soinside.com 2019 - 2024. All rights reserved.