富文本编辑视频插入问题

zxl

2025-07-14 0d17bf2c78965fe1bbf5b70827fe6c6a0e0a7565

富文本编辑视频插入问题

 manager/src/views/activity/index.vue

@@ -528,6 +528,7 @@
                <div
                  class="activity-content"
                  v-html="activityInfo.activityContent || '无内容'"
                  ref="“activityHTMLContent"
                ></div>
              </div>
            </Col>
@@ -1100,7 +1101,6 @@


        if (fileType === 'video') {
          console.log("插入")
          this.Quill.insertEmbed(index, 'video', {
            url:url,
            controls:'controls',
@@ -1114,8 +1114,8 @@
          this.$Message.warning('不支持的文件类型');
          return;
        }
        console.log(this.activityFrom.activityContent)
        this.Quill.setSelection(index + 1);
        console.log(this.content)
        this.$Message.success('上传成功')
      }
    }).catch(() => {
@@ -1217,7 +1217,19 @@
    this.infoModelShow = true
    this.activityInfo = row
    this.activityInfo.activityContent = this.escapeStringHTML(this.activityInfo.activityContent);
    this.$nextTick(() => {
      this.processVideos();
    });

  },
    processVideos() {
      const videos = this.$el.querySelectorAll('video');
      videos.forEach(video => {
        // 确保视频元素有必要的属性
        video.setAttribute('controls', '');
        video.setAttribute('playsinline', ''); // 针对移动端
        video.load();
      });
  },
  // 获取富文本编辑器的内容
  // 初始化数据
@@ -1347,7 +1359,7 @@
    this.activityFrom.coverType = this.coverType === '输入文字封面' ? 'text' :
      this.file ? this.getFileCategory(this.file.type) :
        this.activityFrom.coverType
    //判断文字类型有点问题

    this.$refs.form.validate(valid => {
      if (valid) {
        this.submitLoading = true

 manager/src/views/activity/video.js

@@ -3,23 +3,17 @@
const BlockEmbed = Quill.import('blots/block/embed');
const Link = Quill.import('formats/link');

const ATTRIBUTES = ['height', 'width', 'controls', 'src', 'poster'];
const ATTRIBUTES = ['height', 'width', 'controls', 'src', ];

class VideoBlot extends BlockEmbed {
  static create(value) {
    const node = super.create();

    // 设置基本属性
    node.setAttribute('controls', 'controls');
    node.setAttribute('controlsList', 'nodownload');
    node.setAttribute('preload', 'metadata');

    // 支持对象形式的value
    if (typeof value === 'object') {
      node.setAttribute('src', this.sanitize(value.url));
      node.setAttribute('poster', value.poster || '');
      node.setAttribute('width', value.width || '100%');
      node.setAttribute('height', value.height || 'auto');
      node.setAttribute('controls', value.controls || 'controls');
    } else {
      node.setAttribute('src', this.sanitize(value));
    }
@@ -43,9 +37,9 @@
  static value(node) {
    return {
      url: node.getAttribute('src'),
      poster: node.getAttribute('poster'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
      height: node.getAttribute('height'),
      controls: node.getAttribute('controls'),
    };
  }

@@ -66,4 +60,10 @@
VideoBlot.className = 'ql-video';
VideoBlot.tagName = 'video';

// 添加不会被 sanitize 的标记
VideoBlot.sanitize = function(url) {
  const sanitized = Link.sanitize(url);
  return sanitized === Link.PROTOCOL_WHITELIST[0] ? 'about:blank' : sanitized;
};

export default VideoBlot;