quill 添加标签,图片描述以及自定义属性

quill要给标签添加属性官方只提供了简单的方法

最简单的就是dangerouslyPasteHTML方法,这个看一眼就明白了的不多说

第一种方法:

dangerouslyPasteHTML(html: String, source: String = 'api')
dangerouslyPasteHTML(index: Number, html: String, source: String = 'api')


第二种方法

接下来就是官方的图片blot 官方源码中可以看出它除了src外还支持 alt width height 这三个属性

#部份官网代码
import { EmbedBlot } from 'parchment';
import { sanitize } from './link';

const ATTRIBUTES = ['alt', 'height', 'width'];

class Image extends EmbedBlot {
  static create(value) {
    const node = super.create(value);
    if (typeof value === 'string') {
      node.setAttribute('src', this.sanitize(value));
    }
    return node;
  }

从官方代码中可以看到insertEmbed插入的时候不能传对像或数组只能是src路径,其他三个属性只能通过设置formas 来实现。示例代码:

#插入图片 设置属性 前提示添加的标签属性在blot中允许添加
quill.insertEmbed(quill.getSelection().index, 'image', src, Quill.sources.USER)
quill.formatText(quill.getSelection.index,1,{"alt":"图片说明","width":100});
或者
quill.formatLine(quill.getSelection().index, quill.getSelection().length, 'alt', 'new alt');
quill.setSelection(quill.getSelection().length + 1, Quill.sources.USER);


第三种方法就要复杂些,需要自己实现,直接上代码

#这个示例代码来至官方
let BlockEmbed = Quill.import('blots/block/embed');

class ImageBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('alt', value.alt);
    node.setAttribute('src', value.url);
    return node;
  }

  static value(node) {
    return {
      alt: node.getAttribute('alt'),
      url: node.getAttribute('src')
    };
  }
}
ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';

insertEmbed插入图片的值需要是一个对像 当然可以扩展出很多属性比如 data-id data-src 等等自己想要的属性都可以,属性判断需要自己做。也可以直接继承Image这个类 只是这样做 quill会提示Image被复盖。


Tags javascript

留言(0)

评论