一切福田，不離方寸，從心而覓，感無不通。

修复 UEditor 上传视频的相关问题

相关问题：

1.上传后无法播放的问题

2.编辑后视频丢失的问题

3.切换 html 按钮src链接丢失问题

4.插入视频后预览出错的问题

解决方案：

1. 打开 ueditor.all.js 文件，搜索 me.commands["insertvideo"]

  1. 将 edui-faked-video 改为 edui-faked, 防止此处被替换为 image 标签
  2. 将 image 改为 video, 实现视频实时预览，修复保存导致视频丢失
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
        me.commands["insertvideo"] = {
            execCommand: function (cmd, videoObjs, type){
                videoObjs = utils.isArray(videoObjs)?videoObjs:[videoObjs];
                var html = [],id = 'tmpVedio', cl;
                for(var i=0,vi,len = videoObjs.length;i<len;i++){
                    vi = videoObjs[i];
                    //cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
                    //html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));
                    //TODO: 将 edui-faked-video 改为 edui-faked，防止此处被替换为image标签;
                    cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked');
                    //TODO: 将 image 改为 video, 实现视频实时预览，修复保存导致视频丢失;
                    html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));
                }
                me.execCommand("inserthtml",html.join(""),true);
                var rng = this.selection.getRange();
                for(var i= 0,len=videoObjs.length;i<len;i++){
                    var img = this.document.getElementById('tmpVedio'+i);
                    domUtils.removeAttributes(img,'id');
                    rng.selectNode(img).select();
                    me.execCommand('imagefloat',videoObjs[i].align)
                }
            },

2.打开 ueditor.config.js 文件，搜索 whitList

  1. 添加 _url,style,url 字段
  2. 添加 source, embed, iframe 规则
    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    ,whitList: {
    a:      ['target', 'href', 'title', 'class', 'style'],
    abbr:   ['title', 'class', 'style'],
    address: ['class', 'style'],
    area:   ['shape', 'coords', 'href', 'alt'],
    article: [],
    aside:  [],
    audio:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
    b:      ['class', 'style'],
    bdi:    ['dir'],
    bdo:    ['dir'],
    big:    [],
    blockquote: ['cite', 'class', 'style'],
    br:     [],
    caption: ['class', 'style'],
    center: [],
    cite:   [],
    code:   ['class', 'style'],
    col:    ['align', 'valign', 'span', 'width', 'class', 'style'],
    colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
    dd:     ['class', 'style'],
    del:    ['datetime'],
    details: ['open'],
    div:    ['class', 'style'],
    dl:     ['class', 'style'],
    dt:     ['class', 'style'],
    em:     ['class', 'style'],
    font:   ['color', 'size', 'face'],
    footer: [],
    h1:     ['class', 'style'],
    h2:     ['class', 'style'],
    h3:     ['class', 'style'],
    h4:     ['class', 'style'],
    h5:     ['class', 'style'],
    h6:     ['class', 'style'],
    header: [],
    hr:     [],
    i:      ['class', 'style'],
                // TODO: 添加 _url,style,url 字段
    img:    ['src', 'alt', 'title', 'width', 'height', 'id', '_src','_url', 'loadingclass', 'class', 'data-latex','style', 'url'],
    ins:    ['datetime'],
    li:     ['class', 'style'],
    mark:   [],
    nav:    [],
    ol:     ['class', 'style'],
    p:      ['class', 'style'],
    pre:    ['class', 'style'],
    s:      [],
    section:[],
    small:  [],
    span:   ['class', 'style'],
    sub:    ['class', 'style'],
    sup:    ['class', 'style'],
    strong: ['class', 'style'],
    table:  ['width', 'border', 'align', 'valign', 'class', 'style'],
    tbody:  ['align', 'valign', 'class', 'style'],
    td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
    tfoot:  ['align', 'valign', 'class', 'style'],
    th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
    thead:  ['align', 'valign', 'class', 'style'],
    tr:     ['rowspan', 'align', 'valign', 'class', 'style'],
    tt:     [],
    u:      [],
    ul:     ['class', 'style'],
    video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
                // TODO: 添加 source, embed, iframe 规则
                source: ['src', 'type'],
                embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
                iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']  
    }

     

3.打开 dialogs/video/video.js文件，搜索 createPreviewVideo

  1. 将 embed 换成 video 标签

    3.打开 dialogs/video/video.js文件，搜索 createPreviewVideo

    1. 将 embed 换成 video 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    function createPreviewVideo(url){
        if ( !url )return;
 
         var conUrl = convert_url(url);
 
         conUrl = utils.unhtmlForUrl(conUrl);
 
         //$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
        //'<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
        //    ' src="' + conUrl + '"' +
        //    ' width="' + 420  + '"' +
        //    ' height="' + 280  + '"' +
        //    ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
        //'</embed>';
        
        // TODO: 将 embed 换成 video 标签
         $G("preview").innerHTML =  '<video' +
            ' src="' + conUrl + '"' +
            ' width="' + 420 + '"' +
            ' height="' + 280 + '"' +
            ' autoplay' +
            ' controls="controls">'+
            '</video>';
    }

 

from:https://www.cnblogs.com/Run2948/p/UEditor_Fixed_In_AspNetCore.html

Copyright © 2025 Longsheng All rights reserved