quill编辑器自定义音频、视频、行内style样式(字符边框、首行缩进)_react-quill设置自定义样式

一、音频

1、自定义内容

import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');


// 音频
class AudioBlot extends BlockEmbed {
  static create(value) {
    console.log(value)
    const node = super.create(value);
    node.setAttribute('src', value.url);
    node.setAttribute('controls', true);
    node.setAttribute('name', value.name);
    node.setAttribute('controlsList', 'nodownload');
    return node;
  }
  // 添加value获取当前的audio元素。拿到audio元素的属性。
  static value(domNode) {
    const value = {
      url: '',
      name: '',
    };
    // 这里要加判断。不然会显示undefined
    if (domNode.getAttribute('src')) {
      value.url = domNode.getAttribute('src');
      value.name = domNode.getAttribute('name');
    }
    console.log(value)
    return value;
  }
}
AudioBlot.blotName = 'audio';
AudioBlot.tagName = 'audio';
export default { AudioBlot};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2、引入使用

引入

import blotsInfo from '../utils/audio-blot'
Quill.register(blotsInfo.AudioBlot);
1
2

将选择好的文件地址插入到编辑器中

const quill = this.$refs.myQuillEditor.quill;
// insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
quill.insertEmbed(this.curCursor, 'audio', { url: this.currentMaterial });
1
2
3

二、视频

1、自定义内容

import { Quill } from 'vue-quill-editor';
const BlockEmbed = Quill.import('blots/block/embed');


// 视频
class VideoBlot extends BlockEmbed {
  static create(value) {
    let node = super.create(value);
    node.setAttribute('src', value.url || value);   //设置audio的src属性
    node.setAttribute('controls', true);   //设置audio的controls，否则他将不会显示
    node.setAttribute('controlsList', 'nodownload');   //设置audio的下载功能为不能下载
    node.setAttribute('id', 'videoAuto');     //设置一个id
    node.setAttribute('style', 'width:100%');     //设置一个id
    //外层套入div （不套入会产生无法删除乱起八糟的问题
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/91226